浏览器同源策略

同源策略

same-origin policy

浏览器默认两个相同的源之间是可以相互访问资源和操作DOM的。两个不同的源之间若想要相互访问资源或者操作 DOM，那么会有一套基础的安全策略的制约，我们把这称为同源策略。

同源策略 即 对两个源之间的资源访问和DOM操作做出制约的一种安全策略

1. 为什么需要同源策略

• 略(后续补充)

2. 什么是同源

如果两个页面拥有相同的协议( Protocol )、端口( Port )和域名( Host ), 那么这两个页面就属于同一个源 ( Origin )

• P( Protocol )P( Port )H( Host ) 相同, Router和Query可不同
• 端口写法可以不同，如默认端口: HTTP:80/HTTPS:443
• 协议通常指 HTTP/HTTPS, 但FTP/TCP等协议是否有跨域问题？

3. 同源策略制约的内容

• DOM层面: 限制非同源站点之间的js脚本对DOM的读写操作
• 数据层面: 限制非同源站点对当前站点Cookie、IndexDB和LocalStorage数据
• 网络层面: 限制 XMLHttpRequest 不能访问跨域资源

注：

同源之间读写DOM和访问数据可以使用API window.opener

非同源之间的DOM读写或通讯可采用跨文档消息机制 window.postMessage

非同源之间的网络传输可使用跨域资源共享(CORS)实现

前端跨域

常用:

• 开发阶段使用nginx反向代理, 部署时同源
• CORS 请求头带Orgin 后端接口配置 Access-Control-Allow-Origin

其它:

• jsonp
• …(后续补充)