AJAX 返回要解析的 javascript 会导致页面内容丢失答案

【问题标题】：AJAX returning a javascript to be parsed results in loss of page contentsAJAX 返回要解析的 javascript 会导致页面内容丢失
【发布时间】：2011-04-18 02:10:03
【问题描述】：

因此，我最近一直在编写一个脚本来混淆客户端代码以保护知识产权，而不会干扰结果页面的外观或交互性。流程如下：

HTTP 请求进来，.htaccess 重定向 (.*) 到 parse_request.php
parse_request.php 创建一个“phpURLParser”类，其类变量本质上是 $_SERVER 变量的副本
phpURLParser 查看请求的路径，有时还会查看主机、引用者或其他服务器端信息，以确定如何做出反应。有几种可能的反应

一个。请求的对象是 .js 或 .css 文件。将文件传递给 YUI Compressor 并发送输出

b.请求的对象是图像或应用程序。原封不动地传递文件

c。请求的对象包含 HTML。将每个 ASCII 字符替换为其等效的 2 位十六进制字符并发送以下 javascript：

<script type="text/javascript">
var x="~lots of hex~";
var y="";
for(i=0; i<x.length; i+=2){
    y += unescape('%'+x.substr(i,2));
}
document.write(y);
</script>

所以网站被大量的十六进制和一个小的 javascript 所取代，以将十六进制返回到其原始形式。我在examples.chikachu.com/colorbox/example1上有一个这个设置的例子（我没有编码ColorBox，它是我选择使用的一个免费的jQuery工具，因为它允许我测试几个不同的javascript特性并确保它们都工作）

现在解决问题：

事实证明，这在 99% 的情况下都有效。但是 AJAX 让它生气了。单击其中一个 AJAX 示例（在“其他内容类型”下）看起来会将您重定向到新页面。但是，查看地址栏或查看页面源代码将证明您仍在同一页面上。使用 Chrome 中的 Inspect Element 工具（或 Firefox 中的 Firebug）会发现网页的内容完全被 AJAX 请求的内容所取代。

如果我稍微修改 parse_request.php 以允许 AJAX 请求的文件不受损害地通过，一切正常。没问题。因此，出于某种原因，我的脚本将十六进制字符串替换为其有意义的 HTML 对应内容覆盖了整个网站，而不是很好地将自身插入到

对象的范围内。

基本上这是预期的非混淆 HTML：

<html>
<head>
    ...
</head>
<body>
    <div id="colorbox">
        <INSERT AJAX HERE>
    </div>
    ...
</body>
</html>

仅对 AJAX 进行了混淆，我预计会出现以下情况：

<html>
<head>
    ...
</head>
<body>
    <div id="colorbox">
        <script type="text/javascript">
        var x="asdfasdfasdfasdf";
        var y="";
        for(i=0; i<x.length; i+=2){
            y += unescape('%'+x.substr(i,2));
        }
        document.write(y);
        </script>
    </div>
    ...
</body>
</html>

我希望此处的 document.write() 行将在 javascript 的位置（在

内）写入 y。如果我弄错了，那不是 document.write() 的工作方式，我仍然希望它在文档末尾写 y 。而是将整个文档替换为 y。为什么会这样，我的解决方案是什么？

【问题讨论】：

建立数据库连接时出错
我认为document.write() 是在某个时间点写入的，它是事件驱动的，并且它的输出根据页面加载是不规则的。它可能会破坏您的整个页面，您应该考虑使用innerHTML 或textNode 插入临时文本。但是，如果你想执行，我猜你需要 document.write，因为 innerHTML 不允许这种情况发生，至少对于外部脚本是这样。
您还应该重新调整计数器变量的范围并将字符串for(i=0;i<x.length; 的长度缓存到for(var i=0,n=x.length; i<n;
更好的是负反向 for/while 循环，使用位移除以 2：for(var i=(x.length>>1);i--;){ y+=...}
@steven_desu：在我将此作为一个不活跃的问题挥手之前的最后一条评论，您是否尝试使用innerHTML 而不是document.write？看起来你不是在加载外部 JS，所以在这种情况下应该没问题；可能是它在处理它的脚本中调用<script> 标记。

标签： javascript html ajax obfuscation deobfuscation

【解决方案1】：

回答你最后一个问题：调用

document.write('my_precious_html_code');

将在页面上附加或覆盖文本，具体取决于调用它的时间（在 onLoad 事件之前或之后）。你不应该使用它任何脚本。在此处阅读更多信息：http://javascript.crockford.com/script.html

一般答案：混淆 HTML 代码没有任何意义。就像在 90 年代后期通过禁用鼠标右键来保护图像一样。我花了不到 3 秒的时间来“破解”你的混淆代码并获得格式精美的 HTML。此外，您的网站以 怪癖模式 呈现，这可能是您不想要的。

【讨论】：

我认为它很容易破解。哎呀——只需使用 Chrome 中的 Inspect Element 功能就可以为您破解它（Chrome 将输出当前的 HTML，发布 javascript 修改）。我只是觉得这会很烦人，足以阻止人们。不过，好点子就像禁用右键单击一样。我想，很不值钱。如果不出意外，这是一个有趣的项目，可以在统计 class=) 期间分散我的注意力

【解决方案2】：

试试这样的：

<html> 
<head> 
    ... 
</head> 
<body> 
    <div id="colorbox">
        <div id="MYAJAXCONTENT">
        </div>
        <INSERT AJAX HERE> 
    </div> 
    ... 
</body> 
</html>

<html> 
<head> 
    ... 
</head> 
<body> 
    <div id="colorbox"> 
        <script type="text/javascript"> 
        var x="asdfasdfasdfasdf"; 
        var y=""; 
        for(i=0; i<x.length; i+=2){ 
            y += unescape('%'+x.substr(i,2)); 
        } 
        document.getElementById('MYAJAXCONTENT').innerHTML = y; 
        // for the jQuery psychos out there
        // $('#MYAJAXCONTENT').html(y);
        </script> 
    </div> 
    ... 
</body> 
</html>

【讨论】：

唯一的问题 - 该代码旨在隐蔽地混淆任何代码。这假设我在页面中预先放置了一个元素。但是，我一直在研究类似的解决方案，给脚本本身一个 id（由 parse-request.php 生成），然后让脚本自己定位获取 getElementById 并调用它的 parentNode。
@steven_desu - 你已经有了一个有 id 的元素。您可以轻松地使用 javascript 动态添加其他元素并将新脚本注入其中。