Javascript - 从 chrome 控制台隐藏源文件答案

【问题标题】：Javascript - Hide source files from chrome consoleJavascript - 从 chrome 控制台隐藏源文件
【发布时间】：2019-03-20 06:06:31
【问题描述】：

我自己对 Javascript 开发有点陌生。最近，我一直在使用 React 和 ExpressJS 开发一个 Web 应用程序。 Express 将交付前端 React 页面的静态捆绑（使用 Parcel）文件。代码组织是这样的：

> dist\    
>     [static files here] 
> node_modules \ 
> src \
>     client\
>        compontents\       
>        index.html
>        index.js
>     server\
>       models\
>       routes\
>       index.js

构建过程运行良好，我得到了一个完美运行的网络应用程序。问题是谷歌浏览器的源开发者工具暴露了我所有的客户端源代码。 Exposed source code files

一些谷歌搜索让我想到了黑盒和混淆等术语。但我很难理解他们。对它们的一些解释和隐藏源文件的建议会很有帮助。谢谢！

【问题讨论】：

您无法隐藏任何页面上正在加载的任何文件。浏览器需要它来运行您的网站。混淆使您的代码更难阅读，本质上是将您有意义的变量名称修改为 username 到 a。
但这似乎暴露了所有的node_modules！包括包的源代码！
您的浏览器需要每个库的源代码才能运行它们。如果有运行时不需要的第三方库，请考虑将它们放在devDependencies 下的package.json

标签： javascript reactjs npm parceljs

【解决方案1】：

终于明白了。我必须在包裹构建命令中包含 --no-source-maps

parcel build ./src/client/index.html --no-source-maps

【讨论】：

请详细说明一下？这是什么输出？这是否有助于您隐藏来自inspect 的数据。

【解决方案2】：

如果您不设置以下选项，您的 React 源代码（未最小化）将可见。您需要关闭 GENERATE_SOURCEMAP 标志。

在 package.json 中

“脚本”：{ ... "build": "GENERATE_SOURCEMAP=false react-scripts build", ... }

【讨论】：

【解决方案3】：

基本上，网络浏览器需要下载您的 .js 文件才能工作。你无法阻止这一点。但是，在发布的 react 项目中，js 文件被缩小了，所以你不必担心暴露你的源代码。

【讨论】：

是的，我明白了！位于 dist\ 文件夹中的转译反应代码并单独交付它们是否就足够了？我很好地暴露了捆绑后的代码，但这似乎暴露了我所有的源代码！包括所有的 node_modules！
不知道你的Chrome设置是什么，但是我的浏览器只显示了与项目相关的编译好的js文件，即component---xxxxx.js，app-xxxxxx.js。你能检查一下其他正在使用 react 的网站并查看它们的源代码，看看你是否能看到和你的类似的结构文件夹吗？
这不是编译代码。它充其量只是缩小和丑化，但最终，它是完全相同的代码。没有什么是隐藏的，只是更难阅读。
@ArnaudChrist 没有完全遵守，但仍然不仅仅是缩小和丑化，即您的项目很大，但最终，app-xxx.js 是最终结果，组件被打包成一个文件
是的，单个包，通常是所有项目文件的缩小和丑化连接。但是同意你的观点，这可以看作是一个编译阶段。但我认为在这里添加一些精确度是有用的，即最终代码没有被编译，因为它隐藏了源代码。

【解决方案4】：

您可以通过使用HideJS 之类的服务来为您的网站创建一个交互式流，而不是实际编译最终的代码。

代码永远不会到达他们的计算机，因此无法看到它。

【讨论】：

【解决方案5】：

实际上不可能完全阻止您网站上的检查元素。但是您可以阻止一些流行的访问方式。

1。在浏览器上使用 F12 键：

This can be blocked using javascript key event listener. Use the below script to do accomplish it.

$(document).keydown(function(e){
    if(e.which === 123){ 
       return false; 
    } 
});

2。使用右键

You can block this using javascript or with just your html

<html oncontextmenu="return false">
</html>
or

$(document).bind("contextmenu",function(e) { 
    e.preventDefault();

});

3。使用涉及 Ctrl 键的其他快捷键

在 body 元素中包含这个 sn-p。

oncontextmenu="return false" onkeydown="return false;" onmousedown="return false;"

4。通过在检查器打开时临时删除 DOM

下面sn-p的作用是检测调试器何时打开，并删除代码并将代码存储在变量中，当调试器关闭时返回。

var currentHtmlContent;

var element = new Image();

var elementWithHiddenContent = document.querySelector("#element-to-hide");

var innerHtml = elementWithHiddenContent.innerHTML;   


element.__defineGetter__("id", function() {

    currentHtmlContent= "";

});

setInterval(function() {

    currentHtmlContent= innerHtml;

    console.log(element);

    console.clear(); 

    elementWithHiddenContent.innerHTML = currentHtmlContent;

}, 1000);

【讨论】：

这将禁用 some 在 some 浏览器中打开控制台的方法，但您无法真正阻止打开控制台。跨度>