React-Native-Webview中解决iOS HTTP链接无法打开的问题

问题背景

在开发基于React-Native-Webview的移动网页浏览器应用时，开发者遇到了一个常见但棘手的问题：在iOS设备上无法加载HTTP协议的网站链接。当尝试访问HTTP链接时，系统会返回NSURLErrorDomain错误，提示"App Transport Security policy requires the use of a secure connection"。

问题根源分析

这个问题的根本原因是iOS系统自iOS 9开始引入的App Transport Security (ATS)安全机制。ATS要求所有网络连接必须使用HTTPS协议，以确保数据传输的安全性。当应用尝试建立不安全的HTTP连接时，系统会主动阻止这种连接行为。

解决方案探索

方案一：针对特定域名配置例外

开发者最初尝试的解决方案是在Info.plist文件中为特定域名配置ATS例外：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>example.com</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
            <key>NSIncludesSubdomains</key>
            <true/>
        </dict>
    </dict>
</dict>

这种方案适用于已知的、特定的HTTP域名，但对于一个通用的网页浏览器应用来说并不实用，因为无法预知用户可能访问的所有HTTP网站。

方案二：完全禁用ATS安全策略

开发者随后尝试了完全禁用ATS的策略：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

理论上，这个配置应该允许应用加载任意HTTP内容。然而，在实际测试中（包括iOS 17和18设备，以及release和debug模式），这个方案并未奏效。

深入解决方案

经过进一步研究和社区反馈，发现问题可能与react-native-webview的特定版本有关。在13.12.4版本中存在此问题，而升级到13.12.5或更高版本可以解决。

推荐解决方案

1. 升级react-native-webview版本： 确保使用13.12.5或更高版本的react-native-webview库，这是最直接的解决方案。

2. 结合ATS配置： 即使升级了库版本，仍然建议保留以下ATS配置以确保兼容性：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoadsInWebContent</key>
    <true/>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

这个配置比完全禁用ATS更为精细，它允许Web视图内容加载任意HTTP内容，同时保持应用其他部分的ATS安全限制。

实施建议

1. 首先检查并升级react-native-webview到最新稳定版本
2. 仔细配置Info.plist文件，确保ATS设置正确
3. 在真实设备上进行全面测试，包括不同iOS版本
4. 考虑向用户显示安全警告，当访问HTTP网站时提醒他们连接不安全

安全考量

虽然解决技术问题是必要的，但开发者应该意识到允许HTTP连接带来的安全风险。建议：

• 在应用中明显标识HTTP连接为不安全
• 考虑默认阻止HTTP表单提交等敏感操作
• 记录用户访问的HTTP网站，以便后续分析

通过以上措施，可以在保证功能完整性的同时，尽可能降低安全风险。