如何保护 JavaScript 文件？

Question

我知道隐藏源代码是不可能的，但是，例如，如果我必须将 JavaScript 文件从 CDN 链接到网页，并且我不希望人们知道该脚本的位置和/或内容，是这样吗？可能的？

例如，要从网站链接脚本，我们使用：

<script type="text/javascript" src="http://somedomain.example/scriptxyz.js">
</script>

现在，是否可以向用户隐藏脚本的来源，或者隐藏脚本内容并仍然在网页上使用它？

例如，将其保存在需要密码才能访问文件的私人 CDN 中，这可行吗？如果没有，怎样才能得到我想要的东西？

Answer 1

好问题，答案简单：你不能！

JavaScript 是一种客户端编程语言，因此它在客户端的计算机上运行，​​因此您实际上无法向客户端隐藏任何内容。
混淆代码是一个很好的解决方案，但这还不够，因为尽管这很困难，但有人可以破译您的代码并“窃取”您的脚本。
有几种方法可以使您的代码难以被窃取，但正如我所说，没有什么是万无一失的。

我突然想到，一个想法是限制从嵌入代码的页面外部访问外部 js 文件。在这种情况下，如果您有

<script type="text/javascript" src="myJs.js"></script>

并且有人尝试访问 myJs.js 在浏览器中的文件中，他不应该被授予对脚本源的任何访问权限。
例如，如果您的页面是用 PHP 编写的，您可以通过 include 函数包含脚本，并让脚本决定返回其源代码是否安全”。
在此示例中，您需要外部“js”（用 PHP 编写）文件 myJs.php：

<?php
    $URL = $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
    if ($URL != "my-domain.example/my-page.php")
    die("/\*sry, no acces rights\*/");
?>
// your obfuscated script goes here

该文件将包含在您的主页 my-page.php 中：

<script type="text/javascript">
    <?php include "myJs.php"; ?>;
</script>

这样，只有浏览器才能看到js文件内容。

另一个有趣的想法是，在脚本末尾，您删除 dom 脚本元素的内容，以便在浏览器评估您的代码后，代码消失：

<script id="erasable" type="text/javascript">
    //your code goes here
    document.getElementById('erasable').innerHTML = "";
</script>

这些都只是简单的黑客，不能，我不能强调这已经足够了：不能完全保护你的 js 代码，但他们肯定会激怒那些试图“窃取”你的代码的人。

更新：

我最近发现一篇非常有趣的文章 由 Patrick Weid 撰写，介绍如何隐藏 js 代码，他揭示了一种不同的方法方法：您可以将源代码编码成图像！当然，这也不是防弹的，但它是您可以围绕代码构建的另一个栅栏。
这种方法背后的想法是，大多数浏览器可以使用 canvas 元素对图像进行像素操作。由于画布像素由 4 个值（rgba）表示，因此每个像素可以具有 0-255 范围内的值。这意味着您可以在每个像素中存储一个字符（实际上是 ascii 代码）。其余的编码/解码是微不足道的。

Answer 2

您唯一能做的就是混淆您的代码以使其更难以阅读。无论您做什么，如果您希望 JavaScript 在他们的浏览器中执行，他们就必须拥有代码。

Answer 3

就在我的脑海中，你可以做这样的事情（如果你可以创建服务器端脚本，听起来你可以）：

而不是像平常一样加载脚本，而是向 PHP 页面发送 AJAX 请求（它可以是任何东西；我自己就用它）。让 PHP 找到该文件（可能位于服务器的非公共部分），使用 file_get_contents 打开它，然后以字符串形式返回（读取：echo）内容。

当该字符串返回到 JavaScript 时，让它创建一个新的 script 标记，用您刚刚收到的代码填充其 innerHTML，并将该标记附加到页面。 （您可能对此有困难；innerHTML可能不是您所需要的，但您可以尝试一下。）

如果您经常这样做，您甚至可能想要设置接受带有脚本名称的 GET 变量的 PHP 页面，以便您可以使用相同的 PHP 动态抓取不同的脚本。 （也许你可以使用 POST 来代替，让其他人更难看到你在做什么。我不知道。）

编辑：我以为你只是想隐藏脚本的位置。如果您试图隐藏脚本本身，这显然没有多大帮助。

Answer 4

Google Closure 编译器、YUI 压缩器，Minify，/Packer/...等是压缩/混淆 JS 代码的选项。但它们都无法帮助您向用户隐藏代码。

任何有足够知识的人都可以使用 JS Beautifier 等工具轻松解码/反混淆您的代码。你说出它的名字。

所以答案是，你总是可以让你的代码更难阅读/解码，但肯定没有办法隐藏。

Answer 5

算了，这也是办不到的。

无论你尝试什么，都不会起作用。用户需要做的就是在 firebug 中的 net 选项卡中查找或使用 fiddler 查看正在发出哪些请求。

Answer 6

据我所知，这是不可能的。

您的浏览器必须能够访问 JS 文件才能执行它们。如果浏览器具有访问权限，则浏览器的用户也具有访问权限。

如果你用密码保护你的 JS 文件，那么浏览器将无法访问它们，这就违背了拥有 JS 的初衷。

Answer 7

我认为唯一的方法是将所需的数据放在服务器上，并仅允许登录用户根据需要访问数据（您也可以在服务器端进行一些计算）。这不会保护您的 javascript 代码，但会使其在没有服务器端代码的情况下无法运行

Answer 8

