前端那些事（一）跨域

抽丝剥茧

为何会出现跨域问题？

浏览器基于 同源策略 作出的限制。

同源策略是什么？

同源策略 限制了从同一个源加载的文档或脚本如何与来自另外一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

同一个源是如何定义的？

两个页面具备相同协议（http，https），相同端口，相同域名。
下表给出了相对http://store.company.com/dir/page.html同源检测的示例:

URL	结果	缘由
http://store.company.com/dir2/other.html	成功	只有路径不一样
http://store.company.com/dir/inner/another.html	成功	只有路径不一样
https://store.company.com/secure.html	失败	不一样协议 ( https和http )
http://store.company.com:81/dir/etc.html	失败	不一样端口 ( http:// 80是默认的)
http://news.company.com/dir/other.html	失败	不一样域名 ( news和store )

同源策略中的安全机制的应用场景是什么？

• CSRF（跨站请求伪造）
• 点击劫持

CSRF 是什么？

CSRF（跨站点请求伪造）是一种冒充受信任用户并发送网站不须要的命令的攻击。P.S：还有一个相似的攻击叫XSS（跨网站脚本）攻击。

点击劫持 是什么？

点击劫持，clickjacking，也被称为UI-覆盖攻击。这个词首次出如今2008年，是由互联网安全专家罗伯特·汉森和耶利米·格劳斯曼独创的。
它是经过覆盖不可见的框架误导受害者点击。
虽然受害者点击的是他所看到的网页，但其实他所点击的是被攻击者精心构建的另外一个置于原网页上面的透明页面。
这种攻击利用了HTML中标签的透明属性。

如何解决

关于跨域的背景介绍就到这里告一段落了，有兴趣的朋友能够延伸阅读关于 CSRF 攻击，点击劫持，XSS攻击等相关知识点。文末会给出一些参考资料。下面咱们继续来看看如何解决跨域问题。

JSONP

首先，在HTML中，有一些标签是不受跨域影响的，例如：script，img，iframe 等标签。 而JSONP 方式实现跨域请求就是利用了上述的script标签。实现原理简单的说就是：经过动态建立script标签，利用script中的src 不受同源策略限制的特性来跨域获取数据。具体示例代码网上不少，这里我就不贴了，比较关键的点是 callback 的名称的先后端统一。另外，JSONP只能发送GET请求。

iframe+form

能够实现post的跨域请求。其实现原理也是经过iframe 标签的不受跨域影响+form表单的post提交方式而实现的。

document.domain

document.domain 只能在子域访问其父域时使用。
例如：www.baidu.com 能够经过设置document.domain="baidu.com" 访问其父域 baidu.com.
使用 document.domain 来容许子域安全访问其父域时，您须要在父域和子域中设置 document.domain 为相同的值。这是必要的，即便这样作只是将父域设置回其原始值。不这样作可能会致使权限错误。
P.S: baidu.com 为一级域名,带前缀 www 的www.baidu.com 为二级域名。

CORS

CORS 是在同源策略中建议的，标准的跨域方式，它经过额外的Http Header 来告诉浏览器在一个源（域）上运行的Web应用程序有权从不一样来源的服务器访问所选资源。
CORS 实现的方式主要是后端设置  Access-Control-Allow-Origin：*，经过CORS实现跨域访问，基本上和前端没有关系了，前端请求和日常几乎同样。P.S：IE10 如下不支持CORS。
关于CORS中的简单请求，非简单请求等更详细的信息，能够看看 阮一峰-跨域资源共享 CORS 详解

Nginx代理

前端请求代理服务器，代理将请求转发到真正的后端域名上。这种方式和CORS 的指定容许某个域名访问的方式是同样的，不过好处是保护了真正的后端域名。

总结

若是遇到了跨域问题不要慌，首先检查前端服务和所请求的资源是不是同一个域，若是不是同一个域则按照上述方式和后端进行沟通，解决跨域问题。而后根据项目的实际须要来选择跨域方式，如客户端能保证支持IE10以上，建议使用后2种方式实现跨域访问。
跨域的问题其实不难，难的是后面所涉及到的各类Web攻击方式和防范策略。在了解跨域的同时，了解这些Web 安全防范策略才是真正的理解了跨域这件事情。
关于Web 安全的问题，能够参考我 的这篇文章：「译」Web 安全高级主题。

最后，感谢阅读！

参考资料

• 同源策略
• Same Origin Policy
• 不要再问我跨域的问题了
• 浅谈 CSRF 攻击
• XSS攻击进阶篇——那些年咱们看不懂的XSS
• 阮一峰-跨域资源共享 CORS 详解