如何在网页中源码中隐藏 JavaScript 代码？

际上，从源代码中隐藏Javascript代码是不可能的，因为Javascript代码是以明文形式下载到客户端浏览器并由浏览器执行完成的。

在本文中，我将与您分享一些阻碍用户和使用户难以阅读 javascript 源代码的方法：

混淆javascript代码

混淆是一种改变代码结构以使其更难理解的技术。例如，变量名可以用随机字符或字符串替换。这使得代码更难阅读和理解，如前所述，它不提供完整的保护。

网上有一些工具可以混淆 javascript 代码，例如 JavaScript Obfuscator Tool[1]

服务器端渲染

为了维护敏感代码的安全和隐私，可以在服务器端而不是客户端执行敏感计算。这种方法通常用于各种 Web 应用程序，尤其是那些处理机密数据的应用程序，例如网上银行应用程序。通过在服务器端执行计算，敏感代码对客户端保持隐藏状态，从而降低未经授权访问、篡改或盗窃的风险。

在服务器端执行计算时，Web 应用程序通过从客户端向服务器端发送请求来工作，然后服务器端处理请求并将结果发送回客户端。这种方法确保敏感代码不会暴露给客户端，客户端容易受到黑客攻击或其他安全漏洞。

此外，服务器端的计算处理提供了多项优势，例如更快的性能、增强的可扩展性和资源的有效利用。由于服务器端可以同时处理多个请求，因此可以提供更快的响应时间和更好的用户体验。此外，服务器端可以有效地管理计算资源，确保应用程序可以在不影响性能的情况下处理大量数据和用户。

考虑到这些好处，开发人员在构建处理机密数据的 Web 应用程序时需要考虑服务器端实现。

Javascript 压缩

压缩的过程，通过删除不必要的字符（例如空格和注释）以及缩短变量名称来优化代码。这是一种常用于减少网络传输的数据量的方法，从而减少网页的加载时间。

在压缩过程中，代码会去除所有无关字符以使其尽可能紧凑。这是通过从代码中删除所有空格、制表符和换行符来实现的。此外，所有注释以及程序运行不需要的任何代码都从代码中删除。

尽管压缩使代码更小且更难阅读，但如果有人决心这样做，仍然可以理解代码。但是，压缩的主要目的是优化代码并减少需要传输的数据量。这有助于加快网页的加载时间，从而为网站访问者带来更好的用户体验。

禁用鼠标右键

防止用户访问上下文菜单（包括查看源代码、检查元素和保存图像等选项）的一种方法是通过事件侦听器或 CSS 属性禁用右键单击。然而，这种方法在隐藏代码方面并不完全有效，因为用户仍然可以使用键盘快捷键或浏览器工具访问源代码。

以下是如何在 javascript 中禁用鼠标右键，

document.addEventListener('contextmenu', event => event.preventDefault());

注意：一般您不应禁用右键单击，因为它会降低网站的可访问性，从而导致糟糕的用户体验。

结论

总之，虽然不可能从源代码中完全隐藏 Javascript 代码，但可以使用多种方法使其更难阅读和理解。混淆、服务器端渲染、Javascript 压缩和禁用鼠标右键单击是一些可用于保护敏感代码的方法。

然而，重要的是要注意这些方法并非万无一失，如果有足够的动机，人们仍然可以访问代码。因此，开发人员必须实施多层安全措施来保护他们的代码并确保他们的 Web 应用程序的安全。

引用链接

[1] JavaScript Obfuscator Tool: https://www.obfuscator.io/

绍input[type="hidden"],input[type="file"]两种特殊的表单元素，readonly disabled只读属性与禁用属性的区别于使用场景。

现实中，我们时常需要在网页中展示你的联系方式，其中Email邮件地址通常需要提供在页面上。但是在网络机器人泛滥的互联中，如果直接显示你邮件，则很可能被他们识别并拷贝，然后对你的邮件地址实施邮件轰炸。为了避免这个问题，需要利用技术手段来保护你的地址，使其只能被人眼看到，并且支持直接链接发送邮件，但是不能被网络机器人识别到，一般常用的方法是通过JS，Html，CSS对地址隐藏，但是编写代码有点繁琐，可能还要引入额外的JS库才能实现，而且还有一个缺点就是对一些限制级别的设备上，浏览器可能会禁用掉JS功能，这样会导致页面不能正常工作。此处给大家介绍一种基于SVG方法的邮件地址保护技术，可以极大程度的保护你免受机器人骚扰以及保证在浏览器禁用JS情况下仍然可以正常工作。

