查看 / 下载 Markdown 源码

55. 浏览器中的同源策略与 JS 的关系 副本.md

查看飞书原文 ↗3,842 字符

1. 核心概念 (Core Concept)

浏览器的同源策略（Same-Origin Policy）是一种重要的安全机制，它限制了来自一个源（Origin）的文档或脚本如何与来自另一个源的资源进行交互。这里的“源”通常指协议（protocol）、域名（domain）和端口号（port）三者的组合。同源策略主要针对的是那些可能具有潜在危险的跨源读写操作。

2. 为什么需要它？ (The "Why")

3. API 与用法 (API & Usage)

同源策略是浏览器内置的安全机制，它不是一个可以通过 JavaScript API 直接“使用”或“关闭”的功能。它是在浏览器层面默默地对脚本发起的各种跨源操作进行限制。

主要受同源策略限制的跨源操作包括：

代码示例（受限场景演示 - 伪代码概念）:

这是一个概念性的示例，说明在没有 CORS 的情况下，跨源的 fetch 请求会因同源策略而失败（虽然请求可能发出，但脚本无法读取响应）。

// 假设当前页面源是： https://site-a.com
// 尝试从另一个源获取数据
fetch('https://site-b.com/api/data')
  .then(response => {
    // 如果没有 CORS，同源策略会阻止脚本读取 response.json() 的内容
    // 即使网络请求成功，这里也可能出现跨域错误
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('获取的数据:', data); // 这行通常不会在跨域失败时执行
  })
  .catch(error => {
    console.error('获取数据失败:', error); // 大部分情况下，跨域错误会在这里捕获
  });

// 注意：这只是演示同源策略的影响，实际错误处理取决于具体场景和浏览器实现。
// 解决跨域请求通常需要目标服务器配置 CORS 响应头。

不受同源策略限制的跨源加载（只读，不涉及敏感数据读取）:

有些跨源加载操作是不受同源策略严格限制的，但这通常是只读或不直接暴露敏感数据的形式：

<!-- 跨源加载不受限（基本资源类型） -->
<script src="https://another-domain.com/script.js"></script>
<img src="https://another-domain.com/image.png" alt="Cross-origin Image">
<link rel="stylesheet" href="https://another-domain.com/style.css">
<iframe src="https://another-domain.com/page.html"></iframe>

4. 关键注意事项 (Key Considerations)

5. 参考资料 (References)

原文链接与附件索引