作者：garethheyes 翻译：Tianyi_Ting校核：myownghost

  原文：

  注* XSS攻击即Cross Site Scripting，通常在网页链接地址Url中注入JS代码来达到攻击手段，很多大厂都中过招，如：Twitter，新浪微博，示例代码：

  其实此代码并不能在所有浏览器上执行，但仅需要一部分浏览器(如IE6)可用，即可达到攻击效果。目前很多网站都有自动过滤XSS代码的功能，此文即介绍了一些如何屏蔽XSS过滤器的手段js替换字符串中的字符，其实我们可以发现，大多数在前端执行的XSS过滤都是不安全的，这对于我们在防范XSS攻击时有一定的借鉴意义。

  引言

  我喜欢以一种意想不到的方式使用JavaScript，写出一些看起来奇怪但其实很管用的代码，这些代码常常能够执行一些出人意料功能。这听起来似 乎有些微不足道，但是基于这点发现足以总结出一些非常有用的编程技巧。下面写到的每一个小技巧都可以屏蔽掉XSS过滤器，这也是我写这些代码的初衷。然 而，学习这样的JavaScript代码可以明显加强你对语言本身的掌握，帮助你更好地处理输入，并且提高Web应用程序的安全性。

  下面就看看这些令人惊异的JavaScript代码吧！

  正则表达式替换可执行代码

  当用到带有replace的正则表达式时，第二个参数支持函数赋值。在Opera中，可以利用这个参量执行代码。例如，下面这个代码片段：

  <pre style="margin-top: 1.2em;margin-bottom: 1.2em;padding: 0px;max-width: 100%;color: rgb(62, 62, 62);font-size: 1em;font-family: Consolas, Inconsolata, Courier, monospace;line-height: 1.2em;box-sizing: border-box !important;word-wrap: break-word !important;">'XSS'.replace(/XSS/g,[alert][2])</pre>

  这个执行的结果将会等价于：alert(‘XSS’); 产生这种现象的原因是正则表达式的匹配项被被当成一个参数，传递到了alert函数。一般情况下，在匹配文本上你会用一个函数调用另一段代码，像这样：

  <pre style="margin-top: 1.2em;margin-bottom: 1.2em;padding: 0px;max-width: 100%;color: rgb(62, 62, 62);font-size: 1em;font-family: Consolas, Inconsolata, Courier, monospace;line-height: 1.2em;box-sizing: border-box !important;word-wrap: break-word !important;">`'somestring'.replace(/some/,function($1){  
   //do something with some  
})`</pre>

  但是，正如在第一个例子中所看到的，我们执行了一个本地alert调用，而不是用户自定义函数，并且参数由正则表达式传递到了本地调用。这是个很酷的技巧，可以屏蔽掉一些XSS过滤器。例如，先写一个字符串，再跟一个“卯点”，接着就可以调用任何你想调用的函数啦。

  为 了看一看这个在XSS环境中是怎么使用的，想象一下：我们在字符串中有段未过滤的攻击代码，可能是JavaScript事件或者是script标 签，即这个字符串中出现了一个注入。首先，我们注入一个有效的函数alert(1)，接着我们突破这个引号的限制，最后再写我们的正则表达式。

  <pre style="margin-top: 1.2em;margin-bottom: 1.2em;padding: 0px;max-width: 100%;color: rgb(62, 62, 62);font-size: 1em;font-family: Consolas, Inconsolata, Courier, monospace;line-height: 1.2em;box-sizing: border-box !important;word-wrap: break-word !important;">.replace(/.+/,eval)//</pre>

  注意我在这里用了eval函数执行我想执行的任何代码，并且为了使攻击代码传递给eval，正则表达式必须匹配所有项。

  如果我把所有的代码放在一起，展示这个页的输出，这样的话就会更容易理解这个过程：

  页输出：

  <pre style="margin-top: 0px;margin-bottom: 0px;padding: 0px;max-width: 100%;color: rgb(62, 62, 62);font-size: 16px;box-sizing: border-box !important;word-wrap: break-word !important;"></pre>

  上面的代码在分析脚本中很常见，你上网搜索的所有字符串都被一些广告公司储存在这样的分析脚本中。你可能没有注意到这些脚本js替换字符串中的字符，但是如果 你观察一个 Web页面的源，你会发现这是经常出现的。另外，论坛也是一个经常会用到这些脚本的地方。“YOUR INPUT”是你所控制的字符串。如果输入没有被正确过滤时，这也将被称为基于DOM的XSS注入。(注：DOM，将 HTML 文档表达为树结构，通常指HTML结构)

  输入：

  <pre style="margin-top: 1.2em;margin-bottom: 1.2em;padding: 0px;max-width: 100%;color: rgb(62, 62, 62);font-size: 1em;font-family: Consolas, Inconsolata, Courier, monospace;line-height: 1.2em;box-sizing: border-box !important;word-wrap: break-word !important;">.alert(1)".replace(/.+/,eval)//</pre>

  输出结果：

  <pre style="margin-top: 1.2em;margin-bottom: 1.2em;padding: 0px;max-width: 100%;color: rgb(62, 62, 62);font-size: 1em;font-family: Consolas, Inconsolata, Courier, monospace;line-height: 1.2em;box-sizing: border-box !important;word-wrap: break-word !important;">somevariableUnfiltered="alert(1)".replace(/.+/,eval)//"</pre>

  注意这里"//"用于清除后面引用的单行注释。

  Unicode转义

  尽管在对Unicode字符转义时，用圆括号是不太可能的，但是我们可以对正在被调用的函数名进行转义。例如：

  <pre style="margin-top: 1.2em;margin-bottom: 1.2em;padding: 0px;max-width: 100%;color: rgb(62, 62, 62);font-size: 1em;font-family: Consolas, Inconsolata, Courier, monospace;line-height: 1.2em;box-sizing: border-box !important;word-wrap: break-word !important;">\u0061\u006c\u0065\u0072\u0074(1)</pre>

  这句代码调用了alert(1); u表明这是个转义字符，并且在u0061后面的十六进制数是“a”。

  另外，常规字符可以和转义字符混合或匹配使用，下面的例子就展示了这一点：

  <pre style="margin-top: 1.2em;margin-bottom: 1.2em;padding: 0px;max-width: 100%;color: rgb(62, 62, 62);font-size: 1em;font-family: Consolas, Inconsolata, Courier, monospace;line-height: 1.2em;box-sizing: border-box !important;word-wrap: break-word !important;">\u0061lert(1)</pre>

  你也可以将它们包含在字符串中，甚至用eval对它们求值。Unicode转义和常规的16进制或8进制转义有些不同，因为Unicode转义可以包含在一个字符串中，或者是引用函数、变量或对象中。

  下面的例子展示了如何使用被求值并且被分成两部分的Unicode转义。

  <pre style="margin-top: 1.2em;margin-bottom: 1.2em;padding: 0px;max-width: 100%;color: rgb(62, 62, 62);font-size: 1em;font-family: Consolas, Inconsolata, Courier, monospace;line-height: 1.2em;box-sizing: border-box !important;word-wrap: break-word !important;">eval('\\u'+'0061'+'lert(1)')</pre>

  通 过避免像命名为alert这样的常规函数，我们就可以愚弄XSS过滤器注入我们的代码。这个例子就是用来绕过PHPIDS（一个开源的IDS系 统），最终导致规则变得更健壮。如果为了分析可能运行的恶意代码，你需要在解码JavaScript时，需要考虑过滤尽可能多的编码方法。就像在这个例子 中 看到的，这不是个容易的工

  JavaScript解析器引擎

  JavaScript是一个非常动态的语言。可以执行很大量的代码。这些代码第一眼看起来似乎不能执行，然而一旦理解了解析器工作的原理，你就能够逐渐理解它背后的逻辑。

  JavaScript在函数执行之前是不知道函数结果的，并且很明显它必须通过调用函数返回变量的类型。这点很有趣，举个例子：如果返回函数不能返回代码块的一个有效值，就会在函数执行之后出现语法错误。

  说的到底是什么意思呢？好吧！代码总比空谈更有说服力，看下面的例子：

  <pre style="margin-top: 1.2em;margin-bottom: 1.2em;padding: 0px;max-width: 100%;color: rgb(62, 62, 62);font-size: 1em;font-family: Consolas, Inconsolata, Courier, monospace;line-height: 1.2em;box-sizing: border-box !important;word-wrap: break-word !important;">+alert(1)--</pre>

  alert函数执行后，返回一个未定义的量，然而已经有些太晚了，语法错误立刻就会出现，这是因为自减操作符的操作数应该是一个数字。

  下面是一些不会产生错误的例子：

  <pre style="margin-top: 1.2em;margin-bottom: 1.2em;padding: 0px;max-width: 100%;color: rgb(62, 62, 62);font-size: 1em;font-family: Consolas, Inconsolata, Courier, monospace;line-height: 1.2em;box-sizing: border-box !important;word-wrap: break-word !important;">`+alert(1)  
1/alert(1)  
alert(1)>>>/abc/`</pre>

  你 可能认为上面的例子没有什么意义，但是实际上它们深刻体现了JavaScript的工作过程。一旦你理解了这些细节，JavaScript这个大 家伙就变得清晰，了解代码的执行方式可以帮助你理解解析器是怎么工作的。我觉得这类例子在追踪语法错误，检测基于DOM的XSS攻击和检测XSS过滤器的 时候很有用。

  Throw，Delete还有什么？

  你可以用想不到的方式进行删除操作，这会产生一些很古怪的语法。让我们看看将throw, delete, not和typeof操作符组合在一起会发生什么？

  <pre style="margin-top: 1.2em;margin-bottom: 1.2em;padding: 0px;max-width: 100%;color: rgb(62, 62, 62);font-size: 1em;font-family: Consolas, Inconsolata, Courier, monospace;line-height: 1.2em;box-sizing: border-box !important;word-wrap: break-word !important;">throw delete~typeof~alert(1)</pre>

  你可能认为这句代码不能运行，但是使用函数调用delete却是可以的，仍旧能够执行：

  <pre style="margin-top: 1.2em;margin-bottom: 1.2em;padding: 0px;max-width: 100%;color: rgb(62, 62, 62);font-size: 1em;font-family: Consolas, Inconsolata, Courier, monospace;line-height: 1.2em;box-sizing: border-box !important;word-wrap: break-word !important;">delete alert(1)</pre>

  这儿有一些更多的例子：

  <pre style="margin-top: 1.2em;margin-bottom: 1.2em;padding: 0px;max-width: 100%;color: rgb(62, 62, 62);font-size: 1em;font-family: Consolas, Inconsolata, Courier, monospace;line-height: 1.2em;box-sizing: border-box !important;word-wrap: break-word !important;">`delete~[a=alert]/delete a(1)  
delete [a=alert],delete a(1)`</pre>

  第 一眼看过去，你会认为这样的代码有语法错误，但是当你仔细分析后，你觉得会有几分道理。解析器先发现一个数组内部的变量赋值，执行赋值操作后删除 数组。同样地，删除操作是在一个函数（注* [a=alert]）调用之后，因为删除操作需要在知道函数执行结果的情况下，才能删除返回的对象，即使返回的是NULL。

  同时，这些代码可以用来屏蔽XSS过滤器，因为它们经常会尝试着匹配有效的语法，不希望代码太晦涩。当你的应用程序进行数据验证的时候，你应该考虑这样的例子。