Javascript - 从 Chrome 控制台隐藏源文件
[英]Javascript - Hide source files from chrome console
问题描述
I'm kinda new to Javascript development myself.
我自己对 Javascript 开发有点陌生。 Lately, I've been working on a web app using React and ExpressJS.最近，我一直在使用 React 和 ExpressJS 开发一个 Web 应用程序。 Express will deliver the static bundled(using Parcel) files of front-end React page. Express 将交付前端 React 页面的静态捆绑（使用 Parcel）文件。 The code organisation is something like this:代码组织是这样的：
> dist\
> [static files here]
> node_modules \
> src \
> client\
> compontents\
> index.html
> index.js
> server\
> models\
> routes\
> index.js
The build process works fine and I get a perfectly working web app.构建过程运行良好，我得到了一个完美运行的网络应用程序。 The problem is that Google Chrome's Source developer tool exposes all of my source code for the client.问题是谷歌浏览器的源代码开发工具为客户端公开了我的所有源代码。 Exposed source code files暴露的源代码文件
Some googling led me to terms such as blackboxing and obfuscation.一些谷歌搜索使我想到了诸如黑盒和混淆之类的术语。 But I have a hard time understanding them.但我很难理解他们。 Some explanation of them and advice on hiding source files will be helpful.对它们的一些解释和关于隐藏源文件的建议会有所帮助。 Thanks!谢谢！
5 个解决方案
解决方案1
2 2019-03-20 08:21:30
Finally got it.终于得到了。 I had to include --no-source-maps in parcel build command我必须在包裹构建命令中包含 --no-source-maps
parcel build ./src/client/index.html --no-source-maps
解决方案2
0 2019-03-20 06:10:33
Basically a web browser need to download your .js files in order to work.基本上，网络浏览器需要下载您的 .js 文件才能工作。 You cannot prevent this.你无法阻止这一点。 However, in the published react project, the js files are minified so you dont need to worry about exposing your source code.但是，在已发布的 react 项目中，js 文件被缩小了，因此您无需担心暴露源代码。
解决方案3
0 2019-09-27 10:25:49
解决方案4
0 2020-01-17 18:43:21
If you don't set the following option, your react source code (not minimized) will be visible.如果您不设置以下选项，您的 React 源代码（未最小化）将可见。 You need to turn off the GENERATE_SOURCEMAP flag.您需要关闭 GENERATE_SOURCEMAP 标志。
in package.json在 package.json 中
"scripts": { ... "build": "GENERATE_SOURCEMAP=false react-scripts build", ... } "scripts": { ... "build": "GENERATE_SOURCEMAP=false react-scripts build", ... }
解决方案5
-3 2019-03-20 06:40:24
It is not really possible to completely block inspect element on your website.完全阻止您网站上的检查元素是不可能的。 But you can block some popular ways of accessing it.但是您可以阻止一些流行的访问方式。
1. Use of F12 key on the browser: 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. Use of Right click 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. Use of other shortcuts involving Ctrl keys 3. 其他涉及Ctrl键的快捷键的使用
Include this snippet inside the body element.将此代码段包含在 body 元素中。
oncontextmenu="return false" onkeydown="return false;" oncontextmenu="返回假" onkeydown="返回假；" onmousedown="return false;" onmousedown="返回假；"
4. By temporarily removing DOM when inspector is opened 4. 通过在打开检查器时临时移除 DOM
What the below snippet does is to detect when the debugger is opened, and removes the code and stores the code in a variable and and when the debugger is closed, it returns it.下面的代码片段的作用是检测调试器何时打开，删除代码并将代码存储在变量中，当调试器关闭时，它返回它。
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);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.