浏览器同源策略和解决办法

冷不防 2022-05-09 22:40 216阅读 0赞

摘自阮一峰老师的博客

[http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html][http_www.ruanyifeng.com_blog_2016_04_same-origin-policy.html]

[http://www.ruanyifeng.com/blog/2016/04/cors.html][http_www.ruanyifeng.com_blog_2016_04_cors.html]

同源策略：协议、域名、端口相同

若是非同源：Cookie、LocalStorage 和 IndexDB 无法读取； DOM 无法获得；AJAX 请求不能发送；

解决办法

*  document.domain：适用于Cookie 和 iframe 窗口在一级域名相同，只是二级域名不同的情况下
 *  在设置Cookie的时候，指定Cookie的所属域名为一级域名：Set-Cookie:domain='.xxx.xxx'
 *  片段标识符（URL的`#`号后面的部分）：父子窗口可以互相改变片段标识符，如果只是改变片段标识符，页面不会重新刷新。
 *  window.name：只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。
 *  跨文档通信 API（Cross-document messaging）：允许跨窗口通信，不论这两个窗口是否同源。

> postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为\*，表示不限制域名，向所有窗口发送。

*  JSONP

> 网页通过添加一个`<script>`元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。该请求的查询字符串必须有一个`callback`参数，用来指定回调函数的名字。

*  WebSocket

> 是一种通信协议，使用`ws://`（非加密）和`wss://`（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。
> 
> 存在一个字段是`Origin`，表示该请求的请求源（origin），即发自哪个域名。正是因为有了`Origin`这个字段，所以WebSocket才没有实行同源政策。因为服务器可以根据这个字段，判断是否许可本次通信。如果该域名在白名单内，服务器就会做出回应。

*  CORS（跨源资源分享）：相比JSONP只能发`GET`请求，CORS允许任何类型的请求。

> CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
> 
> 整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
> 
> 因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

[http_www.ruanyifeng.com_blog_2016_04_same-origin-policy.html]: http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
[http_www.ruanyifeng.com_blog_2016_04_cors.html]: http://www.ruanyifeng.com/blog/2016/04/cors.html