如何在网页中隐藏 javascript 代码？答案

【问题标题】：How do I hide javascript code in a webpage?如何在网页中隐藏 javascript 代码？
【发布时间】：2022-01-12 12:12:16
【问题描述】：

当通过浏览器查看源代码功能查看源代码时，是否可以从网页的 html 中隐藏 Javascript 代码？

我知道可以对代码进行混淆处理，但我希望它从查看源代码功能中隐藏。

【问题讨论】：

它是客户端，因此它将驻留在每个客户端（浏览器）上
为什么要隐藏 Javascript？这不像您曾经放置任何您不希望用户在其中找到的敏感数据......对吧？！
浏览器如何知道要运行什么 Javascript？
@PaulPRO 有一个很好的观点——为什么要隐藏 JavaScript？任何想知道你在做什么的人总是能够通过几次击键获得你的脚本。他们不会仅仅依赖于 View-Source。任何不知道如何获取脚本的人都可能不会对它感兴趣。
@UdayHiwarale 非常很容易看到客户端执行的 GET 和其他 HTTP 查询是什么（只需打开开发控制台并转到网络选项卡）。在开发网站时，您应该在服务器上假设所有请求都是由攻击者伪造的——因此您必须验证所有数据，并小心地转义您拼接到 SQL 或其他代码中的每个字符串。

标签： javascript browser hide obfuscation

【解决方案1】：

我不确定其他人是否真的直接解决了您的问题，即从浏览器的“查看源代码”命令中查看的代码。

正如其他人所说，没有办法保护打算在浏览器中运行的 javascript 免受确定的查看者的影响。如果浏览器可以运行它，那么任何确定的人也可以查看/运行它。

但是，如果您将您的 javascript 放在一个外部 javascript 文件中，该文件包含在：

<script type="text/javascript" src="http://mydomain.com/xxxx.js"></script>

标签，那么 JavaScript 代码将不会立即通过查看源命令可见 - 只有脚本标签本身才会以这种方式可见。这并不意味着某人不能只加载该外部 javascript 文件来查看它，但您确实询问了如何将其排除在浏览器的查看源代码命令之外，这样就可以了。

如果您真的想让查看源代码的工作量更大，您可以执行以下所有操作：

将其放入外部 .js 文件中。
对文件进行模糊处理，以便将大多数本机变量名称替换为短版本，从而删除所有不需要的空格，因此如果不进行进一步处理等就无法读取...
通过以编程方式添加脚本标记来动态包含 .js 文件（就像 Google Analytics 所做的那样）。这将使从“查看源代码”命令获取源代码变得更加困难，因为那里没有简单的链接可供点击。
将您想要保护的尽可能多的有趣逻辑放在您通过 ajax 调用检索的服务器上，而不是进行本地处理。

话虽如此，我认为您应该专注于性能、可靠性和让您的应用变得出色。如果您绝对必须保护某些算法，请将其放在服务器上，但除此之外，竞争最好的自己，而不是拥有秘密。这就是最终在网络上取得成功的方式。

【讨论】：

直接解决问题的好方法。使用 JavaScript 生成 <script> 可以更好地使其远离查看源（在实时 DOM 下仍然可见）——也就是说，它不能只是在源视图。一旦执行 JavaScript，可能会删除上述 <script> 元素，这使得获取原始代码变得稍微麻烦一些（但并非不可能）......当然，净流量很容易在 Firebug 或类似物中显示出来;-)
@Quentin - 您的查看源 URL 很愚蠢 - 这不是这里所要求或建议的。任何人都可以查看代码。我和其他人一样说过。问题只是它有多容易，并且根据所提出的具体问题，当有人查看源代码时它有多明显？我的建议是从查看源代码中删除一个步骤 - 仅此而已，但这是一个有效的额外步骤。
fetch("SCRIPT TO HIDE URL or DATAURL").then(function(t) { return t.text()||false; }).then(c=>self[atob(" ZXZhbA")](c))
我认为我们还可以添加 oncontextmenu = 'return false;'在 html 标签内。
@falero80s - 这会尝试停止右键单击菜单，但不会停止查看页面源代码的所有其他方式。

