揭秘跨域的底层机制，让你更懂JS同源策略

2023-03-10 17:26:27

同源策略：网页安全卫士

想象一下，你在网上浏览一个购物网站，却突然被另一个网站劫持，你的购物信息被盗取。这正是同源策略 （SOP）旨在防止的网络安全威胁。它就像一个安全之盾，保护用户免受跨域攻击，即不同网站之间的恶意交互。

同源策略的精髓

同源策略的核心条件是：

协议： HTTP、HTTPS、FTP 等。
域名： 网站地址的根域。
端口： 网站访问端口，通常为 80 或 443。

当这些元素完全一致时，两个网站被认为是同源的，可以互相交互。例如，https://example.com:80 和 https://example.com:443 是同源的，但 https://example.com:80 和 http://example.org:80 不是。

DOM 同源策略：IFRAME 的跨域难题

DOM 同源策略 是 SOP 在 DOM（文档对象模型）上的延伸。它禁止不同源页面操作彼此的 DOM，即使它们位于同一窗口或框架中。

最常见的 DOM 同源策略场景是 IFRAME 跨域 。IFRAME 是一个 HTML 元素，允许在一个网页中嵌入另一个网页。当一个页面中的 IFRAME 指向不同源的页面时，就会触发 DOM 同源策略，阻止对 IFRAME 内容的任何操作。

穿越壁垒：跨域解决方案

为了突破 SOP 的限制，允许不同源网站之间安全地交换数据，开发了 跨域解决方案 ：

1. CORS（跨域资源共享）： CORS 是一种 W3C 标准，允许浏览器在不同源网站之间发送跨域请求。它通过在 HTTP 请求头中添加 Origin 字段，告知服务器请求的来源，由服务器决定是否允许跨域请求。

代码示例：

// JavaScript
fetch('https://example.org/api/data', {
  method: 'GET',
  headers: {
    'Origin': 'https://example.com'
  }
});

// PHP
header('Access-Control-Allow-Origin: https://example.com');

2. JSONP（JSON with Padding）： JSONP 是一种非官方的跨域解决方案，利用了 <script> 标签的跨域特性。它将数据包装在 <script> 标签中，然后加载到页面中，绕过了 SOP 的限制。

代码示例：

// JavaScript
let callbackName = 'myCallback';
let script = document.createElement('script');
script.src = `https://example.org/api/data?callback=${callbackName}`;
document.body.appendChild(script);

// 回调函数
window.myCallback = function(data) {
  console.log(data);
};

3. postMessage： postMessage 是 HTML5 中引入的跨域通信机制，允许不同源页面通过 window.postMessage() 方法进行通信。postMessage() 方法将数据发送到另一个窗口或框架，而不管它们的源是什么。

代码示例：

// JavaScript
// 接收页面
window.addEventListener('message', function(event) {
  console.log(event.data);
});

// 发送页面
window.postMessage('Hello, world!', 'https://example.org');