chore(IT Wallet): [SIW-1945] Disable screenshots and recordings on ITW screens #6595

gispada · 2025-01-09T16:13:33Z

Short description

This PR prevents screenshots and screen recordings in several IT Wallet screens. In order to work on iOS, react-native-flag-secure-android (currently used) has been changed with react-native-screenshot-prevent.

The implementation is the following:

On Android it leverages the FLAG_SECURE option;
On iOS it creates a hidden secure text field, that renders the screen blank.

List of changes proposed in this pull request

Removed react-native-flag-secure-android
Installed react-native-screenshot-prevent
Added ITW routes to screenBlackList

How to test

Ensure it is not possible to take screenshots or record the content of the screen in the following:

CIE pin screen during identification
Trust issuer screen
Credential preview and detail (including trustmark)

Be sure to disable debug mode, because isAllowedSnapshotCurrentScreen always returns true in debug.

Note

iOS does not seem to offer a direct API to disable screenshots. react-native-screenshot-prevent makes use of a workaround solution, so please test it thoroughly on iOS.

github-actions · 2025-01-09T16:13:45Z

Jira Pull Request Link

This Pull Request refers to the following Jira issue SIW-1945

LazyAfternoons

I suggest a quick search through the app files to remove any react-native-flag-secure-android leftovers:

Manual linking in settings.gradle;
Entry in patches.md and the related patch;
A type definition under ts/@types/react-native-flag-secure-android.

mastro993 · 2025-01-09T17:57:38Z

On iOS, is still possibile to see the screen content when navigating back. I think we should improve the FlagSecureComponent, allowing the component to know if the screen is completely off the screen.

IMG_0088.MP4

mastro993 · 2025-01-09T20:01:42Z

On iOS, is still possibile to see the screen content when navigating back. I think we should improve the FlagSecureComponent, allowing the component to know if the screen is completely off the screen.

IMG_0088.MP4

This happens because the route changes before the screen is correctly unmounted. To solve this we need to rethink how we handle screen capture prevention.
Instead of using a "global" component, we should handle this on a per-component basis, maybe with an hook.

A great example is how the Expo team implemented it. Take a look here: https://github.com/expo/expo/blob/main/packages/expo-screen-capture/src/ScreenCapture.ts#L84

When a component which uses the usePreventScreenCapture hook is mounted, they add a tag to a list. When the component is unmounted, they remove the tag.
If the list contains at least one item, screen recording prevention is enabled. If the list is empty, it is disabled.

I find this approach very simple and effective. I think we should implement something similar!

What do you think?

gispada · 2025-01-10T10:34:59Z

Good catch @mastro993! I'll work on something like the Expo solution.

codecov · 2025-01-10T10:50:08Z

Codecov Report

Attention: Patch coverage is 70.37037% with 8 lines in your changes missing coverage. Please review.

Project coverage is 49.31%. Comparing base (f2659cf) to head (bb0160e).
Report is 10 commits behind head on master.

Files with missing lines	Patch %	Lines
...let/identification/screens/cie/ItwCiePinScreen.tsx	0.00%	1 Missing ⚠️
...nce/screens/ItwIssuanceCredentialPreviewScreen.tsx	0.00%	1 Missing ⚠️
...eens/ItwPresentationCredentialAttachmentScreen.tsx	0.00%	1 Missing ⚠️
...ion/screens/ItwPresentationCredentialCardModal.tsx	0.00%	1 Missing ⚠️
.../screens/ItwPresentationCredentialDetailScreen.tsx	0.00%	1 Missing ⚠️
...reens/ItwPresentationCredentialFiscalCodeModal.tsx	0.00%	1 Missing ⚠️
...trustmark/screens/ItwCredentialTrustmarkScreen.tsx	0.00%	1 Missing ⚠️
...g/screens/PaymentsOnboardingSelectMethodScreen.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #6595   +/-   ##
=======================================
  Coverage   49.30%   49.31%           
=======================================
  Files        1565     1565           
  Lines       32228    32252   +24     
  Branches     7338     7291   -47     
=======================================
+ Hits        15891    15905   +14     
- Misses      16299    16308    +9     
- Partials       38       39    +1

Files with missing lines	Coverage Δ
...screens/ItwIssuanceCredentialTrustIssuerScreen.tsx	`36.11% <100.00%> (+1.82%)`	⬆️
ts/utils/hooks/usePreventScreenCapture.ts	`100.00% <100.00%> (ø)`
...let/identification/screens/cie/ItwCiePinScreen.tsx	`14.70% <0.00%> (-0.45%)`	⬇️
...nce/screens/ItwIssuanceCredentialPreviewScreen.tsx	`9.37% <0.00%> (-0.31%)`	⬇️
...eens/ItwPresentationCredentialAttachmentScreen.tsx	`12.12% <0.00%> (-0.38%)`	⬇️
...ion/screens/ItwPresentationCredentialCardModal.tsx	`20.00% <0.00%> (-1.43%)`	⬇️
.../screens/ItwPresentationCredentialDetailScreen.tsx	`9.37% <0.00%> (-0.31%)`	⬇️
...reens/ItwPresentationCredentialFiscalCodeModal.tsx	`38.09% <0.00%> (-1.91%)`	⬇️
...trustmark/screens/ItwCredentialTrustmarkScreen.tsx	`20.00% <0.00%> (-5.00%)`	⬇️
...g/screens/PaymentsOnboardingSelectMethodScreen.tsx	`4.76% <0.00%> (-0.24%)`	⬇️

