如何在网页中隐藏JavaScript代码?

127

当通过浏览器“查看源代码”功能查看网页源代码时,是否可能隐藏网页中的Javascript代码?

我知道可以混淆代码,但我更喜欢将其从“查看源代码”功能中隐藏


1
它是客户端的,因此它将驻留在每个客户端(浏览器)上。 - naveen
9
为什么要隐藏JavaScript?毕竟你不会在其中放置任何不想让用户发现的敏感数据……对吧? - Paul
1
一个浏览器如何知道要运行哪个Javascript? - Wylie
1
@PaulPRO说得很好--为什么要隐藏JavaScript?任何想知道你在做什么的人都可以用几个按键获取你的脚本。他们不会只依赖于查看源代码。那些不知道如何获取脚本的人可能也不会对它感兴趣。 - Stephen Chung
1
@UdayHiwarale,很容易看到客户端执行的GET和其他HTTP查询(只需打开开发人员控制台并转到网络选项卡)。在开发网站时,您应该假定所有请求都是由攻击者伪造的 - 因此您必须验证所有数据,并仔细转义每个字符串,将其拼接到SQL或其他代码中。 - Suzanne Soy
显示剩余6条评论
12个回答

183

我不确定是否有其他人直接回答了你的问题,这个问题是关于从浏览器的“查看源代码”命令中查看代码。

正如其他人所说,无法保护旨在在浏览器中运行的JavaScript免受决心强烈的查看者的攻击。如果浏览器可以运行它,那么任何决心的人也可以查看/运行它。

但是,如果将JavaScript放在与以下内容一起包含的外部JavaScript文件中:

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

标记,则通过“查看源代码”命令不会立即显示JavaScript代码-只会以这种方式显示脚本标记本身。这并不意味着某人不能加载该外部JavaScript文件来查看它,但您确实要求如何使其不出现在浏览器的“查看源代码”命令中,而这样做可以实现这一点。

如果您真的想让它更难被查看,您需要执行以下所有操作:

  1. 将其放入外部.js文件中。
  2. 混淆文件,以便大多数本机变量名称都被替换为短版本,因此删除所有不必要的空格,因此无法在没有进一步处理的情况下读取等等。
  3. 通过编程方式添加脚本标记(例如Google Analytics)动态包含.js文件。这将使从“查看源代码”命令中获取源代码变得更加困难,因为那里没有易于单击的链接。
  4. 将您想要保护的尽可能多的有趣逻辑放在您通过AJAX调用检索的服务器上,而不是进行本地处理。

话虽如此,我认为您应该专注于性能,可靠性和使您的应用程序出色。如果您必须绝对保护某些算法,请将其放在服务器上,但除此之外,要通过成为最擅长所做事的人而不是拥有秘密来竞争。这才是网络成功的最终方法。


3
直接回答问题的好方法。使用JavaScript来生成<script>标签可以更好地隐藏它(仍然可在实时DOM下看到)-也就是说,无法在源代码视图中“右键单击”它。一旦JavaScript被执行,可能可以删除该<script>元素,使获取原始代码稍微麻烦一些(但不是不可能)...当然,网络流量很容易在Firebug或类似工具中显示;-) - user166390
3
@Quentin - 你提供的view-source URL是无意义的,这不是问题或建议的重点。任何人都可以查看代码,我已经像其他人一样说过了。问题只在于有多容易查看,根据具体问题所问,当某人查看源代码时,它有多显而易见?我的建议是将其与查看源代码分离一个步骤,仅此而已,但这是一个有效的额外步骤。 - jfriend00
fetch("SCRIPT TO HIDE URL or DATAURL").then(function(t) { return t.text()||false; }).then(c=>selfatob("ZXZhbA")) - Zibri
我认为我们可以在HTML标签中添加oncontextmenu = 'return false;'。 - falero80s
1
@falero80s - 这尝试阻止右键菜单,但并不能阻止其他查看页面源代码的方式。 - jfriend00

37

不,这是不可能的。

如果您没有将它提供给浏览器,那么浏览器就没有它。

如果您提供了它(或一个易于跟踪的引用),那么它将成为源代码的一部分。


5
我不确定这个答案是否真正回答了提问的问题(尽管它在15分钟内得到了10个赞)。他们问如何防止代码出现在浏览器的查看源代码命令中。这是可能的。请参见我下面的答案。他们没有问如何防止代码被决心入侵的黑客查看。 - jfriend00
9
在HTML文档的"查看源代码"中点击链接就可以很容易地获取脚本的"查看源代码",这并不需要太多决心。 - Quentin
我认为问题没有被正确解释。创建JS文件是很常见的,用户想要的是(我认为)如何在任何人选择“查看页面源代码”选项时隐藏任何JS变量值。我给出+1。 - shaILU
这个回答没有任何意义,最好在这里提出建议。更好的选择是使用外部文件。 - Lalit Mohan

