从同源策略到跨域方法

参考阮一峰老师的文章

同源策略

1.同源策略: 是一种约定,是浏览器最基础的安全策略.web是构建在同源策略基础上的,浏览器不同的域名不能访问对应的cookie。

2.什么是同源: 

          相同的协议;

          相同的域名;

          相同的端口;

3.同源策略的限制:

          Cookie, LocalStorage, IndexDB无法读取;

          DOM无法获得;

          AJAX不能发送请求;

但是表单的提交不受同源策略的限制。


跨域方法

1. 设置document.domain共享 Cookie

域名1: test1.xxx.com;

document.domain="xxx.com"

document.cookie="test=hello";

域名2: test2.xxx.com;

上述方法只适应与cookie和iframe。并不能读取localStorage和indexDB;

最实用的方法是在服务器端设置

Set-Cookie: key=value; domain=.www.com; path=/;

这样的话,二级域名和三级域名都不用设置就可以访问cookie。

2.jsonp跨域

//在script中带callback参数

//index.php中写

if(callback){

    return test({data: 'xxx'})

} else {

    return {data: 'xxx'}

}

3.window.postMessage

window.postMessage是无论是否同源,允许窗口通信的html5规范中的API。

父窗口http://aaa.com向子窗口http://bbb.com发消息,调用postMessage方法就可以了。

var popup = window.open('http://bbb.com', 'title');

popup.postMessage('Hello World!', 'http://bbb.com');

postMessage方法的第一个参数是具体的信息内容,第二个参数是接收消息的窗口的源(origin),即"协议 + 域名 + 端口"。也可以设为*,表示不限制域名,向所有窗口发送。

子窗口向父窗口发送消息的写法类似。

window.opener.postMessage('Nice to see you', 'http://aaa.com');

父窗口和子窗口都可以通过message事件,监听对方的消息。 window.addEventListener('message', function(e) { console.log(e.data); },false);

message事件的事件对象event,提供以下三个属性。

event.source:发送消息的窗口

event.origin: 消息发向的网址

event.data: 消息内容下面的例子是,子窗口通过event.source属性引用父窗口,然后发送消息。

window.addEventListener('message', receiveMessage);

function receiveMessage(event) { event.source.postMessage('Nice to see you!', '*'); } event.origin属性可以过滤不是发给本窗口的消息。

window.addEventListener('message', receiveMessage);

function receiveMessage(event) { if (event.origin !== 'http://aaa.com') return; if (event.data === 'Hello World') { event.source.postMessage('Hello', event.origin); } else { console.log(event.data); } }

4.CORS

CORS是跨源资源分享是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求,CORS允许任何类型的请求。

整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

5.window.name

        浏览器窗口有一个window.name属性,这个属性最大的特点是无论是否同源,只要在同一个窗口,前一个页面设置了属性,后一个页面就可以使用。

        这种方法的优点是,window.name容量很大,可以放置非常长的字符串;缺点是必须监听子窗口window.name属性的变化,影响网页性能。

6.片段识别符

片段识别符是指url#后边的标志符。改变片段标志符,页面不会刷新。

父窗口可以把信息,写入子窗口的片段标识符。

var src = originURL + '#' + data; document.getElementById('myIFrame').src = src;

子窗口通过监听hashchange事件得到通知。

window.onhashchange = checkMessage; function checkMessage() { var message = window.location.hash; // ... }

同样的,子窗口也可以改变父窗口的片段标识符。 parent.location.href= target + "#" + hash;

7.WebSocket协议不实行同源策略

       在WebSocket的请求头中有一个origin字段,有了这个字段,服务器可以根据这个字段判断是否允许本次请求服务。

8.其他的如 (background),,

你可能感兴趣的:(从同源策略到跨域方法)