同源策略———SOP
该笔记参考以下文章
同源策略概述
同源策略规定了两个页面之间互相访问数据的规则。即只有在同一个源下的页面才能互相访问彼此的页面数据。该机制可以阻止某个页面中的恶意脚本对其他页面的敏感信息的访问。
同源策略对于使用cookie保存session信息来实现身份认证的浏览器来说具有重大意义
源是通过协议、主机、端口来定义的，只有这三者保持一致的时候猜被认为是同源的，不同源的页面之间是不能互相访问的
如何规避同源策略—-跨域通信手段
我们的网站如果有两个主机，那么因为同源策略的限制他们之间就不能互相交换数据，这明显是不符合要求的，那么怎么规避掉同源策略呢
使用document.domain
将两个主机的源设置为同一个，此时他们之间就可以互相访问资源了
这个方法有一个问题就是，我们在修改源的时候，可能把端口号修改为null，此时两个网站就不同源了。只有cookie和iframe共享可通过该方式设置，不能共享localstorage和indexdb
使用window.name
window.name中的值不受同源策略的限制，我们可以在注入的语句中将我们想要的数据赋值给window.name，然后再获取，如：
1 | window.name=document.cookie #这样就可以绕过同源策略获取当前页面的cookie |
在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。
CORS 跨域资源访问
允许浏览器向跨源服务器发XMLHttpRequest请求，突破了ajax只能同源的限制，并且和ajax代码一样，关键在服务器的cors配置。该策略限制的是浏览器对目的地址的读取，即在浏览器发出请求后，目的地址的资源已经成功被浏览器加载了，但是因为cors的存在所以浏览器会判断下列字段，确定发出请求的网页是否有加载该资源的权限。
**Access-control-allow-origin：**设置哪写源的网页可以访问本网页的资源
Access-Control-ALlow-Method:允许的请求方法
Access-Control-Expose-Headers:时候允许返回自定义的heep头字段
Access-Control-Allow-Credentials:是否允许发cookie
cors分为简单请求与非简单请求
简单请求
方法：head\get\post
http头：acao必选 aceh acac可选
非简单请求
先进行预检请求options
http头：acao acae 必选 acrh可选
跨文档通信
这种方式允许一个页面的脚本发送文本信息到另一个页面的脚本中，不管脚本是否跨域。在一个window对象上调用postMessage()会异步的触发window上的onmessage事件，然后触发定义好的事件处理方法。一个页面上的脚本仍然不能直接访问另外一个页面上的方法或者变量，但是他们可以安全的通过消息传递技术交流。
Websocket
websocket是为了解决http协议的一些问题而产生的，相比于http协议，websocket是一种全双工的协议，不像http协议只支持简单的请求响应单项链接，websocket协议中服务端可以主动向客户端推送消息。同时websocket协议不受同源策略的限制，使用的端口号也是80和443，协议标志位ws 和wss。数据格式更加轻量化，额外开支小，更好的二进制支持。但在握手阶段还是采用的http协议。
现代浏览器允许脚本直连一个WebSocket地址而不管同源策略。然而，使用WebSocket URI的时候，在请求中插入Origin头就可以标识脚本请求的源。为了确保跨站安全，WebSocket服务器必须根据允许接受请求的白名单中的源列表比较头数据
既然是在请求头中添加的策略，那么是否存在被篡改的风险
拓展：与服务端通信的方法—-ajax轮询、long polling 长轮询、websocket
ajax:定时向服务端发送请求
long polling:客户端与服务器保持一个长连接，等到服务端有消息返回，断开。再重新链接
web socket ：客户端发起http请求，告诉服务器进行websocket通信，并告知版本，服务器确认版本、协议，后开始进行websocket通信。
JSONP
ajax受同源策略的限制不允许跨域访问资源，但蕾西与script\a\img这类带有src属性的标签却可以跨域调用js脚本，我们利用这个特性，返回一个js函数，在src属性中进行调用，从而实现了跨域。jsonp只支持get方法，只解决了跨域请求，不能解决不同域的页面之间的js调用问题。
#片段
利用锚点的的特性，父窗口可以把数据写到子窗口url的锚点后面发送给子窗口。