同源策略
首先解释:同源策略
同源策略是浏览器最核心也最基本的安全功能,这个策略可以阻止一个页面上的恶意脚本通过页面的DOM对象获得访问另一个页面上敏感信息的权限。
同源,要求URL源的协议,域名,端口完全相同(IE在计算源的时候没有包括端口。)
跨域方法
- jsonp实现跨域
- CORS跨域资源共享
- document.domain+iframe(子域名代理)
- postMessage实现跨域
-
通过jsonp跨域(废弃)
JSONP(JSON with Padding)是资料格式 JSON 的一种“使用模式”,可以让网页从别的网域要资料。
JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JSON数据。
文档中不受跨域影响的标签有<script><img><iframe>,jsonp是包含json数据的js函数,通过放在<script>标签中插入DOM执行
在js中,我们不可以直接用XMLHttpRequest请求不同域上的数据,但是我们可以在页面上引用不同域的js文件
JSONP的优缺点:
JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;
它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。
JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;
它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
-
CORS——跨域资源共享
CORS(Cross-Origin Resource Sharing)跨域资源共享,它允许浏览器向跨源服务器,发出XMLHttpRequest2.0版请求,从而克服了AJAX只能同源使用的限制。
参考阮一峰大大的 跨域资源CORS详解
使用"跨域资源共享"的前提,是浏览器必须支持这个功能,而且服务器端必须同意这种"跨域"。如果能够满足上面的条件,则代码的写法与不跨域的请求完全一样。浏览器会自动在请求头部添加origin字段,有时甚至多一次http请求,但是不会对用户造成影响。
xhr.open('GET', 'http://other.server/and/path/to/script');
CORS与JSOP对比:
1、 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求
2、 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得
数据,比起JSONP有更好的错误处理。
3、 JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS,CORS更加方便、可靠
-
通过修改document.domain来跨子域
对于主域相同而子域不同的情况,可以通过设置document.domain的办法来解决。如:对于两个文件www.a.com/a.html和 blog.a.com/b.html均加上设置document.domain = ‘a.com’;然后在a.html文件中创建一个iframe,通过iframe两个js文件即可交互数据:
//www.a.com/a.html
<script>
document.doamin = 'a.com';
var iframe = document.createElement('iframe');
iframe.src = 'http://blog.a.com/b.html';
document.body.appendChild(iframe);
iframe.onload = function() {
var doc = iframe.contentDocument || iframe.contentWindow.document;
// 在这里操纵b.html
console.log(doc);
};
</script>
在blog.a.com/b.html内编写代码:
//blog.a.com/b.html
<script>
document.domain = 'a.com';
</script>
备注:某一页面的domain默认等于window.location.hostname。主域名是不带www的域名,例如a.com,主域名前面带前缀的通常都为二级域名或多级域名,例如 blog.a.com其实是二级域名。 domain只能设置为主域名,不可以在blog.a.com中将domain设置为test.a.com
-
postmessage跨域