同源策略和跨域

2019-03-30 本文已影响0人无涯_9322

同源策略

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。
源(origin)，所指的是：
协议、域名和端口号

所以a.com 下的js 脚本，不能通过ajax 读取b.com 下的文件数据。
要注意的是，localhost 和 127.0.0.1 虽然都指向本机，但也属于跨域

跨域

想操作不同源下的对象，就需要跨域。
跨域有以下几种方式：

1. JSONP

JSONP的原理是，通过向页面内添加一个 script 标签，操作 src 属性去触发对指定地址的请求。具体操作如下：

所发送请求的文件地址为http://localhost:8080/a.html，在该文件内，加入 script 标签，并在该标签中加入指定地址

document.querySelector('button').onclick = function(){   //页面内只有一个按钮，当点击它时
    var script = document.createElement('script');   //给页面加入 `script` 标签
    script.src = 'http://127.0.0.1:8080/js.js?callback=files';   //并向指定地址发送请求
    document.head.appendChild(script);
}

function files(data) { 
    console.log(data);
}

通过callback 参数指定回调函数的名字，请求地址到达后，后台会去解析callback这个参数获取到字符串files，在js.js文件中，做如下处理

...
var news = ['这是第一条数据', '这是第二条数据' ,'这是第三条数据']
files(news)
...

这样a.html 页面就能在控制台输出js.js 中的数据了

要注意的是，采用JSONP跨域也存在问题：

使用这种方法，JSONP 需要对应接口的后端的配合才能实现。

通过src 属性去触发对指定地址的请求,请求只能是 GET，不能 POST。

可能被注入恶意代码，篡改页面内容，可以采用字符串过滤来规避此问题。

2. CORS

CORS 是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。方法是在被请求的后台，返回的响应头上加上：

var http = require('http')
http.createServer(function(req, res){
    ...
    res.setHeader('Access-Control-Allow-Origin' , '*')    
     //即所有网址都能访问,也可以换成某个网址

    res.end();
}).listen(8080);

3. 降域 document.domain

同源策略认为域和子域属于不同的域，可以通过设置 document.damain，让浏览器认为它们是同一个源(只能适用于主域相同子域不同的情况)。
例如：
a.com 与 b.a.com，通过设置 document.damain='a.com ，让两个页面域名相同，就能实现两个页面之间的通信。

此方式的特点：

只能在父域名与子域名之间使用，且将 b.a.com 域名设置为 a.com后，不能再设置成b.a.com。

存在安全性问题，当一个站点被攻击后，另一个站点会引起安全漏洞。

这种方法只适用于 Cookie 和 iframe 窗口。

4. PostMessage

postMessage是h5引入的一个新概念，可以通过 window.postMessage 的方式进行使用。
postMessage() 方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

postMessage(data,origin) 方法接受两个参数

data:要传递的数据
在传递参数的时候需要使用JSON.stringify() 方法对对象参数序列化。

origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]
URL会被忽略，所以可以不写，这个参数是为了安全考虑
postMessage() 方法只会将 message 传递给指定窗口，当然如果愿意也可以建参数设置为 *，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为/。