Web安全 - 深入同源策略

什么是同源？

网站的 " 源 "，是由（protocol，host，port）三元组定义的，两个网站（URL）同源是指它们的协议、主机、端口号都相同。

为什么要同源策略？

比如现在有两个网站 alimama.com 和 aliniangniang.com 如果我的 aliniangniang.com 是嵌在 alimama.com 页面，它们的前端页面还可以对对方的服务端发送请求，这并不是我们希望看见的。

所以同源策略并不是用于保护网络服务器安全的。是为了防止他们读取用户在当前网站上的数据，或以用户的身份向当前网站发起操作。

此处有一个疑问：很多网站将图像文件、JavaScript代码等静态文件放在与主站域名不同的 CDN 域名上，为什么这些资源跨域还能正常显示或执行？

解答：

1. 区分两个概念：1.加载资源 2.读取资源浏览器跨域加载资源是不受限制的（CSS加载字体文件是个例外）。
2. 注意同源策略阻止的对象：一个域的 JS代码读取另一个域的数据。举例 aliniangniang.com 应用的资源可以在 alimama.com 上展示或者执行，但是无法读取到 aliniangniang.com 的资源。
3. 由于同源策略存在，所以 alimama.com 无法拿到 aliniangniang.com 都 SessionID，无法以 aliniangniang.com 的身份发出请求拿到非法数据。

跨域DOM互访问

这项技术解决的是我们前端不同源网站的互相访问。

子域名的互相访问

我们只需要使用JS把 document.domian 改为 example.com，他们就能互相访问对方的DOM内容。

注意：

1. 修改 document.domian 时，浏览器会做安全检查，只允许将其修改为当前域名或者父域名，否则会抛出异常。
2. 修改 document.domian 同时会把当前源的端口设置为 " null "。
3. 修改 document.domian 的操作相当于丢弃了同源的端口限制，导致了被攻击的风险增加。
4. 父子网站都需要对 document.domian 进行修改。

跨域访问服务端

即前端页面要从跨域的服务端获取数据。

JSONP

如果不涉及跨域前后端通常以JSON获取数据，跨域时需要加padding，将json转为 JS 代码。目前使用 HTML5有自动支持数据传输。