React Native Webview安全问题解决办法

威胁描述

威胁描述 根据CVE披露的WebView远程代码执行漏洞信息（CVE-2012-663、CVE-2014-7224），Android系统中存在一共三个有远程代码执行漏洞的隐藏接口。分别是位于android/webkit/webview中的“searchBoxJavaBridge”接口、android/webkit/AccessibilityInjector.java中的“accessibility”接口和“accessibilityTraversal”接口。调用此三个接口的APP在开启辅助功能选项中第三方服务的Android系统上将面临远程代码执行漏洞。

修改源码

/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java

在这个文件中搜索removeJavascriptInterface

把

@SuppressLint("AddJavascriptInterface")
    public void setMessagingEnabled(boolean enabled) {
      if (messagingEnabled == enabled) {
        return;
      }

      messagingEnabled = enabled;

      if (enabled) {
        addJavascriptInterface(createRNCWebViewBridge(this), JAVASCRIPT_INTERFACE);
      } else {
        removeJavascriptInterface(JAVASCRIPT_INTERFACE);
      }
    }

修改成：

@SuppressLint("AddJavascriptInterface")
    public void setMessagingEnabled(boolean enabled) {
      	removeJavascriptInterface("searchBoxJavaBridge_");
		removeJavascriptInterface("accessibility");
		removeJavascriptInterface("accessibilityTraversal");
    }

带来了更多的问题

removeJavascriptInterface(“searchBoxJavaBridge_”); removeJavascriptInterface(“accessibility”); removeJavascriptInterface(“accessibilityTraversal”); 安全问题是成功解决了，但是现在带来的一堆新的问题了。

React Native WebView这个组件一些常用功能无法正常使用了。 简单的来说，因为禁用了javascript交互的一些功能。RN无法控制Webview中的内容了。导致了以下的问题：

1. RN端无法与WebView中的H5页面正常交互了。这样导致Livebos中的附件下载，或者一些操作事件，APP中无法监听到了。
2. 影响当前APP的登录逻辑。目前我们APP的登录依赖这些JavascriptInterface。如果没有这个接口，我们必须把登录逻辑大改。需要曲线救国了。

shell配合sed实现整段文本替换实例

https://blog.csdn.net/lxyoucan/article/details/123582294

写本文的原始需求： 需要修改一个非常长的Java文件，以下代码块

 @SuppressLint("AddJavascriptInterface")
    public void setMessagingEnabled(boolean enabled) {
      if (messagingEnabled == enabled) {
        return;
      }

      messagingEnabled = enabled;

      if (enabled) {
        addJavascriptInterface(createRNCWebViewBridge(this), JAVASCRIPT_INTERFACE);
      } else {
        removeJavascriptInterface(JAVASCRIPT_INTERFACE);
      }
    }

替换成：

    @SuppressLint("AddJavascriptInterface")
    public void setMessagingEnabled(boolean enabled) {//webview removeJavascriptInterface
        removeJavascriptInterface("searchBoxJavaBridge_");
        removeJavascriptInterface(accessibility);
        removeJavascriptInterface(accessibilityTraversal);
    }

原本我想使用Java代码代码来实现替换动作，或者使用lua脚本来实现这个事情。 考虑到这两种方式都是需要安装运行环境的。所以我就想能不能使用兼容性相对比较好的shell来实现。 就想到使用sed命令来实现了。 最终功能已经成功实现了，代码写的比较笨拙，仅供大家参考：

#!/bin/bash
#自动修改React Native Webview中的代码
#editFilePath='input.txt1'
editFilePath='../node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java
'
#获取要修改的行号
setMessagingEnabledLine=$(sed -n '/public void setMessagingEnabled(boolean enabled) {$/=' ${editFilePath})
echo "查询关键字的位置:${setMessagingEnabledLine}"
if [[ "$setMessagingEnabledLine" == '' ]]; then
    echo "没有找到关键字，程序将要退出"
    echo "可能已经执行过 自动修改脚本了"
    exit
fi

#要修改的开始行号
startLine="$((setMessagingEnabledLine+1))"
#要修改的结束行号
endLine="$((startLine+10))"
index1="$((startLine-1))"
index2="$((startLine))"
index3="$((startLine+1))"
#删除方法体的内容
sed -i "${startLine},${endLine}d" ${editFilePath}
#增加第一行代码___用于格式化
sed -i "${index1}a________removeJavascriptInterface(\"searchBoxJavaBridge_\");" ${editFilePath} 
#增加第二行代码
sed -i "${index2}a________removeJavascriptInterface("accessibility");" ${editFilePath}
#增加第三行代码
sed -i "${index3}a________removeJavascriptInterface("accessibilityTraversal");"  ${editFilePath}
#用空格格式化一下
sed -i 's/________/        /' ${editFilePath}
#标记位做个标记访问重复处理
sed -i 's/public void setMessagingEnabled(boolean enabled) {$/public void setMessagingEnabled(boolean enabled) {\/\/webview removeJavascriptInterface/' ${editFilePath}
cat ${editFilePath}

参考

https://developpaper.com/android-webview-high-risk-problem-solving/