使用场景：
项目A的部分页面需要用到项目B的页面，但是项目B的接口需要携带token以访问接口，所以简单的办法就是项目A以iframe的方式把项目B嵌入进来。然后通过postMessage来传递数据。
什么是 postMessage
postMessage 是一种允许来自不同源的窗口安全地进行通信的方法。使用此 API，可以指定消息的接收者和发送的数据，确保仅预期的接收者可以接收和处理这些数据。
window.postMessage(data, targetOrigin);
- data：要发送的数据。
- targetOrigin：定义哪些窗口能接收消息的 URI（如果设置为 “*”，则任何窗口都可以接收消息，但这种做法不安全）。
使用步骤：
第一步：发送 token 到 iframe
假设有一个父窗口需要将 API token 发送到嵌入的 iframe，以便 iframe 中加载的应用可以使用这个 token 访问后端服务。
父窗口代码：
<button onclick="sendTokenToIframe()">Send Token to Iframe</button>
<iframe id="secureIframe" src="https://example-iframe.com"></iframe>
<script>
function sendTokenToIframe() {
const iframeWindow = document.getElementById('secureIframe').contentWindow;
const token = 'abc123'; // 假设这是从服务器获取的 token
iframeWindow.postMessage({
type: 'AUTH_TOKEN', token: token }, 'https://example-iframe.com');
}
</script>
第二步：在 iframe 中接收 token
iframe 需要监听来自父窗口的消息，并确保它们来自可信来源。
Iframe 接收代码：
<script>
window.addEventListener('message', function(event) {
if (event.origin !== 'https://parent-origin.com') {
console.error('Received message from unauthorized source');
return;
}
if (event.data.type === 'AUTH_TOKEN') {
console.log('Received token:', event.data.token);
// 存储或使用 token 调用 API
}
});
</script>
安全最佳实践
- 始终验证消息来源：只处理来自预期源的消息。
- 使用 HTTPS：确保您的页面和被嵌入的 iframe 都使用 HTTPS，这可以保护您的数据免受中间人攻击。
- 严格的错误处理：为代码添加错误处理逻辑，确保在接收到无效数据时能够安全地处理异常。