Merge pull request #1585 from oasisprotocol/lw/block-top-navigation

Add sandbox to Transak iframe to block top-navigation

Author: lukaw3d

playwright/tests/fiat.spec.ts

@@ -63,15 +63,35 @@ test.describe('Fiat on-ramp', () => {
       route.fulfill({
         status: 301,
         headers: {
-          Location: 'https://example.com/',
+          Location: 'https://phishing-transak.com/',
         },
       }),
     )
+    await page.route('https://phishing-transak.com/', route => route.fulfill({ body: `phishing` }))
 
     await page
       .getByText(
         'I understand that I’m using a third-party solution and Oasis* does not carry any responsibility over the usage of this solution.',
       )
       .click()
   })
+
+  test('Sandbox should block top-navigation from iframe and fail', async ({ page, baseURL }) => {
+    test.fail()
+    expect(baseURL).toBe('http://localhost:5000')
+    expect((await page.request.head('/')).headers()).toHaveProperty('content-security-policy')
+    await page.route('https://global.transak.com/*', route =>
+      route.fulfill({
+        body: `<script>window.top.location = 'https://phishing-wallet.com/';</script>`,
+      }),
+    )
+    await page.route('https://phishing-wallet.com/', route => route.fulfill({ body: `phishing` }))
+
+    await page
+      .getByText(
+        'I understand that I’m using a third-party solution and Oasis* does not carry any responsibility over the usage of this solution.',
+      )
+      .click()
+    await expect(page).toHaveURL('https://phishing-wallet.com/')
+  })
 })

src/app/pages/FiatOnrampPage/index.tsx

@@ -113,7 +113,22 @@ export function FiatOnramp() {
             height="875"
             title="Transak On/Off Ramp Widget"
             allow="camera;microphone;fullscreen;payment"
-            // TODO: maybe restrict top-navigation with sandbox=""
+            // Restrict top-navigation
+            sandbox={[
+              'allow-downloads',
+              'allow-forms',
+              'allow-modals',
+              'allow-orientation-lock',
+              'allow-pointer-lock',
+              'allow-popups',
+              'allow-popups-to-escape-sandbox',
+              'allow-presentation',
+              'allow-same-origin',
+              'allow-scripts',
+              // 'allow-storage-access-by-user-activation',
+              // 'allow-top-navigation',
+              // 'allow-top-navigation-by-user-activation',
+            ].join(' ')}
             src={`${process.env.REACT_APP_TRANSAK_URL}/?${new URLSearchParams({
               // https://docs.transak.com/docs/query-parameters
               apiKey: process.env.REACT_APP_TRANSAK_PARTNER_ID,