在 HTML 內嵌 JSON object 時要注意的事情…

标签: Computer Murmuring Network Programming Security | 发表时间:2014-01-06 08:23 | 作者:Gea-Suan Lin
出处:http://blog.gslin.org

有時候我們會因為效能問題,在 HTML 內嵌入 JSON object,而不是再多一個 HTTP request 取得。

但「嵌入」的行為如果沒有處理好,就產生非常多 XSS attack vector 可以玩。

首先最常犯的錯誤是使用錯誤的 escape function:

<!DOCTYPE HTML>
<html>
<body>
<script>
var a = "<?= addslashes($str) ?>";
</script>
</body>
</html>

這樣可以用 </script><script>alert(1);// 攻擊 $str。因為 addslashes() 並不會過濾到這個字串,而產生這樣的 HTML:

<!DOCTYPE HTML>
<html>
<body>
<script>
var a = "</script><script>alert(1);//";
</script>
</body>
</html>

而這個字串會造成 DOM parser 解讀上產生不是我們預期的行為:

可以看到在字串裡面的 </script> 被拆開了。

這是因為瀏覽器會先拆解產生 DOM tree,再把 <script></script> 內的程式碼交給 JavaScript engine 處理。所以在一開始產生 DOM tree 的時候,是看不懂 JavaScript 程式邏輯的…

正確的方法是用 json_encode() 處理,因為 PHPjson_encode() 預設會把 / (slash) 變成 \/ (這是 JSON spec 裡合法的轉換):

<!DOCTYPE HTML>
<html>
<body>
<script>
var a = <?= json_encode($str) ?>;
</script>
</body>
</html>

這會產生出:

<!DOCTYPE HTML>
<html>
<body>
<script>
var a = "<\/script><script>alert(1);//";
</script>
</body>
</html>

但上面這段 HTML 與 PHP code 仍然有問題,如果 $str<!--<script 時,你會發現 DOM 又爛掉了:

<!DOCTYPE HTML>
<html>
<body>
<script>
var a = "<!--<script>";
</script>
</body>
</html>

escape.alf.nu 的 Level 15 就是利用這個問題,再加上其他的漏洞而完成 XSS 攻擊。

為了這個問題去 StackOverflow 上問:「 Why does <!–<script> cause a DOM tree break on the browser?」,才又發現上面這段 code 並不是合法的 HTML5 (先不管 head & title 的部份,補上後仍然不是合法的 HTML5)。

原因在於 DOM parser 對 <script></script> 的特殊處理:「 4.3.1.2 Restrictions for contents of script elements」。(話說這段 ABNF 差點讓我翻桌…)

解法是在 <script></script> 的開頭與結尾加上 HTML 註解:(這剛好是 HTML 4.01 建議的方法)

<!DOCTYPE HTML>
<html>
<body>
<script>
<!--
var a = "<!--<script>";
-->
</script>
</body>
</html>

那段 ABNF 的目的是希望可以盡可能往後找到 --></script> 結尾的地方。

當然你也可以用 json_encode()JSON_HEX_TAG<> 硬轉成 \u003c\u003e 避開這個問題,但這使得呼叫 json_encode() 時要多一個參數 (而非預設參數),用起來比較卡…

這個問題會變得這麼討厭,是因為 DOM parser 與 JavaScript 語法之間有各自的處理方式,然後又有些 pattern 是之前的 spec 遺留下來的包袱 (像是 HTML 4.01 在「 18.3.2 Hiding script data from user agents」裡有提到用 <!----> 包裝 <script></script>),變成在設計 HTML5 時都要考慮進去相容…

之前會習慣用 <!--//--> 包裝 <script></script> 倒不是這個原因,而是因為不這樣做的話, jQuery 在 IE 使用 html() 時遇到有 <script></script> 的字串會爛掉,所以後來寫的時候變成習慣了…

反而因為這個習慣而避開了這個問題…

超難搞啊…

Related Posts:

相关 [html json object] 推荐:

在 HTML 內嵌 JSON object 時要注意的事情…

