HTML与JavaScript自动解码

HTML编码字符分为两种表达形式:

  • &#xx;,xx为十进制数值
  • 实体编码,比如>等字符

这些字符在不同的上下文中具有不同的表现形式。

在HTML上下文中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
function HtmlEncode(s) {
return String(s)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;');
}
</script>

<!-- 样例1-->
<input type="button" value="exec1" onclick="document.write('<img src=@ onerror=alert(123) />')" />
<!-- 样例2-->
<input type="button" value="exec2" onclick="document.write('&lt;img src=@ onerror=alert(123) /&gt;')" />
<!-- 样例3-->
<input type="button" value="exec3" onclick="document.write(HtmlEncode(('<img src=@ onerror=alert(123) />'))" />

这种上下文中,HTML编码字符会自动解码!上述样例1、样例2的执行结果是一样的。

要想避免自动解码问题,可以使用类似样例3的方法。

在JavaScript上下文中

通常是指位于script标签之间或者外链js中的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<input type="button" id="exec_btn1" value="exec4" />
<input type="button" id="exec_btn2" value="exec5" />
<script type="text/javascript">
function g(id) {
return document.getElementById(id);
}
// 样例4
g('exec_btn1').onclick = function(e) {
document.write('<img src=@ onerror="alert(123)" />');
}
// 样例5
g('exec_btn2').onclick = function(e) {
document.write('&lt; img src=@ onerror="alert(123)" /&gt;');
}
// ps: chrome、safari下不能document.write('&gt;') ???
</script>

这种上下文中,HTML编码字符不会自动解码。