Added sandbox attribute to Safe App iframe

[DaniSomoza]

What it solves

Resolves #1246

How this PR fixes it

Added a sandbox attribute to the Safe Apps iframe in the past

We discussed in this Problem Statement the possibility of adding the sandbox attribute in the iframe.

const IFRAME_SANDBOX_ALLOWED_FEATURES = 'allow-scripts allow-same-origin allow-popups allow-forms allow-downloads allow-orientation-lock'

Allowed features

• allow-scripts : Lets the resource run scripts (needed for all the Safe Apps)
• allow-same-origin : Needed to the same-origin policy (Most of Safe App access to data storage/cookies and some JavaScript APIs).
• allow-forms : Allows Safe Apps to submit forms. Example: Transaction Builder Safe App
• allow-orientation-lock : Lets the resource lock the screen orientation.
• allow-popups : Most of Safe Apps, to allow new tab redirections (Etherscan links, docs links...)
• allow-popups-to-escape-sandbox: Allows a sandboxed document to open new windows without forcing the sandboxing flags upon them (needed for some redirections like twitter see:)

Restrictions

You can not access to the parent Safe localStorage directly from a Safe App:

  console.log('main Safe frame localstorage: ', window.parent.localStorage)

Preventing top-level navigation:

How to test it

1. Go to this preview branch.
2. Add this URL as a Custom Safe App:

    https%3A%2F%2Ffcbii9.csb.app
   

3. Click on Scam link.
4. Expected Result: No top navigation is performed

Screenshots

[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	0	N/A

• Result: ✅ success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[github-actions]

Branch preview

https://pr1252--webcore.review-react-br.5afe.dev

[katspaugh]

👍

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	ce9e8c9
Status:	✅  Deploy successful!
Preview URL:	https://ef9a017b.web-core.pages.dev
Branch Preview URL:	https://feature-safe-app-sandboxed-i.web-core.pages.dev

View logs

[DaniSomoza]

@JagoFigueroa found that some links are not working (like twitter links)

see this issue

To address this issue I added this allow-popups-to-escape-sandbox that allows to a sandboxed document to open new windows without forcing the sandboxing flags upon them.

see allow-popups-to-escape-sandbox MDN docs

[JagoFigueroa]

Espectacular trabajo compañero, todo bueno 😉

[gitpoap-bot]

Congrats, your important contribution to this open-source project has earned you a GitPOAP!

GitPOAP: 2022 Safe Web Core Contributor:

Head to gitpoap.io & connect your GitHub account to mint!

Learn more about GitPOAPs here.