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

Question

So I've been working recently on a script to obfuscate client-side code for protecting intellectual property without interfering with the appearance or interactivity of the resulting page.所以我最近一直在编写一个脚本来混淆客户端代码以保护知识产权而不干扰结果页面的外观或交互性。 The process is as follows:过程如下：

HTTP request comes in, .htaccess redirects (.*) to parse_request.php HTTP 请求进来，.htaccess 重定向 (.*) 到 parse_request.php
parse_request.php creates a "phpURLParser" class whose class variables are essentially copies of the $_SERVER variables parse_request.php 创建一个“phpURLParser”类，它的类变量本质上是 $_SERVER 变量的副本
phpURLParser looks at the requested path, and sometimes the host, referer, or other server-side information to determine how to react. phpURLParser 会查看请求的路径，有时还会查看主机、引用者或其他服务器端信息，以确定如何做出反应。 There are several possible responses有几种可能的反应

a. a. The requested object was a .js or .css file.请求的对象是 .js 或 .css 文件。 Pass the file to the YUI Compressor and send the output将文件传递给 YUI 压缩器并发送输出

b.湾The requested object is an image or application.请求的对象是图像或应用程序。 Pass the file with no change不做任何更改地传递文件

c. C. The requested object contains HTML.请求的对象包含 HTML。 Replace every ASCII character with its 2-digit hexadecimal equivalent and send the following javascript:将每个 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>

So the website is replaced by a lot of hex and a small javascript to return the hex to its original form.因此，该网站被大量十六进制和一个小的 javascript 替换，以将十六进制恢复为原始形式。 I have an example of this setup at examples.chikachu.com/colorbox/example1 (I didn't code ColorBox, it's a free jQuery tool that I chose to use since it allowed me to test several different javascript features and make sure they all worked)我在 examples.chikachu.com/colorbox/example1 上有一个关于此设置的示例（我没有编写 ColorBox，它是我选择使用的免费 jQuery 工具，因为它允许我测试几个不同的 javascript 功能并确保它们全部工作）

Now for the problem:现在的问题：

As it turns out, this works 99% of the time.事实证明，这在 99% 的情况下都有效。 But AJAX makes it angry.但是 AJAX 让它生气了。 Clicking one of the AJAX examples (under "Other Content Types") will look like it redirects you to a new page.单击 AJAX 示例之一（在“其他内容类型”下）看起来会将您重定向到一个新页面。 Looking in the address bar or viewing the page source will prove that you're still on the same page, however.但是，查看地址栏或查看页面源将证明您仍在同一页面上。 Using the Inspect Element tool in Chrome (or Firebug in Firefox) will reveal that the contents of the webpage were entirely replaced by the contents of the AJAX request.使用 Chrome 中的 Inspect Element 工具（或 Firefox 中的 Firebug）将显示网页内容完全被 AJAX 请求的内容替换。

If I modify parse_request.php slightly to allow the file requested by the AJAX to be passed through unharmed, everything works.如果我稍微修改 parse_request.php 以允许 AJAX 请求的文件完好无损地通过，一切正常。 No problem.没问题。 So for some reason my script which replaces the string of hex with its meaningful HTML counterpart is overwriting the entire website instead of nicely inserting itself within the confines of a <div> object.因此，出于某种原因，我用有意义的 HTML 对应物替换十六进制字符串的脚本覆盖了整个网站，而不是很好地将自己插入到 <div> 对象的范围内。

Essentially here's the expected non-obfuscated HTML:基本上这里是预期的非混淆 HTML：

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

With only the AJAX obfuscated, I expect the following:仅混淆了 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>

I expect that the document.write() line here will write y at the location of the javascript (within the <div>).我希望这里的 document.write() 行会在 javascript 的位置（在 <div> 内）写入 y。 If I'm mistaken and that's not how document.write() works, I still expect it to write y at the end of the document.如果我弄错了并且这不是 document.write() 的工作方式，我仍然希望它在文档的末尾写 y。 Instead, the entire document is replaced by y.相反，整个文档被 y 替换。 Why is this, and what's my solution?这是为什么，我的解决方案是什么？

Answer 1

Answer to your last question: Calling回答你的最后一个问题：打电话

document.write('my_precious_html_code'); document.write('my_precious_html_code');

will append or override text on page depending when it was called (before or after onLoad event).将根据调用时间（在 onLoad 事件之前或之后）附加或覆盖页面上的文本。 You shouldn't use it any script.你不应该使用它任何脚本。 Read more about it here: http://javascript.crockford.com/script.html在此处阅读更多相关信息： http : //javascript.crockford.com/script.html

General answer: Obfuscating HTML code doesn't make any sense.一般答案：混淆 HTML 代码没有任何意义。 Just like protecting images by disabling right mouse button in late '90.就像在 90 年代末通过禁用鼠标右键来保护图像一样。 It took me less then 3 sec to "crack" your obfuscated code and get beautifully formatted HTML.我花了不到 3 秒的时间来“破解”您的混淆代码并获得格式精美的 HTML。 Also your site is rendered in quirks mode which is probably something you don't want.此外，您的网站以quirks 模式呈现，这可能是您不想要的。

Answer 2

Try something like this:尝试这样的事情：

<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>

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

问题描述

2 个解决方案

解决方案1
1 2010-09-28 17:39:49

解决方案2
0 已采纳 2010-09-28 18:43:47

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

问题描述

2 个解决方案

解决方案1 1 2010-09-28 17:39:49

解决方案2 0 已采纳 2010-09-28 18:43:47

解决方案1
1 2010-09-28 17:39:49

解决方案2
0 已采纳 2010-09-28 18:43:47