为什么浏览器会有同源政策以及其解决方法

如果页面中没有安全策略的话，Web 世界会是什么样子的呢？

Web 世界会是开放的，任何资源都可以接入其中，我们的网站可以加载并执行别人网站的脚本文件、图片、音频 / 视频等资源，甚至可以下载其他站点的可执行文件。

Web 世界是开放的，这很符合 Web 理念。但如果 Web 世界是绝对自由的，那么页面行为将没有任何限制，这会造成无序或者混沌的局面，出现很多不可控的问题。

比如你打开了一个银行站点，然后又一不小心打开了一个恶意站点，如果没有安全措施，恶意站点就可以做很多事情：

  • 修改银行站点的 DOM、CSSOM 等信息；
  • 在银行站点内部插入 JavaScript 脚本；
  • 劫持用户登录的用户名和密码；
  • 读取银行站点的 Cookie、IndexDB 等数据；
  • 甚至还可以将这些信息上传至自己的服务器，这样就可以在你不知情的情况下伪造一些转账请求等信息。

所以说，在没有安全保障的 Web 世界中，我们是没有隐私的，因此需要安全策略来保障我们的隐私和数据的安全。

什么是同源策略

1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。

最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页”同源”。所谓”同源”指的是”三个相同”。

- 协议相同
- 域名相同
- 端口相同

限制范围

同源策略主要限制以下几个方面的交互：

  • 文档间互操作：例如，来自不同源的页面，不能通过 JavaScript 访问对方的 DOM。
  • 网络请求：XMLHttpRequest 和 Fetch API 默认禁止跨域请求，不过可以通过CORS（跨源资源共享）来放宽这些限制。
  • Cookie、LocalStorage 和 IndexedDB：无法读取或操作其他源下的数据。

避开同源策略的方法

尽管同源策略对安全性是必要的，但在一些场景下我们需要安全地实现跨域请求和资源共享。以下是几种解决方法：

  • JSONP（JSON with Padding）：一种旧技巧，通过 <script> 标签的源属性不受同源策略限制的特性来绕过限制。
  • CORS：通过服务器设置 HTTP 响应头，如 Access-Control-Allow-Origin，允许特定的外域请求。
  • PostMessage：允许我们安全地实现跨源通信，常用于窗口间的消息传递。
  • WebSocket：虽然遵循自己的安全模型，但它不受同源策略的限制。

Chrome 控制台开发者工具设置 CORS

在我们的实际开发过程中，本地调试过程中难免会遇到一些跨域的问题。如果此时相关的后端工程师因为某些原因不能及时处理，这时就可以借助 Chrome 开发者工具中的 Override headers 来配置 Access-Control-Allow-Origin 字段。具体如下图所示：

Override-Headers-1 Override-Headers-2

添加好后，刷新页面就可以正常拿到数据了。

参考

浏览器同源政策及其规避方法
你不知道的 Chrome DevTools（开发者工具） - Jecelyn

> cd ..