【解决方案2】：

不，这是不可能的。

如果你不给浏览器，那么浏览器就没有它。

如果你这样做了，那么它（或容易遵循的对它的引用）就构成了源代码的一部分。

【讨论】：

我不确定这个答案是否真的回答了所提出的问题（即使它在 15 分钟内获得了 10 次投票）。他们询问如何将代码保留在浏览器查看源代码命令之外。这是可能的。请看下面我的回答。他们没有询问如何防止代码被坚定的黑客查看。
在 HTML 文档的查看源代码中单击链接 以获取脚本的查看源代码并不需要太多的确定。跨度>
在我看来，问题没有得到正确解释。创建 JS 文件很常见，用户在这里（我认为）想要的是当任何人选择“查看页面源”选项时如何隐藏任何 JS 变量值。从我这边 +1。
这个答案没有任何意义。最好在这里提出建议。使用外部文件的更好选择。

【解决方案3】：

我的解决方案灵感来自最后一条评论。这是invisible.html的代码

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="invisible_debut.js" ></script>
<body>
</body>

invisible_debut.js 的清晰代码是：

$(document).ready(function () {
var ga = document.createElement("script"); //ga is to remember Google Analytics ;-)
ga.type = 'text/javascript';
ga.src = 'invisible.js';
ga.id = 'invisible';
document.body.appendChild(ga);
$('#invisible').remove();});

请注意，最后我将删除创建的脚本。 invisible.js 是：

$(document).ready(function(){
    alert('try to find in the source the js script which did this alert!');
    document.write('It disappeared, my dear!');});

invisible.js 不会出现在控制台中，因为它已被删除，并且永远不会出现在源代码中，因为它是由 javascript 创建的。

关于invisible_debut.js，我把它混淆了，也就是说找到invisible.js的url很复杂。不完美，但对于普通黑客来说已经够难了。

【讨论】：

奇怪的是，我完全按照这些步骤进行操作，并且能够在源代码中找到invisible.js。 Chrome 版本 34.0.1847.131 m
@Boyang，它只是没有出现在控制台中，但如果我们知道路径，我们仍然可以找到它。
不仅如此，它还会始终显示在大多数 DevTools 的“网络”选项卡中。同样，每个有自尊心的黑客都可以使用 DevTools。

【解决方案4】：

使用 Html Encrypter 头部有的部分

<link rel="stylesheet" href="styles/css.css" type="text/css" media="screen" />
<script type="text/javascript" src="script/js.js" language="javascript"></script>

copy and paste it to HTML Encrypter and the Result will goes like this
and paste it the location where you cut the above sample

<Script Language='Javascript'>
<!-- HTML Encryption provided by iWEBTOOL.com -->
<!--
document.write(unescape('%3C%6C%69%6E%6B%20%72%65%6C%3D%22%73%74%79%6C%65%73%68%65%65%74%22%20%68%72%65%66%3D%22%73%74%79%6C%65%73%2F%63%73%73%2E%63%73%73%22%20%74%79%70%65%3D%22%74%65%78%74%2F%63%73%73%22%20%6D%65%64%69%61%3D%22%73%63%72%65%65%6E%22%20%2F%3E%0A%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3D%22%73%63%72%69%70%74%2F%6A%73%2E%6A%73%22%20%6C%61%6E%67%75%61%67%65%3D%22%6A%61%76%61%73%63%72%69%70%74%22%3E%3C%2F%73%63%72%69%70%74%3E%0A'));
//-->

HTML ENCRYPTER 注意：如果您的页面中有 java 脚本，请尝试导出到 .js 文件并使其像上面的示例一样。

