同源跨域二三事：从同源策略到 JSONP 技术略解

三问同源策略

（一）什么是同源策略？

同源策略是浏览器因安全性须要而诞生的沙盒机制中的其中一个策略。
所谓同源，就是要三同：同协议，同域名，同端口号。其中任意一个不相同，都不能称之为同源。非同源网站间 JavaScript 脚本的行为受到了严格的限制，以提供必要的安全性。

（二）同源策略限制了什么？

JavaScript 不能

1. 获取非同源网站的 Cookie；
2. 访问非同源网站的 DOM；
3. 向非同源网站发出 AJAX 请求。

（三）若是没有同源策略，Web 应用的安全性会受到哪些挑战？

举几个例子来进行说明。
首先，若是没有同源策略，那么任意网站均可以获取对方的 Cookie 值。Cookie 是用来进行会话管理的工具。把 Cookie 比做一个令牌，在用户拿着令牌，道出名字和密码验证经过以后，服务器就记下了令牌的模样，下次再来，只需出示令牌，服务器便认你是以前那我的。若是 Cookie 不受同源策略的保护，那么恶意网站就可以夺了你的令牌，到你的后花园中随意走动，不受限制。
咱们知道有些标签是不受同源策略的限制的，好比 iframe 标签，img 标签，script 标签等。若是在恶意网站里嵌入 iframe，设置 src 属性值为淘宝网地址，那么只要你登陆了淘宝，点开了这个网站，那么 iframe 就带着你的 Cookie 也登陆了淘宝。此时，若是恶意网站能访问 iframe 的 DOM，那你的隐私信息就能轻易地被尽收眼底。

须要跨域怎么办？

须要跨域怎么办（一）——JSONP 的解决方式

由前所述，script 等一众具备 src 属性的标签是不受同源策略的限制的。因此 JSONP 就借着这个特性被用来进行非同源网站之间的 JSON 信息的共享。
假如 A 网站编写了一个使用了 JSONP 技术的 API 接口，连接为 www.a.com/api/get-user-info，当其余非同源网站 B 须要使用这个接口时，它只须要在 html 中写下这样的代码。

<script>
    function dealWithJSON(json) {
        # 如下省略
    }
</script>
<script src="www.a.com/api/get-user-info?callback=dealWithJSON"></script>

咱们不妨假设 B 须要的 JSON 数据以下。

{
    username: 'test',
    uid: 2233221,
    is_vip: true,
    balance: 1111111
}

A 网站会将这条 JSON 数据放到经过 callback 传来的函数的参数中，一并返回给 B 网站。此时这个函数就连同参数一块儿嵌入了 B 网站的 script 标签中，具体以下。

<!-- 以上省略 -->
<script>
    function dealWithJSON(json) {
        # 如下省略
    }
</script>
<script>
    dealWithJSON(
        {
            username: 'test',
            uid: 2233221,
            is_vip: true,
            balance: 1111111
        }
    );
</script>
<!-- 如下省略 -->

因为已经提早定义好了处理 JSON 数据的函数，因此 B 网站能够根据须要处理取出来的数据。这也就实现了跨域资源共享的需求。
然而，这样的方式虽然在同源策略的限制下实现了跨域资源共享，但也会因为一些纰漏出现安全性问题：JSON 劫持（此处暂时不表）。

须要跨域怎么办（二）——CORS 的解决方式

CORS 与 JSONP 目的相同，但比 JSONP 更强大。JSONP 只支持 GET 请求，而 CORS 支持全部请求。对于 CORS，阮一峰老师的跨域资源共享 CORS 详解一文已经讲得很是清楚透彻，须要进一步了解的朋友能够参看这篇文章，就不在这里重复造轮子了（逃）。

后记

写这篇文章的初衷实际上是在学习 Web 安全的时候碰到了这个概念，当时对同源跨域是一头雾水，感受太过抽象，很差理解。查阅了多篇文章和书籍后才对这个概念有了一点了解。就如标题里写的同样，本文是略解一二，若是有错误不许确之处请向我砸来评论！此致，敬礼（不是）。