2

同源与跨域

一般情况下,禁止一个域从另一个域读取数据,却可以使用某些从其他域拿到的资源。比如说,允许一个域执行、渲染、应用从其他域获取到的脚本、图片、样式;同样,一个域可以展示从其他域获取的内容,比如在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可以随便玩

caoweiju
1.5k 声望53 粉丝

class Myself {