如何在 react-native-webview 中启用安全上下文？答案

【问题标题】：How to enable secure context in react-native-webview?如何在 react-native-webview 中启用安全上下文？
【发布时间】：2021-10-19 00:04:35
【问题描述】：

我使用 react native webview 组件在移动应用程序上加载我的登录屏幕。随着 iOS 15 中最新的 Safari on iOS 更新，需要在安全上下文中加载 webview。我使用https://<hostname> 加载webview。

但是当我尝试使用window.crypto.subtle.generateKey 函数时，该方法会抛出一个异常说undefined is not an object (evaluating 'a.subtle()[f]')

除了使用 https 会话之外，还有什么方法可以在安全的上下文中加载 web 视图？

来自 Apple 团队的链接：https://trac.webkit.org/changeset/279628/webkit

任何帮助表示赞赏。谢谢。

【问题讨论】：

我们正在寻找相同的答案。运气好了吗？

标签： android ios react-native webview

【解决方案1】：

我遇到了同样的问题。

我通过将 react-native-webview-crypto 导入我的 monorepo 并像这样在本地修补它来修复它：

+++ b/packages/react-native-webview-crypto/index.js
@@ -1,6 +1,7 @@
 const React = require("react");
 const { StyleSheet, View, Platform } = require("react-native");
 const { WebView } = require("react-native-webview");
+const { MainBundlePath } = require("react-native-fs")
 const { MainWorker, webViewWorkerString } = require("webview-crypto");
 
 const styles = StyleSheet.create({
@@ -137,7 +138,7 @@ class PolyfillCrypto extends React.Component {
     const code = `((function () {${webViewWorkerString};${internalLibrary}})())`;
     const source = Platform.select({
       android: { source: { uri } },
-      ios: undefined,
+      ios: { source: { uri: `file://${MainBundlePath}/blank.html` }},
     });

另外我添加了blank.html 文件内容：

<html />

我在 Xcode 中的资源。

所以基本上在这个改变之后，它在 iOS 上做的事情和过去在 Android 上做的一样。

【讨论】：