react-native-screenguard icon indicating copy to clipboard operation
react-native-screenguard copied to clipboard

⚠️ Potential security issue: FLAG_SECURE not effective in Modal components (RN < 0.78, Android 15)

Open levepic opened this issue 7 months ago • 0 comments

Description of the problem:

On React Native versions prior to 0.78, when using the Modal component on Android 15 devices (and possibly Android 14 in some cases), the FLAG_SECURE provided by react-native-screenguard is not properly applied to the Modal window.

As a result, even though the main Activity is protected against screenshots and screen recordings, any content rendered inside a Modal is not protected.

Developers may wrongly assume that sensitive user content (e.g. gallery, private images, personal data) is safe inside Modal views — but actually it's not.

Root cause:

Prior to React Native 0.78, Modals are often rendered as separate Android windows, and the FLAG_SECURE needs to be applied explicitly to each window individually.

react-native-screenguard currently applies FLAG_SECURE only to the main window.

In RN >= 0.78 (new architecture, Fabric-based Modals), this issue is probably mitigated (not tested!)

Security impact:

On affected versions, sensitive user data may be unintentionally exposed via screenshots or screen recordings when displayed inside Modals.

Developers should be warned that enabling Screenguard does not fully protect content inside Modal components if they are targeting Android 15 and RN < 0.78.

Suggestion:

Add a warning or section in the documentation / README explicitly informing developers of this edge case.

Optionally: consider extending the library to patch FLAG_SECURE onto additional windows where possible, or provide guidance for per-window FLAG_SECURE application.

💡Suggested workaround / hack: You can simply wrap your existing react-native-modal component inside a Portal (using react-native-portalize) and set coverScreen={false}.

No changes are needed to your existing Modal configuration, animation or state management — just wrap it inside a Portal.

This approach allows you to achieve the same full-screen visual behavior as coverScreen={true} (i.e. rendering above navigation headers, etc.) - which is often required when using React Navigation - without actually creating a new native Window.

By doing this, the Modal content stays inside the main Activity window, where FLAG_SECURE remains effective and fully protects sensitive content.

Tested environment:

Android 15 emulator & real device

React Native 0.74

react-native-screenguard latest version

Thank you for your great work - this is just to help improve security awareness for others!

levepic avatar May 31 '25 12:05 levepic