跨域

一、同源策略

1、定义：

同源策略即协议、域名、端口都要相同。不同源的客户端脚本在没有授权的情况下，不能读取对方的资源。

2、目的：

保证用户信息安全，防止恶意网站窃取数据。

3、哪些行为受同源限制：

cookie、webStorage、indexDB

DOM、iframe对象无法读取

ajax不能发送请求 （报错：。。。No 'Access-Control-Allow-Origin'...)

4、哪些行为不受同源限制：

script标签、img标签、link标签

页面中的链接、重定向、表单提交

 

二、跨域

当我们去访问一个不同源下的资源的时候就会产生跨域。

解决跨域的方法：

客户端与服务器端之间：

1、（后端）服务器配置cors,跨域资源共享；使用自定义的http头部，让浏览器与服务器进行沟通。

res.header("Access-Control-Allow-Origin", "*"); //设置请求来源不受限制
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); //设置请求方式

2、（后端）nginx反向代理（服务器之间没有同源策略的限制）

3、jsonp，利用script标签可以跨域的特性，只能使用get方法，不安全。

4、如果使用webpack的话，修改webpack选项devServer的代理功能proxy：

proxy:{
    '/api':{
        target:'', //请求的实际地址
        changeOrgin:true, //是否跨域
            /''/
        pathRewrite: {   //将/api 替换为空
            '^/api':''
        } 
    }
}

客户端之间：

1、html5 postMessage(),客户端之间传递数据

window.onload = function() {  
    var ifr = document.getElementById('ifr');  
    var targetOrigin = "http://www.google.com";  
    ifr.contentWindow.postMessage('hello world!', targetOrigin);  
};  

2、document.domain（对于具有相同上级域名的情况，document.domian='baidu.com')，这时浏览器会认为他们都处于同一个域下。问题：当其中一个站点被攻击后，另一个站点也会有安全漏洞。