跨页面通信的途径：详解跨域与同源限制

前端

2024-01-25 00:52:30

跨页面通信：破解浏览器安全屏障的利器

在现代网络开发中，跨页面通信是必不可少的。它赋予网页与不同页面（同源或跨域）无缝交换数据的能力，极大提升了用户体验和应用功能。

跨域通信：浏览器的安全之盾

浏览器出于安全考虑，实施了同源策略，该策略限制了跨域通信。同源是指协议、域名和端口三者完全一致。例如，https://example.com:8080 与 https://example.com:8081 属于不同源。

跨页面通信的途径

跨页面通信的途径取决于页面是否跨域：

同源页面通信

postMessage()： 向其他同源窗口发送消息。
localStorage/sessionStorage： 共享存储数据，允许页面之间持久化数据传输。
IndexedDB： 基于数据库的持久化存储，适用于大数据传输。

跨域页面通信

postMessage()： 使用 postMessage() 时，浏览器会自动进行跨域处理，无需额外配置。
CORS（跨域资源共享）： 允许不同源页面发送请求和响应，需要服务器端配置。
JSONP（JSON with Padding）： 将数据封装在 <script> 标签中，绕过同源限制。
WebSockets： 全双工通信协议，可建立持续连接。
Server-side Proxy： 通过服务器转发请求和响应，实现跨域通信。

代码示例

同源页面通信

// 页面A
const otherWindow = window.open('pageB.html');
otherWindow.postMessage({ message: 'Hello from Page A' }, '*');

// 页面B
window.addEventListener('message', (event) => {
  console.log('Message from Page A:', event.data.message);
});

跨域页面通信

// 页面A
fetch('https://example.com/api', {
  method: 'GET',
  mode: 'cors'
}).then(response => {
  // 处理响应
});

// 页面B（服务器端配置了 CORS）
const request = new XMLHttpRequest();
request.open('GET', 'https://example.com/api');
request.send();
request.onload = () => {
  // 处理响应
};