快速了解JavaScript的跨域

浏览器有一个重要的安全策略,就是 同源策略,它用于限制不同源之间资源的交互。能够帮助阻挡一些恶意的访问,减少可能被攻击的媒介。

下面看一下与该 URL http://chat.example.com/u1/arts1/101011.html 的源进行对比的示例。

URL 结果 原因
http://chat.example.com/u2/arts1/101012.html 同源 路径不同
http://chat.example.com/u1/arts2/101013.html 同源 路径不同
https://chat.example.com/u2/arts2/101014.html 失败 协议不同
http://chat.example.com:88/u1/arts1/101015.html 失败 端口不同(http:// 默认80端口)
http://news.example.com/u3/arts4/101017.html 失败 主机不同

因此,默认情况下使用 XMLHttpRequest 进行 Ajax 通信,不能访问除它自己以外的域、协议和端口。但浏览器也需要有合法跨源访问的能力。

图片探测

图片探测是利用 标签实现跨域通信的最早的一种技术。任何页面都可以跨域加载图片而不必担心限制,因此这也是在线广告跟踪的主要方式。可以动态创建图片,然后通过它们的 onloadonerror 事件处理程序得知何时收到响应。

这种动态创建图片的技术经常用于图片探测(image pings)。图片探测是与服务器之间简单、跨域、单向的通信。数据通过查询字符串发送,响应可以随时设置,不过一般是位图图片或值为 204 的状态码。浏览器通过图片探测拿不到任何数据,但可以通过监听 onloadonerror 事件知道什么时候能接收到响应。下面看一个例子:

let img = new Image();
img.onload = img.onerror = function() {
    console.log("已完成!");
};
img.src = "http://www.example.com/test?name=Manoa";

这个例子创建了一个新的 Image 实例,然后给 onloadonerror 事件添加同一个函数。这样可确保请求完成时,无论成否都会收到通知。设置完 src 属性之后请求就会开始,这个例子向服务器发送了一个 name 值。

图片探测频繁用于跟踪用户在页面上的点击操作或动态显示广告。当然,图片探测的缺点是只能发送 GET 请求和无法获取服务器响应的内容。这也是只能利用探测实现浏览器与服务器单向通信的原因。

JSONP

JSONP(JSON with padding)是 JSON 的一种变体。用于解决浏览器的跨域问题。需要动态创建