阅读量:0
HTML5 跨文档消息传输允许不同源的窗口或iframe之间安全地传递数据，使用 跨文档消息传输示例 Title this is div1
postMessage 方法实现。HTML5的跨文档消息传输功能，允许不同源的网页之间安全地交换数据，这一特性主要通过`postMessage()`方法实现，它能够在不同的窗口（如iframe或弹出窗口）之间发送消息，以下是一些关于HTML5跨文档消息传输的示例和探讨：
### HTML5跨文档消息传输示例
#### 父文档（home.html）
```html
```
#### 子文档（msg.html）
```html
```
### 关键要点解析
1. **消息发送**：在父文档中，通过`postMessage()`方法向子文档发送消息，该方法接受两个参数：要发送的消息和目标窗口的源（origin）。
2. **消息接收**：子文档通过监听`message`事件来接收消息，当收到消息时，会触发该事件的回调函数。
3. **安全性检查**：在处理接收到的消息之前，必须检查消息的来源（origin），以确保消息来自可信任的域，这是为了防止恶意网站通过跨站脚本攻击（XSS）发送恶意消息。
4. **响应消息**：子文档可以通过调用`postMessage()`方法向父文档发送响应消息，同样，也可以指定消息的目标窗口。
### 相关问答FAQs
1. **问**：跨文档消息传输是否只能用于同源策略下的页面？
**答**：不是的，跨文档消息传输可以用于不同源的页面间通信，但必须确保消息来源的安全性，通过检查消息的origin属性来实现。
2. **问**：在使用跨文档消息传输时，如何确保消息的安全性？
**答**：为了确保消息的安全性，需要执行以下步骤：一是检查消息的origin属性，确保消息来自可信任的域；二是避免使用通配符（"*"）作为目标源，因为这会使任何域都可以接收到你的消息；三是对传入的消息进行验证和过滤，以防止恶意代码的注入。
HTML5 跨文档消息传输（Crossdocument messaging）示例探讨
HTML5 引入了一种新的通信方式——跨文档消息传输（Crossdocument messaging），允许来自不同源（origin）的文档之间安全地发送和接收消息，这种通信方式对于构建复杂的单页应用（SPA）和实现前后端分离的Web应用非常有用。
跨文档消息传输的基本原理
跨文档消息传输基于以下原理：
1、同源策略：默认情况下，浏览器出于安全考虑，禁止不同源之间的文档进行交互。
2、跨源通信：通过设置特定的安全措施，可以允许跨源通信。
3、消息事件：使用window.postMessage方法发送消息，并通过window.addEventListener监听message事件接收消息。
示例代码
以下是一个简单的跨文档消息传输示例：
发送消息的页面（sender.html）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <title>Message Sender</title> </head> <body> <h1>Message Sender</h1> <button id="sendBtn">Send Message</button> <script> document.getElementById('sendBtn').addEventListener('click', function() { const message = 'Hello from sender.html!'; const targetOrigin = 'http://example.com'; // 接收方的源 window.parent.postMessage(message, targetOrigin); }); </script> </body> </html>接收消息的页面（receiver.html）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <title>Message Receiver</title> </head> <body> <h1>Message Receiver</h1> <div id="message"></div> <script> window.addEventListener('message', function(event) { // 检查消息来源是否安全 if (event.origin !== 'http://example.com') { return; } const message = event.data; document.getElementById('message').textContent = message; }); </script> </body> </html>运行示例
1、将sender.html和receiver.html放置在两个不同的源（例如不同的域名或子域名）。
2、打开receiver.html，点击发送按钮，观察sender.html发送的消息是否在receiver.html中显示。
安全注意事项
验证消息来源：在接收消息时，始终验证消息来源（event.origin），确保通信安全。
限制消息内容：不要发送敏感信息，如用户密码或个人数据。
使用事件监听器：使用window.addEventListener来监听message事件，而不是window.onmessage，因为后者不支持多个监听器。
HTML5 跨文档消息传输为Web开发带来了新的可能性，允许不同源之间的文档进行安全的通信，通过理解其原理和正确使用，可以构建更加复杂和交互性强的Web应用。
