Add sandbox to Transak iframe to block top-navigation

playwright/tests/fiat.spec.ts

@@ -74,4 +74,22 @@ test.describe('Fiat on-ramp', () => {
       )
       .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://example.com/';</script>`,
+      }),
+    )
+
+    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://example.com/')
+  })
 })

src/app/pages/FiatOnramp/index.tsx

@@ -112,7 +112,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,