关于同源策略

同源策略

同源策略是一种约定,是由Netscape提出的著名安全策略。他是浏览器最核心、最基本的安全功能。
同源的定义
【关于同源策略】如果两个页面的协议、端口、主机都相同,则两个页面具有相同的源。
下面做一些说明:
  1. https://zz.zzs7.top/mysql-optimization.html
  2. http://zz.zzs7.top/mysql-optimization.html
  3. https://zz.zzs7.top:8000/mysql-optimization.html
  4. https://s7.zzs7.top/mysql-optimization.html
  5. https://104.125.11.39/mysql-optimization.html
上面的链接中:
  • 1和2比较:不是同源,因为1用的https,2用的是http。属于协议不同。
  • 1和3比较:不是同源,1未指定端口的时候,默认使用的是80,而3使用的是8000端口,属于端口不同。
  • 1和4比较:不是同源,域名不同。
  • 1和5比较:虽然1部署在了该ip地址对应的服务器,但是依然不是同源。
在不同源的情况下1站点里面的js脚本采用ajax读取其他三个站点中的数据是会报错的。
注:IE浏览器未将不同端口加入同源策略的组成部分。
跨域
受同源策略的影响,不是 同源下的脚本不能操作其他源下面的对象。想要操作其他源下的对象就需要跨域。
为什么要跨域 比如某视频网站由于数据太多,分布在了不同的服务器上,所以需要突破同源策略,实现数据交互。
跨域的实现 有以下几种实现方式:
  • 降域(document.domain):同源策略认为域和子域属于不同的域。
    比如https://zz.zzs7.top和https://s7.zzs7.top。虽然都属于zzs7.top域名的子域名,但是他们属于不同域。
    想让上述两个网页之间通信,可以通过设置 document.damain='zzs7.top',来让浏览器认为他们在同样的域。两个页面都需设置。

注:可以进行降域,不能升域。
  • 通过jsonp跨域:不同源虽然不能读写,但可以引用js。我们可以让引用的js附带数据来调用我们预先定义的函数,而数据当作参数传入。

  • CORS:跨域资源共享:一个W3C标准,它允许浏览器向跨源服务器发起XMLHttpRequest请求,和ajax同源的使用方法一致(区别在于对于跨域请求浏览器的请求会有附加的相关设置,用户看不到),分简单请求和非简单请求。
  • 通过 location.hash:a欲与b跨域相互通信,通过中间页c来实现。 三个页面,不同域之间利用iframe的location.hash传值,相同域之间直接js访问来通信。
  • window.name:window.name属性的独特之处:name值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。
  • postMessage跨域:postMessage是HTML5 XMLHttpRequest Level 2中的API,且是为数不多可以跨域操作的window属性之一,它可用于解决以下方面的问题:
    • 页面和其打开的新窗口的数据传递
    • 多窗口之间消息传递
    • 页面与嵌套的iframe消息传递
    • 上面三个场景的跨域数据传递
    用法:postMessage(data,origin)方法接受两个参数
    data: html5规范支持任意基本类型或可复制的对象,但部分浏览器只支持字符串,所以传参时最好用JSON.stringify()序列化。
    origin: 协议+主机+端口号,也可以设置为"*",表示可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。
还有一些比的,比如可以通过nginx代理实现跨域等,就不在文章中细说了,后续有机会详细实践一下每种方式。

    推荐阅读