HTML 5 安全利用跨域消息传递
Posted: Sat Dec 21, 2024 9:10 am
HTML5 是下一代 Web 应用开发中即将出现的技术之一，它为 Web 世界带来了令人兴奋的新功能。HTML5 应用在移动应用领域得到了广泛应用。但除了这些特性之外，HTML5 还带来了全新的攻击媒介。
在进一步了解跨域消息传递的安全概念之前，让我们先了解一下 HTML5 中跨域消息传递的基础知识。
使用 postMessage() 方法进行跨域消息传递
由于 HTML5 之前的一些根策略限制，以前两个主机之间只有在使用相同的协议、主机和端口号时才有可能发送消息。
但是，随着 HTML5 的推出，所有这些限制都消失了，人们可以跨域限制传递消息，而不必担心之前对 HTML5 施加的政策。
感谢 HTML5，通过引入一种名为postMessage() 的方法 薪资主管邮寄线索 您可以在两个框架之间传递消息，而不管其协议、主机和端口是否相同。
句法：
otherWindow.postMessage (消息， targetOrigin，[传输]);
1)信息：
包含要发送到其他窗口的数据。
这里使用结构化克隆算法对数据进行序列化，该算法允许您传递大型无数据对象而不管它们是否序列化。
2）目标原点：
指定要分派事件的其他窗口的来源“*”或 URI。
如果调度时参数（例如Scheme、主机名或端口号）与目标源中提供的不相似，则不会调度事件。
3)转账：
案例：可选
它是可传输对象以及其所有权归目的地手中的消息的队列。
现在，为了更好地消化跨域消息传递概念，让我们建立一个实践实验室来简要说明一下。
跨域消息传递的实用方法：
案例 A：http://localhost:8383/ 案例 B：http://localhost/
我们可以看到有两种情况，情况 A 和情况 B，它们位于不同的端口。
从上面的截图中您可以看到，一条消息从案例 A 发送到案例 B，并且同时被接收。
但是在发送消息期间，如果案例 A 将目标来源设置为“*”，因为接收窗口案例 B 正在监听传入请求，则任何人都可以监听请求并将其加载到 iframe 中。因此，如果我们想要特定窗口监听请求调用，则按如下方式检查来源：
函数接收消息（e）{
如果（e.origin！==“http：//localhost：8383”）
返回;
做点什么..！
}
为什么需要跨域？
跨域解决方案向用户提供不同的信息，而无需在多个级别上披露整个机密数据，这可能会使其容易受到意外泄露。
在潜在程序缺陷的 Lightroom 中，破坏危险是主观确认的。
跨域解决方案向需要信息的关键用户提供信息，同时阻止未经授权的用户访问机密数据；同时保护网络免受恶意或无意的数据损坏。
Cross Domain Solutions 使得战斗中联盟伙伴之间数据分配的过程变得极其简化。
在进一步了解跨域消息传递的安全概念之前，让我们先了解一下 HTML5 中跨域消息传递的基础知识。
使用 postMessage() 方法进行跨域消息传递
由于 HTML5 之前的一些根策略限制，以前两个主机之间只有在使用相同的协议、主机和端口号时才有可能发送消息。
但是，随着 HTML5 的推出，所有这些限制都消失了，人们可以跨域限制传递消息，而不必担心之前对 HTML5 施加的政策。
感谢 HTML5，通过引入一种名为postMessage() 的方法 薪资主管邮寄线索 您可以在两个框架之间传递消息，而不管其协议、主机和端口是否相同。
句法：
otherWindow.postMessage (消息， targetOrigin，[传输]);
1)信息：
包含要发送到其他窗口的数据。
这里使用结构化克隆算法对数据进行序列化，该算法允许您传递大型无数据对象而不管它们是否序列化。
2）目标原点：
指定要分派事件的其他窗口的来源“*”或 URI。
如果调度时参数（例如Scheme、主机名或端口号）与目标源中提供的不相似，则不会调度事件。
3)转账：
案例：可选
它是可传输对象以及其所有权归目的地手中的消息的队列。
现在，为了更好地消化跨域消息传递概念，让我们建立一个实践实验室来简要说明一下。
跨域消息传递的实用方法：
案例 A：http://localhost:8383/ 案例 B：http://localhost/
我们可以看到有两种情况，情况 A 和情况 B，它们位于不同的端口。
从上面的截图中您可以看到，一条消息从案例 A 发送到案例 B，并且同时被接收。
但是在发送消息期间，如果案例 A 将目标来源设置为“*”，因为接收窗口案例 B 正在监听传入请求，则任何人都可以监听请求并将其加载到 iframe 中。因此，如果我们想要特定窗口监听请求调用，则按如下方式检查来源：
函数接收消息（e）{
如果（e.origin！==“http：//localhost：8383”）
返回;
做点什么..！
}
为什么需要跨域？
跨域解决方案向用户提供不同的信息，而无需在多个级别上披露整个机密数据，这可能会使其容易受到意外泄露。
在潜在程序缺陷的 Lightroom 中，破坏危险是主观确认的。
跨域解决方案向需要信息的关键用户提供信息，同时阻止未经授权的用户访问机密数据；同时保护网络免受恶意或无意的数据损坏。
Cross Domain Solutions 使得战斗中联盟伙伴之间数据分配的过程变得极其简化。