同源策略与跨域请求

Origin - 源

location.origin

git remote add origin

目录

1. 同源策略
   1. URL
   2. 什么不是同源策略
   3. 什么是同源策略
   4. 作用是什么
2. 跨域

URL

Uniform Resource Locator，统一资源定位符，俗称网址

《图解HTTP》中的图

什么是同源策略

什么是源

JS:  location.origin  （IE下不支持）

什么是同源策略

Same-origin policy

浏览器的一个功能——同源策略(Same-Origin Policy)

同源是指域名、协议、端口相同。

不同源的客户端脚本在没明确授权的情况下，不能读写对方的资源。

什么不是同源策略

a.com/index.html

可以引用 b.com/main.js

可以引用 b.com/style.css

可以引用 b.com/logo.png

但是，a.com 里面的

b.com/main.js 不能对 b.com 的资源进行读写（ajax 报错）

实践：在本地搭建服务器进行验证

跨域

突破同源策略的限制

• 降域
• JSONP
• Cross-Origin Resource Sharing

• HTML5 postMessage

• 其他 Hack
  • 利用 hash
  • 利用 window.name

参考

降域

不同源 -> 同源

1. child1.a.com 与 a.com
2. child1.a.com 与 child2.a.com
3. child1.a.com 与 xxx.child2.a.com

top 和 iframe 都要写：document.domain = a.com

JSONP

JSONP 与 JSON 没有什么关系

1. a.com 可以引用 b.com 的 JS 文件
2. 我们是不是可以在 b.com 的 JS 文件里面放数据

var script = document.createElement('script')
script.src = 'b.com/data.js'
//script.src = 'b.com/data.js?callback=xxx'

实践：自己实现一个 JSONP 的 server 和 client

JSONP 的问题

1. 只能进行GET请求
2. 可被注入（callback=alert(1);）
3. 需要校验身份（Token）

CORS

1. b.com 声明：我允许 a.com 来访问我
2. a.com 中的 JS 发起对 b.com 的 ajax 

实践：自己实现 CORS

Cross-Origin Resource Sharing ——跨域资源共享

其他方式

1. HTML5 postMessage
2. hash
3. window.name

完

下一节课：动态页面串讲《一个增删改查页面》