什么是浏览器的同源策略？

同源策略是浏览器中一个基础且至关重要的安全机制。它限制了一个源（origin）的文档或脚本如何与另一个源的资源进行交互。这个策略的核心目的是隔离潜在的恶意文档，保护用户数据，防止不同来源的代码进行未经授权的访问。

同源的判断标准

两个URL的协议（scheme）、主机（host）和端口（port）必须完全相同才被视为同源。

// 假设当前页面URL为：https://www.example.com:443/page.html
// 对比以下URL：
https://www.example.com:443/api/data  // 同源（协议、主机、端口一致）
http://www.example.com:443/page2      // 不同源（协议不同）
https://api.example.com:443/data      // 不同源（主机不同）
https://www.example.com:8080/page     // 不同源（端口不同）

只要其中一项不匹配，就被视为跨源请求，会受到同源策略的限制。

同源策略的限制范围

同源策略主要影响以下三个方面：

1. DOM访问：一个源的JavaScript不能读取或操作另一个源的文档（如iframe）的DOM。这防止恶意网站通过iframe嵌入银行网站并窃取输入内容。
2. 网络请求：通过XMLHttpRequest或fetch发起的跨域HTTP请求，其响应会被浏览器拦截，除非响应头明确允许。这是最常见的跨域问题。
3. Web存储：localStorage、IndexedDB和Cookies等存储也受到源的限制。每个源只能访问自己存储的数据。

不受同源策略限制的嵌入

值得注意的是，一些资源的嵌入是允许的，尽管读取其内容可能受限。例如，你可以跨域使用<img>、<script>、<link>、<iframe>（内容不可读）等标签。这为JSONP等传统跨域方案提供了可能，但也带来了安全风险，需要服务端配合进行安全处理。

实践中的安全意义

同源策略是Web安全的基石。没有它，一个你访问的恶意标签页就能随意读取你的邮箱（如果邮箱在另一个标签页打开）或进行未经授权的银行转账操作。

<!-- 恶意网站试图通过iframe嵌入银行网站 -->
<iframe id="bankFrame" src="https://your-bank.com"></iframe>
<script>
  // 同源策略阻止了以下操作：
  const iframeDoc = document.getElementById('bankFrame').contentDocument; // 访问被拒绝
  const input = iframeDoc.querySelector('#password'); // 无法窃取密码
</script>

为了在保证安全的前提下实现合法的跨源通信，W3C制定了CORS（跨源资源共享）标准。服务器通过设置Access-Control-Allow-Origin等响应头来告知浏览器允许哪些源进行跨域访问。理解同源策略，是理解CORS、JSONP、postMessage等跨域技术原理的前提。