同源策略和跨域方法

同源与跨域

通常状况下，禁止一个域从另外一个域读取数据，却可使用某些从其余域拿到的资源。好比说，容许一个域执行、渲染、应用从其余域获取到的脚本、图片、样式；一样，一个域能够展现从其余域获取的内容，好比在frame中显示html文档。网络资源也能够选择性的让其余域来读取本身的信息，好比使用Cross-Origin Resource Sharing，这种状况下访问权是针对单个域受权的。同源策略的控制者是浏览器，浏览器能够控制不一样域之间的资源的访问或相互操做，但不控制本身对不一样域之间的资源的操做和访问。

同源策略

源：由协议【https、http】+域名【a.com】+端口【80、443】组成，（ie中略有不一样），同源策略是浏览器的核心安全策略，目的是未来自不一样源的资源进行隔离，并控制不一样源资源间的通讯，从而减小安全威胁，加强安全性。

跨域中的一些限制以及不限制内容以下：

不限制内容：

• 脚本文件 js
• 图片资源
• 样式资源css
• iframe展现其余的的资源
• a连接访问其余资源
• 多媒体等资源
• form表单提交

限制内容：

• 跨域的方法【get、post能够】
• 跨域请求头不能够添加自定义头部
• 本地文件系统读写
• iframe能够访问iframe总体，不能访问内容
• cookie的限制，使用CORS须要withCredentials=true才能够带上cookie

跨域方法

1. 使用反向代理，避免跨域，经过后端来完成跨域部分
2. JSONP方式，利用js文件的跨域容许，而且js文件请求到了，就会执行该js脚本，如此能够在前端定义好function callback(data){};这样去请求后端的js文件，文件的内容包括了须要的数据，可是返回的是一个函数callback(data);这样就会调用前端脚本写好的callback方法，把data当作参数使用
3. CORS（Cross Origin Resource Sharing），经过协商HTTP Header让浏览器和服务端进行通讯，来决定请求或者响应是否有效，默认状况下，浏览器发送跨域请求不带认证信息（好比cookie,证书,代理认证信息等），withCredentials属性值为false，后端响应设置Access-Control-Allow-Origin容许该域，或者为*,若是须要cookie认证信息跨域须要withCredentials=true，同时服务端容许Access-Control-Allow-Credentials:true，同时Access-Control-Allow-Origin 值不能为*；使用CORS浏览器将CORS请求分红两类：简单请求（simple request）和非简单请求（not-so-simple request），只要同时知足如下两大条件，就属于简单请求。
   1) 请求方法是如下三种方法之一：
   HEAD
   GET
   POST
   （2）HTTP的头信息不超出如下几种字段：
   Accept
   Accept-Language
   Content-Language
   Last-Event-ID
   Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

对于非简单请求、会发起预检请求Options来确认是否容许跨域，这种方法老的浏览器不必定支持。fetch方法在移动端使用较多，也能够配合CORS来完成跨域。

1. form表单提交，这样能够提交数据，可是进行交互有点困难；
2. window.name + iframe的使用，可使用iframe定义一个窗口window，经过后端或者页面iframe的src页面的js脚本配合，把数据放在这个window.name上，最大能够存储2M的数据，而后主域能够把这个iframe的src设置为什么主域同域的中间页，而此时iframe的window.name并不会变，这样主页就能够获取该iframe的window.name来获取数据。参考连接
3. document.domain能够完成两个顶级域名下的子域名之间的通讯
4. postMessage是H5中的window之间的通讯方式。
5. WebSocket能够随便玩