同源策略 (Same-Origin Policy)
定义
同源策略是浏览器最重要的安全策略之一，它限制了来自不同源的文档或脚本对当前文档的资源进行访问。同源策略是一种约定，是浏览器提供的最核心也最基本的安全功能。
核心特点
- 安全性：防止恶意网站窃取用户数据。
- 隔离性：隔离不同源的资源，防止相互干扰。
- 限制性：限制跨域访问，可能影响 Web 应用的灵活性。
组成部分
当协议、域名和端口都相同时，两个 URL 被认为是同源的。
- 协议 (protocol)：例如，
http或https。 - 域名 (host)：例如，
example.com。 - 端口 (port)：例如，
80或443。
例外情况
以下情况不受到同源策略的限制：
- 跨域写操作 (Cross-origin writes)：允许跨域写入。
- 跨域嵌入 (Cross-origin embedding)：允许通过
<script>标签嵌入跨域资源。 - 跨域读取 (Cross-origin reads)：通常是不允许的，但可以通过 CORS 机制来允许。
跨域解决方案
- CORS (Cross-Origin Resource Sharing)： - 通过设置 HTTP 响应头，允许服务器指定哪些域名可以跨域访问其资源。
- JSONP (JSON with Padding)：
- 利用
<script>标签的跨域特性，通过动态创建<script>标签来获取跨域数据。 - 只支持 GET 请求。 - Proxy (代理)： - 通过服务器端代理来转发请求，绕过浏览器的同源策略。
- PostMessage： - 允许不同源的窗口之间进行通信。
- WebSocket： - 一种全双工通信协议，不受同源策略的限制。
参见👉跨域解决方案
优缺点
- 优点： - 提高 Web 应用的安全性。 - 防止恶意网站窃取用户数据。 - 隔离不同源的资源，防止相互干扰。
- 缺点： - 限制跨域访问，可能影响 Web 应用的灵活性。 - 需要使用跨域解决方案来实现跨域访问。
相关概念
案例（可选）
- 使用 CORS 实现跨域请求：展示如何使用 CORS 来实现跨域请求。
- 使用 JSONP 获取跨域数据：展示如何使用 JSONP 来获取跨域数据。
参考资料
- MDN Same-origin policy: https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
- What is the Same-Origin Policy?: https://www.codecademy.com/articles/what-is-the-same-origin-policy