同源策略（Same-Origin Policy）在 Web 安全中的作用

同源策略：Web 安全的“守门大爷”

想象一下，你住在一个大杂院里，邻居老王每天在你家门口晃悠，一会儿说要帮你看看水管，一会儿说要帮你检查煤气，你肯定会觉得浑身不自在，甚至会怀疑他是不是要偷你家的东西。互联网世界也是一样，如果没有一个“守门大爷”来管着，那简直就是一场灾难。这个“守门大爷”，就是我们今天要聊的“同源策略”（Same-Origin Policy，简称 SOP）。

同源策略，简单来说，就是浏览器为了保护用户的安全，设置的一道防火墙。它规定：一个网页（或者说一个“源”）只能访问来自同一个源的资源。 这里的“源”可不是指水源，而是由三个要素决定的：

协议（Protocol）： 比如 HTTP 或 HTTPS。
域名（Domain）： 比如 www.example.com。
端口（Port）： 比如 80 或 443。

只有当这三个要素完全相同，才能被认为是同一个源。打个比方，如果你的房子是“HTTPS协议，www.myhouse.com地址，80端口”，那么只有协议、地址和端口都跟你家一模一样的房子，才能被认为是你的“同源”邻居，你才能放心地让他们进你家门。

为什么需要同源策略？

想象一下，如果没有同源策略，互联网会变成什么样？

银行账户被盗： 你登录了你的银行网站 www.mybank.com，Cookie 里保存了你的登录信息。如果一个恶意网站 www.evil.com 可以随意读取 www.mybank.com 的 Cookie，那它就可以冒充你登录银行，把你的钱转走！这简直比抢银行还容易。
个人信息泄露： 你登录了你的社交网站 www.social.com，里面有你的个人信息、好友关系等等。如果一个恶意网站 www.evil.com 可以随意读取 www.social.com 的数据，那它就可以拿到你的所有信息，甚至冒充你发布消息，想想都可怕。
网站被篡改： 如果一个恶意网站 www.evil.com 可以随意操作 www.mywebsite.com 的 DOM（文档对象模型，简单理解就是网页的结构），那它就可以篡改你的网站内容，甚至植入恶意代码，让你的用户也中招。

同源策略就像一个尽职尽责的保安，默默守护着我们的网络安全，防止这些悲剧发生。

同源策略的限制

同源策略主要限制了以下三种行为：

跨域读取 Cookie、LocalStorage 和 IndexDB： 就像邻居不能随便翻看你家的抽屉一样，一个网页不能随便读取另一个网页存储的数据。
跨域访问 DOM： 就像邻居不能随便拆你家的墙一样，一个网页不能随意操作另一个网页的 DOM 结构。
跨域发送 AJAX 请求： 就像你不能随便跑到别人家厨房拿东西一样，一个网页不能随便向另一个源发送请求。

看起来同源策略限制挺多的，但正是这些限制，才保证了我们的网络安全。

同源策略的例外情况

当然，同源策略也不是绝对的。在某些情况下，我们需要跨域访问资源，比如：

图片、CSS、JavaScript 等静态资源： 网页可以自由引入来自任何源的图片、CSS 和 JavaScript 文件。这就像你可以随便在路边摊买东西一样，只要东西是公开的，谁都可以用。
跨域资源共享（CORS）： CORS 是一种机制，允许服务器明确声明哪些源可以访问它的资源。这就像你给邻居发了一张“授权书”，允许他们在你家特定的时间做特定的事情。
JSONP： JSONP 是一种古老的跨域解决方案，它利用了 <script> 标签可以跨域引入 JavaScript 文件的特性。但这是一种 hack 手段，现在已经很少使用了。
postMessage： postMessage 是一种安全的跨域通信机制，允许不同源的网页之间互相发送消息。这就像你和邻居之间通过“对讲机”交流，可以控制信息的发送和接收。

CORS：跨域的“通行证”