... and 2 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f2659cf...bb0160e. Read the comment docs.

mastro993 · 2025-01-11T16:36:36Z

ts/utils/hooks/usePreventScreenCapture.ts

+ *
+ * @param key An optional key to prevent conflicts when using multiple instances of this hook at the same time.
+ */
+export function usePreventScreenCapture(key = "default") {


Rather than using "default" as the default value, could we use an autogenerated unique ID instead? This would ensure that each component has an unique key.

Addressed in 38bcad1.

mastro993 · 2025-01-11T16:37:35Z

ts/utils/hooks/usePreventScreenCapture.ts

+      return () => {
+        // Here we wait a little after the blur event for navigation transition animations.
+        // eslint-disable-next-line functional/immutable-data
+        timeoutRef.current = setTimeout(() => allowScreenCapture(key), 500);


If we use an useEffect we can avoid adding this timeout. The component is unmounted after the transition. What do you think?

Unfortunately it is not unmounted in a stack navigator: the screen capture would still be disabled in the next screens, because the one with this hook is still mounted underneath.

mastro993

LGTM. Tested on iOS and everything works as expected

gispada added 3 commits January 9, 2025 09:54

chore: add react-native-screenshot-prevent to disable screenshots on iOS

e0c06ea

refactor: use react-native-screenshot-prevent for iOS and Android

a59ce1d

chore: add more ITW routes to screenshot blacklist

f1ffc55

gispada requested review from ChrisMattew, freddi301 and a team as code owners January 9, 2025 16:13

gispada changed the title ~~Siw 1945 itw prevent screenshots~~ chore(IT Wallet): [SIW-1945] Disable screenshots and recordings on ITW screens Jan 9, 2025

LazyAfternoons reviewed Jan 9, 2025

View reviewed changes

gispada added 2 commits January 10, 2025 11:22

chore: remove references to react-native-flag-secure-android

a999776

Merge branch 'master' into SIW-1945-itw-prevent-screenshots

d7236be

gispada temporarily deployed to dev January 10, 2025 10:43 — with GitHub Actions Inactive

gispada added the IT Wallet label Jan 10, 2025

refactor: create usePreventScreenCapture, remove FlagSecure component

442b77d

gispada temporarily deployed to dev January 10, 2025 11:29 — with GitHub Actions Inactive

mastro993 reviewed Jan 11, 2025

View reviewed changes

gispada added 2 commits January 13, 2025 10:59

Merge branch 'master' into SIW-1945-itw-prevent-screenshots

b4307ca

refactor: use autogenerated ID for default

38bcad1

gispada temporarily deployed to dev January 13, 2025 10:31 — with GitHub Actions Inactive

gispada had a problem deploying to dev January 13, 2025 10:31 — with GitHub Actions Error

gispada temporarily deployed to dev January 13, 2025 10:31 — with GitHub Actions Inactive

gispada had a problem deploying to dev January 13, 2025 10:31 — with GitHub Actions Failure

chore: fix tests

bb0160e

gispada temporarily deployed to dev January 13, 2025 11:08 — with GitHub Actions Inactive

mastro993 approved these changes Jan 13, 2025

View reviewed changes

gispada added this pull request to the merge queue Jan 15, 2025

Merged via the queue into master with commit 9382eeb Jan 15, 2025
21 checks passed

gispada deleted the SIW-1945-itw-prevent-screenshots branch January 15, 2025 08:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(IT Wallet): [SIW-1945] Disable screenshots and recordings on ITW screens #6595

chore(IT Wallet): [SIW-1945] Disable screenshots and recordings on ITW screens #6595

gispada commented Jan 9, 2025 •

edited

Loading

github-actions bot commented Jan 9, 2025 •

edited

Loading

LazyAfternoons left a comment

mastro993 commented Jan 9, 2025

mastro993 commented Jan 9, 2025 •

edited

Loading

gispada commented Jan 10, 2025

codecov bot commented Jan 10, 2025 •

edited

Loading

mastro993 Jan 11, 2025

gispada Jan 13, 2025

mastro993 Jan 11, 2025

gispada Jan 13, 2025

mastro993 left a comment

chore(IT Wallet): [SIW-1945] Disable screenshots and recordings on ITW screens #6595

chore(IT Wallet): [SIW-1945] Disable screenshots and recordings on ITW screens #6595

Conversation

gispada commented Jan 9, 2025 • edited Loading

Short description

List of changes proposed in this pull request

How to test

github-actions bot commented Jan 9, 2025 • edited Loading

Jira Pull Request Link

LazyAfternoons left a comment

Choose a reason for hiding this comment

mastro993 commented Jan 9, 2025

mastro993 commented Jan 9, 2025 • edited Loading

gispada commented Jan 10, 2025

codecov bot commented Jan 10, 2025 • edited Loading

Codecov Report

mastro993 Jan 11, 2025

Choose a reason for hiding this comment

gispada Jan 13, 2025

Choose a reason for hiding this comment

mastro993 Jan 11, 2025

Choose a reason for hiding this comment

gispada Jan 13, 2025

Choose a reason for hiding this comment

mastro993 left a comment

Choose a reason for hiding this comment

gispada commented Jan 9, 2025 •

edited

Loading

github-actions bot commented Jan 9, 2025 •

edited

Loading

mastro993 commented Jan 9, 2025 •

edited

Loading

codecov bot commented Jan 10, 2025 •

edited

Loading