优点

在JavaScript禁用的情况下工作

主要优点这种基于SVG的电子邮件保护方法没有用的任何的JavaScript代码。

因此，即使访问者浏览器禁用了JavaScript，页面上显示的电子邮件地址仍然可用、可访问和受到保护，同时保持安全并免受垃圾邮件机器人的攻击。

允许标准mailto:链接

与其他不需要JavaScript的方法（例如，通过插入不可见的HTML注释或插入可见元素并随后通过CSS隐藏它们来混淆电子邮件地址）不同，这基于SVG的方法允许标准 mailto:链接。主要区别是：mailto:链接存在于外部 SVG文档内部，而不是内部引用的HTML文档。

像图像一样隐藏内容，像文本一样可复制

第三个优点是嵌入式SVG类似于图像，但不是图像。作为嵌入超文本文档中的替换元素，SVG可以像图像一样有效地隐藏垃圾邮件地址的电子邮件地址。

但严格来说，SVG是图形文档，而非实际图像。

因此，与图像不同，人类访问者仍然可以通过右键单击电子邮件地址来复制电子邮件地址 <text>嵌入SVG中的元素。这对于传统图像方法来说，无法多做到手动复制地址（但是可以使用图像文本识别OCR技术来实现）。

基本方法

我们以一个最简单的Emil链接地址共享为例。示例中由两个两个文件组成：其中SVG图形文档通过<object>标签方式嵌入到主HTML页面中，基本语法如下：

注意，同一个SVG图形文档支持在多个地方，进行嵌入。主页面HTML（main.htm）源代码如下，一个很简单的页面：

<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>SVG Email Protection</title>
<style>
.cc {
width: 180px;
height: 24px;
vertical-align: middle;
}
</style>
</head>
<body>
<p>请邮件联系我: <object class="cc" data="svg-email-protection.svg" type="image/svg+xml"></object></p>
</body>
</html>

SVG文档（svgprot-chongchong）代码：

<svg xmlns="http://www.w3.org/2000/svg"
lang="en-GB"
aria-labelledby="title"
viewBox="0 0 200 24">
<title id="title"> SVG Email Protection</title>
<defs>
<style type="text/css"><![CDATA[
rect {
width: 200px;
height: 24px;
fill: rgb(255, 255, 255);
}
a:focus rect,
rect:hover {
rx: 4px;
ry: 4px;
fill: rgb(0, 0, 255);
}
text {
font-size: 16px;
fill: rgb(0, 0, 255);
pointer-events: none;
}
a:focus text,
rect:hover + text {
fill: rgb(255, 255, 255);
font-weight: 900;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
text-decoration: underline 1px solid rgb(255, 255, 255);
text-underline-offset: 5px;
}
]]></style>
</defs>
<a href="mailto:chongchong[at]ijz.me" aria-label="点击发邮件">
<rect />
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle"> chongchong[at]ijz.me</text>
</a>
</svg>

将以上两个文件放到同意目录，然后用浏览器打开主页面main.hm就可以看到效果了

总结

本文给大家介绍了一种基于SVG文档的优雅的邮件保护方法，可以极大的免受网络机器人窃取你的邮件地址进行骚扰攻击，同时支持emailto链接，支持无JS浏览器下正常工作，支持手动邮件复制等优点，当然该方法也是只能抵挡一般性规模化工作的Web机器人攻击，如果遇到高级机器人，比如可以模仿真人访问行为的，可以分析语法找到SVG文件进行获取地址的高级机器人则无防御能力。

在线咨询

上一篇：逐步实现网页可访问性的关键技巧: 使用语义 HTML 提高网站可访问性
下一篇：如何快速搭建一个公网https网站，权威机构免费颁发数字证书

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商