[Android] Modal: FLAG_SECURE not respected in modal dialog

[mateoguzmana]

Summary:

Fixes #38537

Setting WindowManager.LayoutParams.FLAG_SECURE in the window flags is not respected in the Android Modal component, causing security issues with screenshots or screen recordings as the content in the modal is visible. The flag works correctly in the rest of the components, see the videos in the linked issue.

This PR addresses that by checking whether this flag is set in the current activity and then setting it in the dialog when creating a new one in the ReactModalHostView.

Changelog:

[ANDROID][FIXED] - FLAG_SECURE not respected in Modal dialog

Test Plan:

To test this, you need a physical device as with the emulator the flags don't seem to be respected either.

The easiest way to test this in code is by setting the flags in the main activity. You can do so by adding this code snippet:

onCreate in RNTesterApplication.kt

override fun onCreate() {
    ReactFontManager.getInstance().addCustomFont(this, "Rubik", R.font.rubik)
    super.onCreate()

    ...

    registerActivityLifecycleCallbacks(
            object : ActivityLifecycleCallbacks {
              override fun onActivityCreated(activity: Activity, savedInstanceState: Bundle?) {
                activity.window.setFlags(
                        WindowManager.LayoutParams.FLAG_SECURE,
                        WindowManager.LayoutParams.FLAG_SECURE
                )
              }

              override fun onActivityStarted(activity: Activity) {}
              override fun onActivityResumed(activity: Activity) {}
              override fun onActivityPaused(activity: Activity) {}
              override fun onActivityStopped(activity: Activity) {}
              override fun onActivitySaveInstanceState(activity: Activity, outState: Bundle) {}
              override fun onActivityDestroyed(activity: Activity) {}
            }
    )
  }

Then, you can render a simple modal component:

RNTesterPlayground.js

function Playground() {
  const [modalVisible, setModalVisible] = React.useState(false);

  return (
    <>
      <Modal
        visible={modalVisible}
        testID="playground-modal">
        <Text testID="inner-text-test-id">Hello World!</Text>
        <Button title="Close Modal" onPress={() => setModalVisible(false)} />
      </Modal>

      <Button
        title="Open Modal"
        onPress={() => {
          setModalVisible(true);
        }}
      />
    </>
  );
}

You can then try to record the screen or take screenshots. You will notice that before opening the modal, you won't be able to see anything in the recording, but when opening the modal, the content is visible.

I've tried my best to record the before and after the fix, but as the screen recordings will mostly show a black screen, you have to forward a bit in both videos to see the difference.

Before the fix (notice the blank screen and then content visible)

Before.mp4

After the fix (notice all the screen recording is a black screen)

WhatsApp.Video.2024-12-17.at.22.36.45.mp4

[facebook-github-bot]

@alanleedev has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.