前端那些事（一）跨域

抽丝剥茧

为什么会出现跨域问题？

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

同源策略是什么？

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

同一个源是如何定义的？

两个页面具有相同协议（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 详解