问答
1.什么是同源策略
同源指相同协议,相同域名,相同端口号.
在控制台我们得到以下信息：
location.protocol 协议
location.hostname 域名
location.port 端口号
http协议默认80端口，https默认443端口，ftp协议默认21端口。
同源策略是指：不同源的客户端脚本（JS）在没有明确授权的情况下，不能读写对方的资源。
同源政策的目的：为了保证用户数据的安全，防止恶意的网站窃取。同源策略的限制范围：
- Cookie、LocalStorage 和 IndexDB 无法读取。
- DOM 无法获得。
- AJAX 请求不能发送。
举例
2.什么是跨域？跨域有几种实现形式
跨域就是突破同源策略的限制。
跨域实现方式：
**1.document.domain+iframe‘‘降域’ **
应用范围：这种办法只能解决主域相同而子域不同，且是iframe形式的跨域；
缺点：安全性不高，当一个小站点sss.a.com被攻击后，所有a.com站点会引起安全漏洞。
2.JSONP
应用范围： 通过script引入，只能进行GET请求
存在问题：存在安全性问题，可被注入可执行的js代码（callback=alert(1)
）, 对于这个问题，只能通过外界的字符串过滤来解决，如禁止callback中传入括号，使用正则去除左右括号，callback=callback.replace(/(/g,"")
，callback=callback.replace(/)/g,"")
3.CORS
给被访问方设置Access-Control-Allow-Origin，如在php文件头部写入header('Access-Control-Allow-Origin:http://a.com:8080'),表示允许来自源http://a.com:8080的请求。
这是跨域AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。但是IE10及以下IE版本不支持。
4.HTML5 postMessage这是HTML5的新功能，用postMessage支持基于web的实时消息传递。
5.利用iframe和location.hash，原理是利用location.hash来传值。url中#号及其后面的内容就是location.hash,改变hash的值页面并不会刷新，所以可以利用hash值来进行数据传递。这种方法缺点也很多，诸如数据直接暴露在了url中，数据容量和类型都有限等。
6.利用window.name主要利用window.name值不随url改变而改变，只要当前页面没被关闭，window.name的值就不会改变。
3.jsonp 的原理是什么
就是利用<script>标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。
当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，形如： <src="http://www.example.net/api?param1=1¶m2=2">并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。
第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如:callback({"name":"hax","gender":"Male"})这样浏览器会调用callback函数，并传递解析后json对象作为参数。
本站脚本可在callback函数里处理所传入的数据。
缺点：
（1）任意网站只要通过jsonp方式就可以跨域访问目标域名下的信息，解决办法：在跨域请求数据时在参数中加上与目标域名约定好的一个token变量，这样其他网站访问该域名时，目的网站通过辨认这个约定好的信息而决定是否可以被跨域访问。
（2）不能用post方法获取数据，由于基于src地址引用方式，在地址中附带参数信息，因此只能用get方式获取信息
（3）callback方法由于是根据用户需求自己实现的，可能会被恶意注入脚本，获取隐私信息。
4.CORS是什么
CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。
CORS需要浏览器和服务器同时支持，只要服务器实现了CORS接口，且浏览器支持该功能（目前所有浏览器都支持该功能，IE浏览器不能低于IE10），就可以跨域通信。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
举例
- 假设我们页面或者应用已在 http://www.test1.com 上了，而我们打算从 http://www.test2.com 请求提取数据。一般情况下，如果我们直接使用 AJAX 来请求将会失败。利用 CORS，http://www.test2.com 只需添加一个标头，就可以允许来自 http://www.test1.com 的请求，下图是我在PHP中的 hander() 设置，“”号表示允许任何域向我们的服务端提交请求*：
header("Access-Control-Allow-Origin:*"); //*表示允许任何域向我们的服务端提交需求
header("Access-Control-Allow-Origin:http://www.test1.com") //这样就允许来自http://www.test1.com的需求了
通过在HTTP Header中加入扩展字段，服务器在相应网页头部加入字段表示允许访问的domain和HTTP method客户端检查自己的域是否在允许列表中，决定是否处理响应。服务器端在HTTP的响应头中加入（页面层次的控制模式）：
Access-Control-Allow-Origin: example.comAccess-Control-Request-Method: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization,Accept, Range, Origin
Access-Control-Expose-Headers: Content-Range
Access-Control-Max-Age: 3600
多个域名之间用逗号分隔，表示对所示域名提供跨域访问权限。”*”表示允许所有域名的跨域访问。
相关文档:跨域资源共享 CORS 详解
练习
- 本地搭建服务器，演示同源策略
- 至少使用一种方式解决跨域问题
本文版权归作者_Josh和饥人谷所有，转载请注明来源
网友评论