我同意这里其他人的观点：在客户端使用 JS，秘密就已经泄露了，没有什么是完全万无一失的。

话虽如此；在某些情况下，我这样做是为了给那些想要查看代码的人设置一些障碍。这就是算法的工作原理（大致）

1. 服务器创建 3 个哈希值和加盐值。一个用于当前时间戳，另外两个用于接下来 2 秒的每一秒。这些值通过 Ajax 以逗号分隔的字符串形式发送到客户端；来自我的 PHP 模块。在某些情况下，我认为您可以在页面形成时将这些值硬烘焙到 HTML 的脚本部分中，并在散列的使用结束后删除该脚本标记服务器受 CORS 保护并执行所有常见的 SERVER_NAME 等操作检查（这不是太多的保护，但至少提供了一些对脚本小子的抵抗力）。

2. 如果服务器检查是否确实有经过身份验证的用户客户端在执行此操作，那就太好了

3. 客户端然后通过 ajax 调用将相同的 3 个哈希值发送回服务器以获取我需要的实际 JS。服务器根据当前时间戳检查哈希值...这三个值确保数据在 3 秒窗口内发送，以考虑浏览器和服务器之间的延迟

4. 服务器需要确信一个哈希值是
   匹配正确；如果是这样，它将发送回关键的 JS
   给客户。这是一个简单粗暴的“一次性密码”
   后端不需要任何数据库。

5. 这意味着，自第一组哈希值生成以来，任何黑客都只有 3 秒的窗口期来获取实际的 JS 代码。

6. 整个客户端代码可以位于 IIFE 函数内，因此客户端内的某些变量更难从 Inspector 控制台读取

   这不是任何深入的解决方案：坚定的黑客可以注册，获得一个帐户，然后要求服务器生成前三个哈希值；通过一些技巧来绕过 Ajax 和 CORS；然后让客户端执行第二次调用以获取实际代码——但这是一个合理的工作量。

此外，如果服务器使用的Salt是基于登录凭据的；服务器也许能够检测到谁是试图检索敏感JS的用户（服务器需要在检索敏感JS之后对用户的行为做一些额外的工作，并阻止该人，如果该人，例如例如，没有进行预期的其他活动）

这里为黑客马拉松完成了一个旧的、粗略的版本：http://planwithin.com/demo/tadr.html 如果服务器检测到太多延迟并且超出了 3 秒窗口期，则该方法将不起作用

Answer 9

正如我之前在 gion_13 答案上留下的评论中所说（请阅读），你真的不能。不是用 JavaScript。

如果您不希望代码在客户端可用（=无需付出很大努力即可窃取），
我的建议是使用在服务器端处理的 PHP（ASP、Python、Perl、Ruby、JSP + Java-Servlet），并且仅将计算/代码执行的结果提供给用户。或者，如果您愿意，甚至可以使用允许客户端计算/代码执行但经过编译的 Flash 或 Java-Applet，因此更难进行反向引擎（因此并非不可能）。

只是我的2分钱。

Answer 10

您还可以为应用程序/JavaScript 设置 MIME 类型，以作为 PHP、.NET、Java 或您正在使用的任何语言运行。我过去曾对动态 CSS 文件这样做过。

Answer 11

我知道现在回答这个问题是错误的，但我只是想到了一些

我知道可能会有压力的事情，但至少它可能仍然有效

现在的秘诀是创造 许多服务器端编码脚本，它们必须是可解码的（例如，用数字替换所有元音并将字母“a”添加到每个辅音的脚本，以便单词“bat”变成ba1ta）然后创建一个脚本将在编码脚本之间进行随机化，并使用正在使用的编码脚本的名称创建一个 cookie（快速提示：尽量不要使用 cookie 的编码脚本的实际名称，例如，如果我们的 cookie 名称为“encoding_script_being_used”，并且随机化脚本选择名为 MD10 的编码脚本，尽量不要使用 MD10 作为 cookie 的值，而是使用“encoding_script4567656”，只是为了防止猜测）然后在创建 cookie 后，另一个脚本将检查名为“encoding_script_being_used”的 cookie 并获取值，然后它将确定正在使用什么编码脚本。

现在，在编码脚本之间进行随机化的原因是服务器端语言将随机化使用哪个脚本来解码 javascript.js，然后创建一个会话或 cookie 以了解使用了哪个编码脚本
那么服务器端语言也会对你的 javascript .js 进行编码并将其作为 cookie

so now let me summarize with an example

PHP randomizes between a list of encoding scripts and encrypts javascript.js then it create a cookie telling the client side language which encoding script was used then client side language decodes the javascript.js cookie(which is obviously encoded)

这样人们就无法窃取你的代码，

但我不建议这样做，因为

1. 这是一个漫长的过程
2. ，压力太大

Answer 12

使用 nwjs 我认为很有帮助，它可以编译到 bin 然后你可以用它来制作 win、mac 和 linux 应用程序

Answer 13

如果您不想暴露算法中最敏感的部分，则此方法部分有效。

创建 WebAssembly 模块 (.wasm)，导入它们，并仅公开您的 JS 等...工作流程。通过这种方式，算法得到了保护，因为将汇编代码恢复为更人类可读的格式是极其困难的。

生成 wasm 模块并导入 correclty 后，您可以像平常一样使用代码：

<body id="wasm-example">
  <script type="module">
      import init from "./pkg/glue_code.js";
      init().then(() => {
          console.log("WASM Loaded");
      });
  </script>
</body>