window.postMessage VS window.chrome.webview.postMessage

Question

window.postMessage与window.chrome.webview.postMessage有何不同

我在WebView2的上下文中使用它(在.NET/WPF应用程序中)。我们正在WebView2中加载一个第三方网页。该网页使用我们需要捕获的特定数据来触发window.postMessage。根据documentation，WebView2会在加载的页面触发WebMessageReceived时引发window.chrome.webview.postMessage事件，这是正确的。另一方面，它似乎并不尊重window.postMessage (没有WebMessageReceived被触发)。

这是两个不同的API吗？哪个是标准的(就像在HTML5中一样)？既然我不能要求第三方网站更改其代码以使用window.chrome.webview.postMessage，我如何在我的.NET应用程序中捕获window.postMessage事件。

Answer 1

chrome.webview.postMessage method是特定于WebView2的JavaScript函数，它允许web内容通过CoreWebView2.WebMessageReceived事件向主机应用程序发送消息。它仿照HTML语言标准的window.postMessage DOM，但除了chrome.webview.postMessage向主机应用程序发布消息和window.postMessage向其他窗口发布消息之外，还有几个方面的不同：

window.postMessage(message, targetOrigin, [transfer]);
window.chrome.webview.postMessage(message);

差异

消息参数

它们都接受一个message对象作为它们的第一个参数，通过值传递给目标。消息由window.postMessage使用Structured Clone Algorithm (SCA)序列化，而window.chrome.webview.postMessage使用JSON序列化。两者之间最大的区别是SCA可以处理消息对象中的引用循环，而JSON将抛出。

原点参数

window.postMessage方法用于将消息发布到其他窗口，并且存在这样的风险:该窗口可能不在正确的来源上，并且不允许接收消息数据。origin参数允许调用方指定允许接收数据的源。

在WebView2的情况下，没有这样的参数，因为消息被发送到固有受信任的主机应用程序(它是受信任的，因为它是web内容的主机，并且能够检查用户数据文件夹、注入脚本等)。

传输参数

window.postMessage的可选传输参数允许将特定类型的JavaScript对象移动到目标窗口。这包括消息端口和大型数据数组。

WebView2目前不支持此方案，同样，chrome.webview.postMessage也没有此参数。

转发到chrome.webview.postMessage

如果想要将window.postMessage消息发送到主机应用程序，最简单的方法是订阅目标窗口的window.onmessage事件

window.addEventListener("message", e => {
    if (shouldForwardToWebView2(e)) {
        window.chrome.webview.postMessage(e.data);
    }
});

如果不能订阅该事件，还可以填充window.postMessage方法：

const originalPostMessage = window.postMessage.bind(window);
window.postMessage = function (message, origin, transfer) {
    if (shouldForwardToWebView2(message)) {
        window.chrome.webview.postMessage(message);
    }
    originalPostMessage(message, origin, transfer);
};

像这样填充方法更加棘手，因为此填充代码中的任何错误都可能破坏任何尝试使用postMessage的操作，这与事件处理程序不同，在事件处理程序中，失败的范围仅限于该事件处理程序。

在任何一种情况下，您都可能希望过滤转发到WebView2的消息，以确保您不会发送来自其他库或来源的不相关消息，您不希望发送数据以限制攻击面。

此外，只有当您希望转发到WebView2的消息不依赖于transfer时，这才会起作用。