22

我的解决方案受到最后一条评论的启发。这是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!');});

由于是通过 JavaScript 创建的,在源代码中看不到 invisible.js,并且已被删除,因此在控制台中看不到它。

至于 invisible_debut.js,我对其进行了混淆处理,因此很难找到 invisible.js 的 URL。这并不完美,但对于普通黑客来说还是有足够大的难度。


4
奇怪的是,我按照步骤操作后,在资源中能够找到 invisible.js。Chrome 版本为 34.0.1847.131 m。 - Boyang
2
@Boyang,它只是没有出现在控制台中,但如果我们知道路径,仍然能够找到它。 - Panadol Chong
3
不仅如此,它还将始终出现在大多数DevTools的网络选项卡中。再次强调,每个自重的黑客都会有可用的DevTools。 - GoldBishop

15

使用HTML加密器,在Head标签的一部分

<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 注意:如果您的页面中有 JavaScript,请尝试将其导出到 .js 文件中,并使其与上面的示例相同。

此加密程序并不总是有效,可能会弄乱您的网站某些代码...选择要隐藏的最佳部分,例如在 <form> </form> 中。

高级用户可以翻转此操作,但不是所有像我一样的新手都知道如何做。

希望这可以帮助您。


3
您提供的链接无法打开,显示404错误代码。 - Akash Limbani
1
同样的方法也是黑客注入恶意代码到网站的方式。一些更高级的安全网络爬虫工具会寻找这样的代码并将其从页面源代码中清除。 - GoldBishop

11

'不可能的!'

哦,是可以的....

//------------------------------
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]);
    }
  }      
}

4
非常好的回答。它确实隐藏了JavaScript的使用,但是只有当您使用元素检查器/开发人员工具时,您才能通过查看源代码来看到它。(至少在Chrome上是这样) - Patrick Bard
这里的变量“head”是冗余的还是有一些重要的功能? - Master James
3
它只是部分隐藏了它...任何暴露的函数(全局)都可以通过开发者工具显示,并且它将出现为匿名函数,但开发者工具会告诉您所有细节,包括它被加载的位置。 - Zibri
这只是将其隐藏在源代码中...一个匿名函数也可以做到同样的效果: fetch("SCRIPT TO HIDE").then(function(t) { return t.text()||false; }).then(c=>selfatob("ZXZhbA")) - Zibri

10

我不确定是否有隐藏信息的方法。无论你如何混淆或隐藏在JavaScript中所做的任何事情,它最终仍然要求浏览器加载以便使用。现代浏览器都内置了Web调试/分析工具,使提取和查看脚本变得轻而易举(例如,在Chrome中只需按下 F12 )。

如果你担心暴露某种商业机密或算法,则唯一的选择是将该逻辑封装在Web服务调用中,并通过AJAX让你的页面调用该功能。


假设你担心泄露一个秘密。假设你将其放入PHP文件中,并通过Ajax调用它。那么任何人都可以调用该PHP文件并找到秘密。可能有一种使用PHP保护秘密的方法,我一直在努力寻找。生成一个随机数,并要求所有资产将其作为参数提供给PHP文件。我认为这个方法是有效的,但如果恶意用户使用开发者工具,则无法保证。 - David Spector

6

我认为我找到了一种方法来隐藏浏览器的查看源代码中的某些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>

你需要在html/php主体中加载一个文件,该文件由js.js文件中的jquery函数调用。
function loaddiv()
{$('#content').load('content.php');}

这里有一个技巧。

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

content.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 希望这可以帮到您。

2
这只提供了最基本的保护。很容易打开浏览器的开发工具,进入网络选项卡,查看所有下载的脚本,包括通过Ajax加载的脚本。 - JJJ

5
您可以使用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>")
});

2

不可能!

唯一的方法是混淆JavaScript或压缩你的JavaScript,这使得最终用户难以逆向工程。然而,逆向工程并非不可能。


1

我曾经使用的方法 -

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

将jsp文件授权给用户。 用户输入jsp文件的url。

情况1 -

  • Jsp文件将重定向用户到Servlet。
  • Servlet将执行嵌入在xxxxx.js文件中的核心脚本部分,并且
  • 使用Printwriter,它将向用户呈现响应。

  • 同时,Servlet将创建一个密钥文件。

  • 当servlet尝试在其中执行xxxx.js文件时,Filter
    将激活并检测密钥文件是否存在,因此删除密钥
    文件。

这样一个周期就结束了。

简而言之,关键文件将由服务器创建,并立即由过滤器删除。

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

情况2 -

  • 如果用户试图获取页面源代码并直接单击 xxxxxxx.js 文件,则过滤器将检测到关键文件不存在。
  • 这意味着请求并不是来自任何servlet。因此,它将阻止请求链。

与其创建文件,不如使用会话变量中的设置值。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接