如何在React-Native中解决安卓应用TapJacking安全问题

你之前的方案未生效的核心原因是仅为Splash页的根视图配置了防触摸遮挡属性，没有覆盖应用所有Activity、以及RN JS侧渲染的所有可交互视图，规则未全局生效，完整修复步骤如下：

1. 安卓原生侧全局配置 #

• 先通过主题配置给所有Activity默认添加属性，打开android/app/src/main/res/values/styles.xml，在你的应用主主题下添加如下配置：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <!-- 保留已有其他配置 -->
  <item name="android:filterTouchesWhenObscured">true</item>
</style>

• 给所有原生Activity（包括MainActivity、SplashActivity及自定义的其他原生页面）的onCreate方法添加如下代码，配置窗口级拦截规则：

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  // 保留已有初始化逻辑
  getWindow().addFlags(WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH);
  // 敏感页面可额外添加以下配置，同时防止截屏录屏和覆盖层点击
  // getWindow().setFlags(WindowManager.LayoutParams.FLAG_SECURE, WindowManager.LayoutParams.FLAG_SECURE);
}

2. RN JS侧全局配置 #

RN渲染的视图默认不会继承原生根布局的防遮挡属性，需要在应用入口全局配置所有可交互组件的默认属性，在你的App.js/index.js入口文件最顶部添加如下代码：

import { View, Pressable, TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback } from 'react-native';

// 全局给所有视图和可点击组件添加防触摸遮挡属性（安卓端生效）
const components = [View, Pressable, TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback];
components.forEach(component => {
  component.defaultProps = component.defaultProps || {};
  component.defaultProps.filterTouchesWhenObscured = true;
});

3. 敏感场景强化配置 #

涉及登录、支付、授权等核心敏感操作的页面，除上述全局配置外，可在页面挂载时调用原生方法给当前窗口添加FLAG_SECURE标识，彻底阻断所有覆盖层的交互能力，页面销毁时清除该标识即可。

效果验证 #

使用带悬浮窗权限的应用在你的应用上层显示悬浮遮罩，点击应用内的可交互控件，若点击无响应即为拦截规则生效，TapJacking风险已修复。

内容的提问来源于stack exchange，提问作者Debug_logger