跨越技术藩篱：深入剖析JS同源策略的方方面面

前端

2023-08-06 10:03:17

理解同源策略，跨越跨域藩篱

在现代互联网世界中，JavaScript (JS) 已成为构建交互式网页和应用程序的基石。然而，随着网站之间交互的日益频繁，跨域问题也应运而生。为了保护数据安全和隐私，浏览器引入了同源策略 (SOP)这一重要的安全机制。

同源策略简介

同源策略是一种浏览器安全机制，它限制不同源网页之间的脚本和文档交互。同源是指三个要素（协议、域名和端口）完全相同的网页。如果这些要素中任何一个不同，则两个网页就被视为跨域。

同源策略的限制

同源策略对跨域交互施加了严格的限制，包括：

脚本限制： 跨域脚本无法访问对方网页的 DOM 对象、事件和变量。
AJAX 限制： 跨域 AJAX 请求会被阻止，无法发送或接收数据。
WebSocket 限制： 跨域 WebSocket 连接无法建立，无法进行实时数据传输。
其他限制： cookie、localStorage 和 IndexedDB 等存储机制也受到同源策略的限制。

跨域解决方案

尽管同源策略对跨域交互有限制，但为了实现网站之间的互联互通，跨域解决方案应运而生，以下是一些常见的方法：

JSONP： JSONP 是一种简单实用的跨域解决方案，它通过 <script> 标签加载跨域脚本，并在回调函数中处理返回的数据。
CORS： CORS（跨域资源共享）是一种 W3C 标准，它允许不同源的网站在特定条件下互相访问资源。它需要服务器端设置跨域访问控制 (CORS) 头部。
WebSocket 代理： WebSocket 代理用于解决 WebSocket 跨域问题。它通过在本地搭建代理服务器来转发跨域请求，从而实现跨域通信。
跨域 Iframe： 跨域 Iframe 也是一种跨域解决方案，它通过在页面中嵌入一个跨域的 Iframe，然后通过 Iframe 与父页面通信来实现跨域交互。

代码示例：

JSONP

// 父页面
function callback(data) {
  // 处理返回的数据
}

// 创建一个 <script> 标签加载跨域脚本
const script = document.createElement('script');
script.src = 'https://example.com/jsonp?callback=callback';
document.body.appendChild(script);

CORS

服务器端设置 CORS 头部：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

客户端 AJAX 请求：

// 发送跨域 AJAX 请求
const request = new XMLHttpRequest();
request.open('GET', 'https://example.com/api');
request.send();

WebSocket 代理

服务器端设置 WebSocket 代理：

import asyncio
import websockets

async def echo(websocket, path):
    while True:
        data = await websocket.recv()
        await websocket.send(data)

asyncio.run(websockets.serve(echo, 'localhost', 8080))

客户端 WebSocket 连接：

// 建立跨域 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080/api');
socket.onopen = () => {
  // 连接成功后的回调
};
socket.onmessage = (event) => {
  // 收到数据后的回调
};
socket.onclose = () => {
  // 连接关闭后的回调
};
socket.send('Hello from client');

跨域 Iframe

<!-- 父页面 -->
<iframe src="https://example.com/cross-domain"></iframe>

// 父页面
const iframe = document.querySelector('iframe');

// 监听 iframe 消息
iframe.addEventListener('message', (event) => {
  // 处理来自 iframe 的数据
});

// 向 iframe 发送数据
iframe.contentWindow.postMessage('Hello from parent', '*');

// iframe 页面
// 监听来自父页面的消息
window.addEventListener('message', (event) => {
  // 处理来自父页面的数据
});

// 向父页面发送数据
window.parent.postMessage('Hello from iframe', '*');