跨域
什么是同源策略
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。目的就是为了保证用户信息的安全,防止恶意的网站窃取数据。
那什么是源呢?如果协议、域名、端口对于两个页面是相同的,则两个页面具有相同的源。
举例来说,http ://www.example.com/dir/page.html 这个网址,协议是http ://,域名是www.example.com,端口是80(默认端口可以省略)。它的同源情况如下:
http ://www.example.com/dir2/other.html :同源
http ://example.com/dir/other.html :不同源(域名不同)
http ://v2.www.example.com/dir/other.html :不同源(域名不同)
http ://www.example.com:81/dir/other.html :不同源(端口不同)
<b>同源的三要素可以记为:协议相同;域名相同;端口相同。</b>
参考文章: http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
什么是跨域?跨域有几种实现形式
当 Web 资源请求由其它域名或端口(不同源)提供的资源时,就发生了跨域请求。跨域有几种实现形式;
- jsonp
- cors
- postMessage
- 降域
JSONP 的原理是什么
JsonP是利用script标签的src属性,浏览器支持script标签的跨域,浏览器会把script标签获得的数据当做JS代码来解析,我们就可以可以利用一个自定义的函数来处理这段代码。
CORS是什么
跨源资源共享(CORS)定义一种跨域访问的机制,可以让AJAX实现跨域访问。CORS允许一个域上的网络应用向另一个域提交跨域AJAX请求。实现此功能非常简单,只需由服务器发送一个响应标头即可。它是通过客户端+服务端协作声明的方式来确保请求安全的。服务端会在HTTP请求头中增加一系列HTTP请求参数(例如Access-Control-Allow-Origin等),来限制哪些域的请求和哪些请求类型可以接受,而客户端在发起请求时必须声明自己的源(Orgin),否则服务器将不予处理,如果客户端不作声明,请求甚至会被浏览器直接拦截都到不了服务端。服务端收到HTTP请求后会进行域的比较,只有同域的请求才会处理。
降域
对于主域相同而子域不同的例子,可以通过设置document.domain的办法来解决。
具体的做法是可以在http: //www.a.com/a.html和http ://script.a.com/b.html两个文件中分别加上 document.domain = "a.com";然后通过a.html文件中创建一个iframe,去控制iframe的contentDocument,这样两个js文件之间就可以 “交互”了。
postMessage
window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
演示三种以上跨域的解决方式
不跨域情况下用ajax收发数据
ajax(html) ajax(服务端)跨域的方法:
host文件配置
<b>1.jsonp
jsonp(html)jsonp(服务端)
2.cors
在服务端加上res.header('Access-Control-Allow-Origin','*')
3.降域
降域(document.domain) 降域4.postMessage
利用postMessage方法
postMessage