同源策略与跨域请求

1、先来说说什么是源

源（origin）就是协议、域名和端口号。

以上url中的源就是：http://www.company.com:80
若地址里面的协议、域名和端口号均相同则属于同源。
以下是相对于 http://www.a.com/test/index.html 的同源检测
http://www.a.com/dir/page.html —-成功
http://www.child.a.com/test/index.html —-失败，域名不同
https://www.a.com/test/index.html —-失败，协议不同
http://www.a.com:8080/test/index.html —-失败，端口号不同

2.什么是同源策略？
同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

不受同源策略限制的：

1、页面中的链接，重定向以及表单提交是不会受到同源策略限制的。
2、跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的，，，&amp;#31561;&amp;#12290;

二、跨域
1、什么是跨域
受前面所讲的浏览器同源策略的影响，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。

2、跨域的实现形式

降域 document.domain

同源策略认为域和子域属于不同的域，如：
child1.a.com 与 a.com，
child1.a.com 与 child2.a.com，
xxx.child1.a.com 与 child1.a.com
两两不同源，可以通过设置 document.damain=’a.com’，浏览器就会认为它们都是同一个源。想要实现以上任意两个页面之间的通信，两个页面必须都设置documen.damain=’a.com’。
此方式的特点：
1.只能在父域名与子域名之间使用，且将 xxx.child1.a.com域名设置为a.com后，不能再设置成child1.a.com。
2. 存在安全性问题，当一个站点被攻击后，另一个站点会引起安全漏洞。
3. 这种方法只适用于 Cookie 和 iframe 窗口。

JSONP跨域

JSONP和JSON并没有什么关系！
JSONP的原理：（举例：a.com/jsonp.html想得到b.com/main.js中的数据）在a.com的jsonp.html里创建一个回调函数xxx，动态添加

function addScriptTag(src) { 
    var script = document.createElement('script'); 
    script.setAttribute("type","text/javascript"); 
    script.src = src; 
    document.body.appendChild(script);
}
window.onload = function () { 
addScriptTag('http://b.com/main.js?callback=foo');
} //window.onload是为了让页面加载完成后再执行
function foo(data) { 
    console.log(data.name+"欢迎您");
 };

//b.com/main.js中的代码

foo({name:"hl"})

这样便实现了跨域的参数传递。

采用jsonp跨域也存在问题：
1.使用这种方法，只要是个网站都可以拿到b.com里的数据，存在安全性问题。需要网站双方商议基础token的身份验证，这里不详述。
2.只能是GET，不能POST。
3.可能被注入恶意代码，篡改页面内容，可以采用字符串过滤来规避此问题。

同源策略与跨域请求

猜你喜欢