而且这个加密器并不总是在某些代码中工作，这会使你的网站一团糟......选择你想要隐藏的最佳部分，例如<form> </form>

高级用户可以将其反转，但并非所有像我这样的菜鸟都知道。

希望这会有所帮助

【讨论】：

您提供的链接未打开，出现 404 代码错误。
网站黑客将恶意代码注入网站的方式与此相同。一些更高级的安全网络爬虫工具会寻找这样的代码并将其从页面源代码中清除。

【解决方案5】：

'不可能！'

哦，是的，它是......

//------------------------------
function unloadJS(scriptName) {
  var head = document.getElementsByTagName('head').item(0);
  var js = document.getElementById(scriptName);
  js.parentNode.removeChild(js);
}


//----------------------
function unloadAllJS() {
  var jsArray = new Array();
  jsArray = document.getElementsByTagName('script');
  for (i = 0; i < jsArray.length; i++){
    if (jsArray[i].id){
      unloadJS(jsArray[i].id)
    }else{
      jsArray[i].parentNode.removeChild(jsArray[i]);
    }
  }      
}

【讨论】：

很好的答案。它确实隐藏了 javascript 的使用，但是，只有当您使用 Element Inspector/Developer Tools 时，您仍然可以通过查看源代码查看。（至少在 chrome 上）
这里的变量“head”是多余的还是有一些重要的功能？
它只隐藏了一部分......任何暴露的函数（全局）都可以由开发工具显示，它会显示为匿名函数，但开发工具会告诉你一切，包括它从哪里加载跨度>
这只会从源代码中隐藏它.. 任意函数也会这样做： fetch("SCRIPT TO HIDE").then(function(t) { return t.text()||false ; }).then(c=>self[atob("ZXZhbA")](c))

【解决方案6】：

我不确定是否有隐藏该信息的方法。无论你做什么来混淆或隐藏你在 JavaScript 中所做的一切，它仍然归结为你的浏览器需要加载它才能使用它。现代浏览器具有开箱即用的 Web 调试/分析工具，可以轻松提取和查看脚本（例如，只需在 Chrome 中按 F12）。

如果您担心暴露某种商业机密或算法，那么您唯一的办法就是将该逻辑封装在 Web 服务调用中，并让您的页面通过 AJAX 调用该功能。

【讨论】：

假设您担心泄露一个秘密。假设您将其放入 PHP 文件并通过 Ajax 调用它。然后任何人都可以调用该 PHP 文件并找到秘密。可能有一种方法可以使用 PHP 保护机密，而我一直在努力寻找它。生成一个随机数并要求所有资产将其作为参数提供给 PHP 文件。我认为这行得通，但如果恶意用户使用开发者工具则不行。

【解决方案7】：

我想我找到了一种解决方案，可以在浏览器的视图源中隐藏某些 JavaScript 代码。但是你必须使用 jQuery 来做到这一点。

例如：

在你的 index.php 中

<head>
<script language = 'javascript' src = 'jquery.js'></script>
<script language = 'javascript' src = 'js.js'></script>
</head>

<body>
<a href = "javascript:void(null)" onclick = "loaddiv()">Click me.</a>

<div id = "content">
</div>

</body>

您在 js.js 文件中的 jquery 函数调用的 html/php 正文中加载文件。

js.js

function loaddiv()
{$('#content').load('content.php');}

这是诀窍。

在您的 content.php 文件中放置另一个 head 标签，然后从那里调用另一个 js 文件。

内容.php

<head>
<script language = 'javascript' src = 'js2.js'></script>
</head>

<a href = "javascript:void(null)" onclick = "loaddiv2()">Click me too.</a>

<div id = "content2">
</div>

在 js2.js 文件中创建任何你想要的函数。

示例：

js2.js

function loaddiv2()
{$('#content2').load('content2.php');}

content2.php

<?php
echo "Test 2";
?>

请点击链接，然后将其复制粘贴到 jquery.js 的文件名中

