17-56028048_p0.png

0x01 何为同源策略

如果两个页面同协议、同域名(host)、同端口，那么就可以认为这两个页面同源。

#	URL	是否同源	备注
0	http://image.baidu.com	base
1	http://image.baidu.com/search/index.html	Y
2	https://image.baidu.com	N	协议不同
3	http://image.baidu.com:8080	N	端口不同
4	http://eclick.baidu.com	N	host不同

在页面中用 about:blank 或 javascript: URL执行的脚本会继承打开该 URL 的文档的源，因为这些类型的 URLs 没有明确包含有关原始服务器的信息。

这种策略的作用：限制了不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。如果恶意脚本请求了一个非同源的东西，那么这种行为会因为同源策略而被浏览器限制

0x02 跨域访问

网站为了追求访问速度通常将一些静态文件(css、js、图片)放在 CDN 上，那么 CDN 与网站肯定不同域，可为什么又能请求成功呢？

在使用XMLHttpRequest 或标签时又会受到同源策略的约束而失败，那到底在什么情况下会触发同源策略呢？

页面跨域总的来说就分为三类：

允许跨域写操作（Cross-origin writes）

允许跨域资源嵌入（Cross-origin embedding）

不允许跨域读操作（Cross-origin reads）

允许跨域写操作就的例如链接（links），重定向以及表单提交；允许跨域资源嵌入那么到底允许那些资源可以嵌入呢？一般就是以下几类：

标签嵌入跨域脚本。语法错误信息只能在同源脚本中捕捉到。

标签嵌入CSS。由于CSS的松散的语法规则，CSS的跨域需要一个设置正确的Content-Type 消息头

嵌入图片

和嵌入多媒体资源