- - Gea-Suan Lin's BLOG
有時候我們會因為效能問題,在 HTML 內嵌入 JSON object,而不是再多一個 HTTP request 取得. 但「嵌入」的行為如果沒有處理好,就產生非常多 XSS attack vector 可以玩. 首先最常犯的錯誤是使用錯誤的 escape function:. 這樣可以用 </script><script>alert(1);// 攻擊 $str.

基于HTML模板和JSON数据的JavaScript交互

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2649. 一、小妹妹不要怕,哥哥很温柔的. 写文章之前,我总要去网上搜索相关资料,避免内容重复,顺便学习. 同样的,在这个风和日丽,阳光明媚的周三上午,我兴致勃勃地打开百度,搜索:“JS 模板 数据”,然后…….

Object-C编码规范

- - 编程语言 - ITeye博客
▪ 如:NSString *varName;. ▪ 只允许使用空格,将编辑器设置为1个TAB = 2个字符缩进. ▪ 每行最多不得超过100个字符. ▪ 以15寸Macbook Pro的大小,每行100个字符时能最大化地同时容下编辑器和iPhone模拟器. ▪ Google的80字符的标准有点少,这导致过于频繁的换行(Objectve-C的代码一般都很长).

【Json扫盲篇】

- $n0wd0wn - 博客园-首页原创精华区
Json是数据交换的一种格式,与XML类似,但也有不同. 由于Json的轻便性,跨平台性和易于阅读,项目中经常用到. 所以说:Json是一种轻量级的数据交换格式. Json最简单的表现形式就键值对(key/value pairs),比如:. Json数组可以用来表示一个键key对应多个值value的情况,把这个value用{}包起来.

json简介

- - ITeye博客
    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于阅读和编写,同时也易于机器解析和生成. 它基于ECMA262语言规范(1999-12第三版)中JavaScript编程语言的一个子集. JSON采用与编程语言无关的文本格式,但是也使用了类C语言(包括C, C++, C#, Java, JavaScript, Perl, Python等)的习惯,这些特性使JSON成为理想的数据交换格式.

JSON与XML

- - CSDN博客推荐文章
   目前,在web开发领域,主要的数据交换格式有XML和JSON,对于XML相信大家都很熟悉. XML不仅能处理数字和文字等经典的数据,还可以管理文件,格式化,图像,音频,视频,以及更多.  JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成. 如今,我们经常会面临创建数据文件时,JSON和XML之间的选择.

Android——JSON使用

- - CSDN博客推荐文章
        JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.  Name:Value  格式:. 一个object可以由一个或多个无序的这种组合 组成:. 2.有序的(array):. array 是 值(value) 的有序集合,格式:. array的值(alue) 可以是是双引号括起来的字符串(string)、数值(number)、 true、 false、  null、 对象(object)或者 数组(array).

XML和JSON

- - 四火的唠叨
不久前看到一个讨论帖,说的是XML和JSON的比较,说着说着后来就变成了JSON到底比XML牛逼在哪里. 不吹不黑,客观地来比较一下二者的异同. 有的情况下是的,但也不一定,比较这样的片段:. 二者信息量几乎均等,XML看起来并不显得多么冗余. 有恰当的编辑器,二者都可以有比较美观的缩进表达. 当然,也有很多情况我们可以看到XML要比JSON啰嗦(有人说JSON是fat-free alternative to XML),比如XML写这样的东西:.

让Json更懂中文(JSON_UNESCAPED_UNICODE)

- Taozi - 风雪之隅
作者: Laruence(. 本文地址: http://www.laruence.com/2011/10/10/2239.html. 我们知道, 用PHP的json_encode来处理中文的时候, 中文都会被编码, 变成不可读的, 类似”\u***”的格式, 还会在一定程度上增加传输的数据量. <?php echo json_encode("中文"); //"\u4e2d\u6587".

JSON 美化输出

- suchasplus - smallfish blog feed
经常会碰到一些返回 JSON 格式的应用,默认都是一大坨字一起显示,完全是虐待自己的眼睛. 顺手 Google 了下,发现了两种浏览方式:命令行查看和浏览器查看. 一、浏览器查看方式,需要安装 Chrome 插件:JSONView. 二、命令行查看,需要安装 Python.