什么是“同源策略”

为什么会有同源策略

• 保证浏览器使用过程中的用户信息安全
• 服务器只能拿到自己下发的状态数据，不能拿到其他服务器下发的状态数据（例如访问微博时，不会把从银行网页处取得的cookie带上）

基本内容

• 同源指的是：协议相同 + 域名相同 + 端口相同

• 如果不“同源”，如下三种行为都会收到限制

  • Cookie、LocalStorage 和 IndexDB 无法读取（数据层面限制）

    • 这是同源策略最初的定义，后续的限制都是在发展中逐渐扩展出来的
    • 如果没有同源策略，那么 我们就可以钓鱼链接就可以很容易地通过 js 代码， 来获取重要网站的 cookie，然后冒充用户， 比如 银行网站，这会产生严重的后果

  • DOM 无法获得（DOM操作限制）

    • 这里指的是同源策略限制了来⾃不同源的 JavaScript 脚本对当前 DOM 对象读和写的操作
    • 只有自己“源”提供的JavaScript脚本才能修改当前的DOM

  • AJAX 请求不能发送（网络传输限制）

    • 这里并不是指浏览器不能发送ajax请求了，实际上请求能够正常发出，服务器也能正常处理并返回响应，但是返回的响应会被浏览器拦截掉

规避同源策略的办法

• 完全不管同源策略其实并不安全，但是在一些特殊的场景下我们可能需要共享一些资源文件，就会使用到这些办法

• 跨域资源共享（CORS）

  • 在http设置上响应头Access-Control-Allow-Origin 为指定同源策略的地（请求接口的站点）或者干脆来者不拒 设置为 *，同源策略默认地址是网页的本身。
  • 只要浏览器检测到响应头带上了CORS，并且允许的源包括了本网站，那么就不会拦截请求响应。

• JSONP

  • JSONP 的原理就是 利用 。JSONP 仅支持 get 方法具有局限性(JSONP是通过动态创建 script 实现的, 动态创建 script 只能发起 get 请求，无法发起post请求)。
  • 实现的方法大概是在script的src中写入API接口，并设指定一个callback参数，用来设置回调函数的名字，利用回调函数来处理返回的数据

• 设置document.domain

  • 可以通过设置document.domain来共享cookie
  • document.domain设置的是东西我感觉可以理解为cookie的作用范围，当两个网页有相同的根域名，但是二级域名不同时，就可以通过将document.domain设置成根域名， 这样就能实现两个网页cookie的共享了