CORS 是最常用的跨域解决方案。它通过在 HTTP 响应头中添加一些特殊的字段，来告诉浏览器是否允许跨域访问。

举个例子，假设你的网站是 www.mywebsite.com，你想从 www.api.com 获取数据。www.api.com 的服务器可以在响应头中添加以下字段：

Access-Control-Allow-Origin: *

这个字段表示允许任何源访问它的资源。当然，为了安全起见，你可以指定允许的源：

Access-Control-Allow-Origin: www.mywebsite.com

这样就只允许 www.mywebsite.com 访问 www.api.com 的资源。

CORS 就像一个“通行证”，服务器通过它来控制哪些源可以访问它的资源。

JSONP：古老的“曲线救国”

JSONP 是一种比较古老的跨域解决方案，它利用了 <script> 标签可以跨域引入 JavaScript 文件的特性。

它的原理是：

客户端创建一个 <script> 标签，并将 src 属性设置为服务器的接口地址，同时传递一个回调函数名作为参数。
服务器接收到请求后，将数据包裹在回调函数中，返回一段 JavaScript 代码。
客户端执行这段 JavaScript 代码，调用回调函数，并将数据作为参数传递给回调函数。

听起来有点绕，但其实很简单。举个例子：

<script>
  function handleData(data) {
    console.log(data);
  }
  var script = document.createElement('script');
  script.src = 'http://www.api.com/data?callback=handleData';
  document.body.appendChild(script);
</script>

服务器返回的代码可能是这样的：

handleData({name: 'John', age: 30});

客户端执行这段代码后，handleData 函数就会被调用，并将 {name: 'John', age: 30} 作为参数传递给它。

JSONP 虽然可以解决跨域问题，但它也有一些缺点：

只能发送 GET 请求： 因为 <script> 标签只能发送 GET 请求。
安全性问题： 因为服务器返回的是 JavaScript 代码，如果服务器被攻击，返回恶意代码，客户端也会受到影响。

因此，JSONP 已经逐渐被 CORS 所取代。

postMessage：安全的“对讲机”

postMessage 是一种安全的跨域通信机制，它允许不同源的网页之间互相发送消息。

它的使用方法很简单：

发送消息： 使用 window.postMessage() 方法向目标窗口发送消息。
```
// 在 www.mywebsite.com 页面
window.postMessage('Hello from www.mywebsite.com', 'www.otherwebsite.com');
```
第一个参数是要发送的消息，第二个参数是目标窗口的源。

接收消息： 监听 message 事件，接收来自其他窗口的消息。

// 在 www.otherwebsite.com 页面
window.addEventListener('message', function(event) {
  if (event.origin !== 'www.mywebsite.com') {
    return; // 验证消息来源
  }
  console.log('Received message:', event.data);
});

在 message 事件的回调函数中，可以访问 event.data 属性获取消息内容，event.origin 属性获取消息来源。

postMessage 的优点是：

安全性： 可以验证消息来源，防止恶意网站冒充发送消息。
灵活性： 可以发送任意类型的数据，包括字符串、对象等等。

postMessage 适用于需要跨域通信的场景，比如：

iframe 之间的通信： 父页面和 iframe 之间可以互相发送消息。
弹出窗口之间的通信： 弹出窗口和父页面之间可以互相发送消息。
不同域名下的网页之间的通信： 两个不同域名下的网页可以通过 postMessage 互相发送消息。

总结

同源策略是 Web 安全的基石，它保护我们的网络安全，防止恶意网站窃取我们的个人信息和银行账户。虽然同源策略有一些限制，但我们可以使用 CORS、JSONP 和 postMessage 等技术来实现跨域访问。

理解同源策略，就像理解了交通规则一样，可以让我们在互联网世界里安全地行驶。下次你在浏览网页的时候，不妨想想同源策略这个默默守护着我们的“守门大爷”，感谢它的辛勤工作！记住，没有规矩，不成方圆，安全第一！

同源策略：Web 安全的“守门大爷”

发表回复 取消回复

发表回复取消回复