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

Posted 2023-05-07

技术标签:

【中文标题】如何在 react-native-webview 中启用安全上下文？【英文标题】：How to enable secure context in 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

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

【问题讨论】：

我们正在寻找相同的答案。运气好了吗？ 【参考方案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 />