Added camera access permission to the safe apps iframe

[DaniSomoza]

What it solves

As a part of this ticket to add Camera support on WalletConnect Safe App we need to add special policy to the safe apps iframe.

More info:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attributes
https://developer.mozilla.org/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy#allowlist
https://blog.addpipe.com/camera-and-microphone-access-in-cross-oirigin-iframes-with-feature-policy/

How this PR fixes it

added allow={'camera'} special policy to the safe apps iframe.

        <StyledIframe
          isLoading={appIsLoading}
          frameBorder="0"
          id={`iframe-${appUrl}`}
          ref={iframeRef}
          src={appUrl}
          title={safeApp.name}
          onLoad={onIframeLoad}
          allow={'camera'}
        />
      </StyledCard>

The allowlist special policy is no needed because Walletconnect Safe App is deployed in the same origin that the Safe. For more details see it in the allowlist docs

Safe origin: https://gnosis-safe.io/app/welcome
WalletConnect Safe App origin: https://apps.gnosis-safe.io/wallet-connect

Screenshots

[github-actions]

CLA Assistant Lite All Contributors have signed the CLA.

[github-actions]

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	1	N/A

• Result: ✅ success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[coveralls]

Pull Request Test Coverage Report for Build 1708658932

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 32.485%

---

Totals
Change from base Build 1708166281:	0.0%
Covered Lines:	3163
Relevant Lines:	8685

---

💛 - Coveralls

[github-actions]

Deployment links

🟠 Safe Rinkeby	⚪ Safe Mainnet	🟣 Safe Polygon	🟡 Safe BSC	⚫ Safe Arbitrum	🟢 Safe xDai

[github-actions]

E2E Tests Failed
Check the results here: https://github.com/gnosis/safe-react-e2e-tests/actions/runs/1708708068

Failed tests:

• ❌ Add an existing safe Add an existing safe
• ❌ Safe Apps List Safe Apps List
• ❌ Read-only transaction creation and review Read-only transaction creation and review
• ❌ Safe Balances Safe Balances

[DaniSomoza]

This is no related with this PR

[iamacook]

You need not use braces, e.g. allow='camera'.

[DaniSomoza]

good catch! :D

done!

[katspaugh]

📸

[DaniSomoza]

Hi guys it seems that the AppList.test.tsx was failing. It was an issue in the getSafeApps mock call. A real http request was being performed during tests running.

And also I found a minor bug in the @gnosis.pm/safe-react-gateway-sdk types:

export type SafeAppsResponse = [SafeAppData]

but it should be:

export type SafeAppsResponse = SafeAppData[]

With the current type we only accept arrays with 1 item. I will create a PR in the safe-react-gateway-sdk to fix that.

CC: @katspaugh @iamacook

[katspaugh]

Thanks Dani!