什么是同源策略
同源策略是浏览器最基本的功能，同源指得是相同的域名、协议和端口号，不同的源的客户端脚本在没有明确授权的情况下，无法相互读取对方的资源称之为同源策略。
什么是跨域？跨域有几种实现形式
跨域就是突破同源策略的限制，使一个域名的网页可以请求另一个域名的资源。实现方式：
-
降域
document.domain：
前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域
同时为两个域设置document.domain= xxx.com(少用、慎用，有安全问题） -
jsonp :
利用script的src标签的跨域属性，传递一个callback参数给服务端来获取其他源的数据 -
cors 跨域资源共享：
在HTTP请求里添加特殊的头，允许服务器指定特定的域名可以跨域访问。 -
利用hash ：
通过给b页面hash值做为参数传递数据，在a页面添加隐藏的iframe（b页面），添加定时器判断hash值有无发生变化，有变化则获取hash值，缺点是数据量较小，而且此方法比较饶，不推荐使用。 -
利用
window.name：
此方法比较饶，需要跳转两次页面。参考博客window.name实现的跨域数据传输 -
HTML5 postMssage： html5引入的API,可以实现跨文档、多窗口、跨域消息的传递。
可参考博客html5 postMessage解决跨域、跨窗口消息传递
jsonp的原理是什么
jsonp即json with padding,主要是利用script的src标签的跨域属性，传递一个callback参数给服务端，让服务器端返回可执行的Javascript函数，参数为要回发的数据。有两个问题（缺点）：
-
可能会被注入
callback = alert(1);解决办法为设置字符串过滤出其中的左右括号。如：callback = callback.replace(/\(/g,"") -
只能用get传输数据，无法使用post方式进行传输。
-
需要验证身份（token），解决办法是为callback参数设置两个页面共有cookie作为参数
JSON及JSONP的区别主要参考这篇博客
CORS是什么
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing），避开了浏览器的同源策略，通过在http请求里添加特殊的头，允许服务器指定哪些跨域请求是允许的，与jsonp使用目的相同，但是要比jsonp更强大，缺点是不兼容老的IE浏览器。如：
header("Access-Control-Allow-Origin:http://jiuyi.com") //指定http://jiuyi.com 这个域可以请求它；
header("Access-Control-Allow-Origin:*") //指定所有域都可以请求它；
练习题
- 演示同源策略，如图
因同源策略限制无法访问b.com文件
- 使用降域演示跨子域,如图
跨子域
- 使用jsonp跨域，如图
使用jsonp跨域
- 使用cors跨域，如图
cors跨域
- 本博客版权归羞涩的涩和饥人谷所有，转载请注明出处
网友评论