同源策略、跨域、jsonp

什么是同源策略

• 同源策略是浏览器的安全设置。指的是在
• 相同协议：
• 相同域名：
• 相同端口；

的网站只能访问与包含它的页面位于同一个域中的资源。

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

• 跨域：实现不同域名下的信息通信。

1. 降域
   1. 比如把child.a.com和a.com和xxx.child.a.com都可以降域为a.com
   • 实现的话需要在两个需要进行跨域的网站script都写document.domain = 'a.com'进行降域
   • 其中ajax不受降域的影响，得用iframe在页面中引用另一个页面的这种方式
   • 域名只能往下设置。比如xxx.child.a.com只能往下变成chlid.a.com或者再往下变成a.com。但是如果到了a.com就不能再回去到child.a.com、xxx.child.a.com
   • 降域有安全性的问题，如果一个子域名被攻击，多个被降域的域名都会被连带。

• jsonp
• CORS
• postmessage(html5的功能)

http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

jsonp 的原理是什么

首先json是一种数据格式，而jsonp是一种数据的调用方式。
这个方式允许用户传递一个callback参数给服务器端，然后服务器端会根据这个callback所附着的参数来响应数据，服务器端会按照这个callback作为函数名来包裹住json数据，这样客户端就返回了一个名为callback所对应名字的方法。

• 只能进行get请求（因为script只能触发get请求，不能触发post请求）
• 可被注入恶意代码（eg：callback: alert(1);），可用字符串筛选解决；
• 需要校验身份（token）：可以共用一套cookie体系实现安全性，也可以使用jsonp自带的token变量进行验证，但是安全性依然有待考量。

CORS是什么

跨域资源共享（Cross-Origin Resource Sharing ），允许不同源的站点获取对方的资源。这需要你所请求数据站点的后端配合，只有他允许了，你才可以获取到。

QQ截图20160919104702.png

本地搭建服务器，演示同源策略

1. 本地搭建服务器（如果使用 SAE 可创建不同的代码版本，这样可通过1.xxx.sinapp.com和2.xxx.sinapp.com 访问了）
2. 修改 本地host，通过不同域名访问本地服务器。比如访问http://a.com/index.html, http://b.com/ajax.php，本质是
3. 在 index.html 里使用 ajax 接口访问 http://b.com/ajax.php 里的数据。
4. 查看输出报错

搭建服务器，配置好host

主页代码

main.js配置

data数据

a.com

b.com

• jsonp处理

• CORS处理

未加入 header("Access-Control-Allow-Origin:http://a.com");

同源策略被禁止引用

加入 header("Access-Control-Allow-Origin:http://a.com");