React本机: Android WebView返回一些网站和一些设备的空白屏幕

Question

我有一个工作的反应-本机应用程序相当几个月与WebView直接指向一个HTTPS网站。这一切都很好，但是突然之间，WebView开始返回一个空白页面，而不是HTTPS站点。

通过调试，我发现：

• 这只发生在我的设备上(我的用户中没有人报告过这个问题)。
• 一些网站返回空白屏幕，而有些网站则正确呈现。(例如，google.com将呈现，amazon.com将返回一个空白屏幕)
• 从在chrome检查器中调试WebView到这些站点之一(例如amazon.com)，似乎每次GET调用都在1秒左右之后调用被取消。
• 这些站点在我的android-chrome浏览器上被正确地调用、打开和呈现.

在我的设备中，似乎有些东西阻塞了WebViews中的一些网站，可能是设置，或者是应用程序。会是什么？

我使用LG G4，在19和23上试用。

Answer 1

这必须是由于开发模式中的私有SSL错误所致。如果您将在调试模式中看到控制台日志，那么您可以看到一行代码为Failed to validate the certificate chain, error: java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.。

如果是，那么只需添加一个新的道具，这在文档中的任何地方都没有提到。支柱是ignoreSslError={true}，这将迫使WebView加载网站，尽管存在SSL错误。

前<WebView ignoreSslError={true} source={{uri: 'https://www.google.com'}} />

来源：https://github.com/facebook/react-native/pull/9680

Answer 2

这就是对我有用的东西。

• 首先，使用以下工具检查证书是否有问题：https://www.digicert.com/help/

对我来说，很明显我的证书是不可信的。在我的例子中，这个问题可以通过在配置错误的服务器本身上添加丢失的中间证书来解决。不幸的是，由于我没有所需的访问权限，我决定看看是否有可能实现一个解决方案。

• 最后，我添加了一个网络安全配置文件，并按照这里的指示配置了一个自定义CA：https://developer.android.com/training/articles/security-config

以下是详细信息：

• 创建了必要的文件夹后，我的路径看起来像/project_root/android/app/src/main/res/xml/network_security_config.xml。

以下是文件的内容：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config>
        <domain includeSubdomains="true">example.com</domain>
        <trust-anchors>
            <certificates src="@raw/my_ca"/>
        </trust-anchors>
    </domain-config>
</network-security-config>

我在上面的代码示例中替换了"example.com“，我的问题域。

• 接下来，我在web浏览器中打开了问题域，并将证书下载到我的机器上。

在Mac上的Chrome中，单击域旁边的锁图标，然后在“证书”上将证书图标拖到本地目录中。这将传输一个DER编码的二进制文件。

在Windows上的Chrome中，您单击域旁边的锁图标，然后单击“证书”，然后单击“详细信息”选项卡，最后单击右下角的“复制到文件”。导出时选择DER版本。

• 接下来，我发现我需要使用OpenSSL。

检查它是否带有凹版。

openssl version

如果失败，您可以在Mac上安装

brew install openssl

用于Windows的说明如下：https://slproweb.com/products/Win32OpenSSL.html

• 在OpenSSL就绪之后，在终端/CLI窗口中，我将文件转换为PEM

openssl x509 -in downloaded_cert.cer -inform DER -out my_ca.pem -outform PEM

• 在创建了必要的文件夹之后，我将生成的my_ca.pem移动到了my_ca.pem。
• 最后，在/project_root/android/app/src/main/AndroidManifest.xml中，我向应用程序元素添加了类似于以下内容的android:networkSecurityConfig="@xml/network_security_config“：

<?xml version="1.0" encoding="utf-8"?>
<manifest ... >
    <application android:networkSecurityConfig="@xml/network_security_config"
                    ... >
        ...
    </application>
</manifest>

Answer 3

哦，是的，它运行得很成功。

<View style={{ height: 150, width: 150,overflow:'hidden' }}>
            <WebView
              source={{ uri: 'https://github.com/facebook/react-native' }}
              scalesPageToFit={true}
            />
</View>