同源策略、跨域、jsonp

什么是同源策略

同源策略是浏览器最基本的功能，同源指得是相同的域名、协议和端口号，不同的源的客户端脚本在没有明确授权的情况下，无法相互读取对方的资源称之为同源策略。

---

什么是跨域？跨域有几种实现形式

跨域就是突破同源策略的限制，使一个域名的网页可以请求另一个域名的资源。实现方式：

1. 降域 document.domain：
   前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域
   同时为两个域设置document.domain= xxx.com(少用、慎用，有安全问题）

2. jsonp :
   利用script的src标签的跨域属性，传递一个callback参数给服务端来获取其他源的数据

3. cors 跨域资源共享：
   在HTTP请求里添加特殊的头，允许服务器指定特定的域名可以跨域访问。

4. 利用hash ：
   通过给b页面hash值做为参数传递数据，在a页面添加隐藏的iframe（b页面），添加定时器判断hash值有无发生变化，有变化则获取hash值，缺点是数据量较小，而且此方法比较饶，不推荐使用。

5. 利用window.name：
   此方法比较饶，需要跳转两次页面。参考博客window.name实现的跨域数据传输

6. HTML5 postMssage： html5引入的API,可以实现跨文档、多窗口、跨域消息的传递。
   可参考博客html5 postMessage解决跨域、跨窗口消息传递

---

jsonp的原理是什么

jsonp即json with padding,主要是利用script的src标签的跨域属性，传递一个callback参数给服务端，让服务器端返回可执行的Javascript函数，参数为要回发的数据。有两个问题（缺点）：

1. 可能会被注入callback = alert(1); 解决办法为设置字符串过滤出其中的左右括号。如：callback = callback.replace(/\(/g,"")

2. 只能用get传输数据，无法使用post方式进行传输。

3. 需要验证身份（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:*") //指定所有域都可以请求它；

---

练习题

1. 演示同源策略，如图

因同源策略限制无法访问b.com文件

---

2. 使用降域演示跨子域,如图

跨子域

---

3. 使用jsonp跨域，如图

使用jsonp跨域

---

4. 使用cors跨域，如图

cors跨域

---

• 本博客版权归羞涩的涩和饥人谷所有，转载请注明出处