浏览器同源策略深入

Posted 2020-08-24 天下无双之盛世奇观

浏览器对于同源的认定是：协议、域名、端口号必须精确匹配，一模一样

 

个人总结同源策略的一个首要宗旨是：

阻止能向外传输信息的模块（如javascript）获取到来自不同源的资源，不能获取也就从源头阻止了资源和其中信息的泄露。

很重要的一点是，同源策略阻止的是跨域资源的获取，而不是阻止跨域的请求，请求可以正常发出，但返回的内容被阻止，无法让JS脚本获取

 

例子：

1、<script>、<img>、<iframe>、<link>等标签都能跨域加载内容，但无法对外发送加载到的内容，换言之，js获取不到上述标签加载回来的内容

2、ajax可以请求不同源的内容，但同源策略阻止返回的内容向js的流通，即你可以在network里看到请求的返回值，但在js中获取不到返回值

 

同源策略下合理的跨域方案：

对于多页面通讯：

1、设置document.domain+iframe
2、window.name
3、window.postMessage，window.localstorage(window.postMessage是h5的技术，解决两个页面间的数据分享，在体验平台与sandbox之间采用了这种技术，两个应用属于跨域，sandbox需要获取体验平台传递过来的账号密码，通过这种方式获取)

对于跨域资源获取
4、跨域资源共享CORS(Cross-Origin Resource Sharing)
5、JSONP
6、WebSockets

 

总结是这些方法都是A去访问B, B页面主动开放访问权限，或者B服务器自己根据请求信息判断是否对A请求开放并配合A返回合适的响应，于是A可以跨域获取资源。
nginx后台代理的方式对前端来说并没有跨域，所以就没有归结到上面的跨域方法中。