fix(18194): fix trigger to close window when clicking "back to safety"

.gitignore

@@ -66,6 +66,9 @@ node_modules/
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
 
+# intellij config files
+/.idea
+
 # yarn v3 (w/o zero-install)
 # See: https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
 .pnp.*

src/index.ts

@@ -194,7 +194,7 @@ function start() {
   }
 
   continueLink.addEventListener('click', async () => {
-    if (isValidSuspectHref(suspectHref) === false) {
+    if (!isValidSuspectHref(suspectHref)) {
       console.log(`Disallowed Protocol, cannot continue.`);
       return;
     }
@@ -208,4 +208,18 @@ function start() {
 
     window.location.href = suspectHref;
   });
+
+  const backToSafetyLink = document.getElementById('back-to-safety');
+  if (!backToSafetyLink) {
+    throw new Error('Unable to locate back to safety link');
+  }
+
+  backToSafetyLink.addEventListener('click', async () => {
+    phishingSafelistStream.write({
+      jsonrpc: '2.0',
+      method: 'backToSafetyPhishingWarning',
+      params: [],
+      id: createRandomId(),
+    });
+  });
 }

static/index.html

@@ -71,7 +71,7 @@ <h1>
       </br>
         <p>If we're flagging a legitimate website, please <a id="new-issue-link" href="#">report a detection problem.</a></p>
         <p>If you understand the risks and still want to proceed, you can <a id="unsafe-continue">continue to the site.</a></p>
-        <button class="button-secondary" type="submit" onclick="window.close()">Back to safety</button>
+        <button class="button-secondary" type="submit" id="back-to-safety">Back to safety</button>
       </div>
       <div id="content__framed-body" class="content__framed-body">
         <p>

tests/defaults.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test';
-import config from '../playwright.config';
 import { setupDefaultMocks } from './helpers/default-mocks';
+import { setupStreamInitialization } from './helpers/stream-initialization';
 
 test.beforeEach(async ({ context }) => {
   await setupDefaultMocks(context);
@@ -55,20 +55,25 @@ test('does nothing when the user tries to bypass the warning', async ({
   await expect(page.isClosed()).toBe(false);
 });
 
-test('closes the window when the user clicks "Back to safety"', async ({
-  page,
-}) => {
-  // Calling `replace` here instead of `goto` to ensure that the page loads with a browser history
-  // of length 1. Using `goto` would result in a length of 2, because Playwright starts each page
-  // on `about:blank`.
-  // We need a 1-length history so that the browser allows `window.close()` to work.
-  const baseURL = config.use?.baseURL;
-  await page.evaluate((url) => window.location.replace(url), `${baseURL}/`);
-
-  const onClose = page.waitForEvent('close');
-  await page.getByRole('button', { name: 'Back to safety' }).click();
+test('redirects when the user clicks "Back to safety"', async ({ page }) => {
+  const postMessageLogs = await setupStreamInitialization(page);
+  const querystring = new URLSearchParams({
+    hostname: 'test.com',
+    href: 'https://test.com',
+  });
+  await page.goto(`/#${querystring}`);
 
-  await onClose;
+  await page.getByRole('button', { name: 'Back to safety' }).click();
+  await expect(postMessageLogs.length).toBe(1);
+  await expect(postMessageLogs[0].message).toStrictEqual({
+    data: {
+      id: expect.any(Number),
+      jsonrpc: '2.0',
+      method: 'backToSafetyPhishingWarning',
+      params: [],
+    },
+    name: 'metamask-phishing-safelist',
+  });
 });
 
 test('logs that the service worker is registered', async ({ page }) => {