http://dl.dropbox.com/u/36557803/jquery.js

我希望这会有所帮助。

【讨论】：

这只会提供最低限度的保护。转到浏览器的开发工具的网络选项卡并查看所有下载的脚本很简单，包括通过 Ajax 加载的脚本。

【解决方案8】：

你可以使用document.write。

没有 jQuery

<!DOCTYPE html>
<html>
<head><meta charset=utf-8></head>
<body onload="document.write('<!doctype html><html><head><meta charset=utf-8></head><body><p>You cannot find this in the page source. (Your page needs to be in this document.write argument.)</p></body></html>');">
</body></html>

或使用 jQuery

$(function () {
  document.write("<!doctype html><html><head><meta charset=utf-8></head><body><p>You cannot find this in the page source. (Your page needs to be in this document.write argument.)</p></body></html>")
});

【讨论】：

【解决方案9】：

不可能！

唯一的方法是混淆 javascript 或缩小您的 javascript，这使得最终用户很难进行逆向工程。然而，逆向工程并非不可能。

【讨论】：

【解决方案10】：

几年前我使用的方法-

我们需要一个jsp文件，一个servlet java文件和一个filter java文件。

将 jsp 文件的访问权限授予用户。 jsp文件的用户类型url。

案例 1 -

Jsp 文件会将用户重定向到 Servlet。
Servlet 将执行嵌入在 xxxxx.js 文件中的核心脚本部分和
使用 Printwriter ，它会将响应呈现给用户。
同时，Servlet 会创建一个密钥文件。
当 servlet 尝试执行其中的 xxxx.js 文件时，过滤器
将激活并检测密钥文件是否存在并因此删除密钥
文件。

一个循环就这样结束了。

简而言之，密钥文件将由服务器创建并被过滤器立即删除。

每次点击都会发生这种情况。

案例 2 -

如果用户尝试获取页面源并直接点击xxxxxxx.js文件，过滤器会检测到key文件不存在。
这意味着请求不是来自任何servlet。因此，它会阻塞请求链。

可以使用会话变量中的设置值来代替创建文件。

【讨论】：

【解决方案11】：

这是可能的。但无论如何它都是可见的。

你可以自己制作这个工具：

const btn = document.querySelector('.btn');
btn.onclick = textRead;
const copy = document.querySelector('.copy');
copy.onclick = Copy;
const file = document.querySelector('.file');
file.type = 'file';
const pre = document.querySelector('.pre');

var pretxt = pre;

if (pre.innerHTML == "") {
    copy.hidden = true;
}

function textRead() {
    let file = document.querySelector('.file').files[0];
    let read = new FileReader();
    read.addEventListener('load', function(e) {
        let data = e.target.result;
        pre.textContent = data;
    });
    read.readAsDataURL(file);
    copy.hidden = false;
}

function Copy() {
    var text = pre;
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(text);
    selection.addRange(range);
    document.execCommand('copy');
    selection.removeAllRanges();
}

<input class="file" />
<br>
<button class="btn">Read File</button>
<pre class="pre"></pre>
<button class="copy">Copy</button>

如何使用这个工具？

创建一个 JavaScript 文件。
进入工具并选择您的 JavaScript 文件。
复制结果。
将结果粘贴到记事本中。
删除data:text/javascript;base64,。
将eval(atob('Notepad Text')) 粘贴到您的代码中，并将Notepad Text 更改为您的记事本文本结果。

如何查看隐藏的代码？

复制隐藏代码并粘贴到记事本中。
复制 eval 和 atob 之后的字符串。
粘贴 data:text/javascript;base64,String 并将 String 更改为您复制的字符串。

【讨论】：

【解决方案12】：

将您的 JavaScript 放入单独的 .js 文件中，并使用捆绑和缩小来隐藏代码。

http://www.sitepoint.com/bundling-asp-net/

【讨论】：