什么是 encrypted-postmate
encrypted-postmate 是一个方便而安全的 JavaScript 库，用于在两个不同的 Web 对象间通信。 它主要用于在 iframe 和父页面、父级和子级 iframe 等场景之间进行通信。
encrypted-postmate 提供了对加密和签名的支持，可确保通信是安全的，并防范来自不受信任的来源的攻击。 它使用基础代理通信模式来加密和解密消息，这意味着消息数据不会在其传输或访问的过程中被篡改或泄露。
安装 encrypted-postmate
你可以使用 npm 来安装 encrypted-postmate:
npm install encrypted-postmate
如何使用 encrypted-postmate
首先，你需要在创建两个 web 对象的页面中引用 encrypted-postmate 库。
假设我们有两个 web 对象，分别是 iframe 和父页面。我们要在这两个对象之间进行通信。
在 iframe 中，你需要创建一个 postmate 对象，并使用它来向父页面发送消息。示例如下：
const postmate = new Postmate({
origin: 'http://parent-page.com', // 父页面网址
container: document.getElementById('container'), // iframe 插入的 DOM 容器
name: 'child-frame', // iframe 的名字
});
postmate.emit('child-button-clicked', 'Child button clicked!'); // 发送消息到父页面在父页面中，你需要使用同一个 postmate 对象，并使用连接方法来注册事件以便监听子页面发送的消息。示例如下：
const postmate = new Postmate({
origin: 'http://child-iframe.com', // iframe 网址
name: 'parent-page', // 父页面的名字
});
postmate.on('child-button-clicked', (data) => {
console.log(`Message received: ${data}`);
});如你所见，无论是在父页面还是子页面中，传输数据时都不需要加密或签名。
然而，它并不总是安全的。如果使用的是外部 url，在实现跨域消息的时候就必须保证数据的安全传输。encrypted-postmate 为此提供了一种解决方案，它支持对文本和对象进行加密。加密将使用 RSA 键对和 PKCS1OAEP。 加密和解密使用一个与你的应用程序相对应的密钥对。
下面我们来看如何使用加密来保护消息传输。
加密消息
首先，需要生成密钥对并在父页面和子页面之间进行交换。然后才能安全进行加密和解密操作。
-- -------------------- ---- ------- -- ----------------------------- ----- ---- - ----------------------------- -- ----------- ----- -------- - --- ---------- ------- ------------------------ -- ----- ---------- ------------------------------------- -- ------ --- --- -- ----- --------------- -- ------ ---- --------------- -- -------- --- -------------------------- -- -- - -------------------------------- --- -------------------------- ----------------- -- -----------
现在，子页面已加载了密钥，并已准备好使用它对消息进行加密。
子页面中的代码示例：
-- -------------------- ---- -------
----- ------ - --- -------------------
------- ------------------------- -- -----
---------- ------------------------------------- -- ------ --- --- --
----- ------------- -- ------ ---
---- --------------------------- -- ----------
---
---------------------- ------------ -- -
-- ------------------
------------------------------------ -------------------- -- -
---------------------------
---
--
--------------------------------------------------------- -- -- -
----- ---- - ----------- ---------- -------
-------------------------- -------------------- ------
---
在子页面中，接收到父页面的密钥私钥之后，使用它来生成一个子页面的密钥对，并将公钥发送给父页面。
然后当子页面发送消息时，它将用子页面的私钥进行加密。 它使用公钥将消息传输到父页面，父页面使用其私钥来解密这些消息。
解密消息
父页面需要在初始化时加载密钥，并注册监听器来解密来自子页面的消息。
-- -------------------- ---- -------
----- ---- - --- -------------------
------- ------------------------ -- -----
----- --------------- -- ------ ---
---- ----------------------------- -- ----------
---
-------------------------------------- -------------------- -- -
-------------------- ----------
----------------------- ---------------
---
-------------------------------- ------ -- -
--------------------------------------- -- -
------------------- -------------------
---
---在父页面中，我们使用一样的加载密钥的方式生成自己的密钥对，并将公钥发送到子页面，并接收子页面发送的被加密过的消息，在这里就是示例中传输的encrypted-message事件中携带的对象, 进行解密从而得到传输的消息。
在使用 encrypted-postmate 时，我们需要注意一些细节：
- 要确保要保证在父页面和子页面中，引用同一个 postmate 实例。
- 由于在父页面和子页面之间传输的所有数据都是字符串，因此需要谨慎处理传输的数据类型。
- 如果要加密和解密数据，则必须使用相同的密钥对。否则，与实际和期望的结果可能会不匹配。
总结
encrypted-postmate 是一个出色的工具，用于在不同的 Web 对象之间进行安全通信。使用此工具可以更好地保护用户数据，并帮助确保在跨 Web 对象传输期间数据的真实性和保密性。 我们相信，通过使用本文中的示例可以更好地理解 encrypted-postmate 如何使用，同时我希望这篇文章也为你理解其他 Web 通信工具打下了一些基础，并帮助您更好地保护用户数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ce81e8991b448e019f