Scam protection (#1518)

Author: mgurgel

special-pages/pages/special-error/app/components/AdvancedInfo.jsx

@@ -34,6 +34,7 @@ export function VisitSiteLink({ elemRef }) {
 
 export function AdvancedInfoHeading() {
     const heading = useAdvancedInfoHeading();
+    if (!heading) return null;
 
     return (
         <header className={styles.heading}>
@@ -46,6 +47,7 @@ export function AdvancedInfoHeading() {
 
 export function AdvancedInfoContent() {
     const content = useAdvancedInfoContent();
+    if (!content.length) return null;
 
     return (
         <div className={styles.content}>

special-pages/pages/special-error/app/components/App.jsx

@@ -34,10 +34,9 @@ function PageTitle() {
     useEffect(() => {
         switch (kind) {
             case 'malware':
-                document.title = t('malwareTabTitle');
-                break;
             case 'phishing':
-                document.title = t('phishingTabTitle');
+            case 'scam':
+                document.title = t('maliciousSiteTabTitle');
                 break;
             default:
                 document.title = t('sslPageHeading');

special-pages/pages/special-error/app/components/Components.jsx

@@ -29,7 +29,7 @@ const platforms = {
  */
 function idForError(errorData) {
     const { kind } = errorData;
-    if (kind === 'phishing' || kind === 'malware') {
+    if (kind === 'malware' || kind === 'phishing' || kind === 'scam') {
         return kind;
     }
 

special-pages/pages/special-error/app/components/Warning.jsx

@@ -53,8 +53,10 @@ export function LeaveSiteButton() {
 }
 
 export function WarningHeading() {
-    const { kind } = useErrorData();
     const heading = useWarningHeading();
+    if (!heading) return null;
+
+    const { kind } = useErrorData();
     const platformName = usePlatformName();
     const isMobile = useIsMobile();
 
@@ -84,6 +86,7 @@ export function WarningHeading() {
 
 export function WarningContent() {
     const content = useWarningContent();
+    if (!content.length) return null;
 
     return (
         <div className={styles.content}>

special-pages/pages/special-error/app/components/Warning.module.css

@@ -60,7 +60,7 @@
         margin-top: calc(-1 * var(--sp-2));
     }
 
-    & .phishing .icon, & .malware .icon {
+    & .phishing .icon, & .malware .icon, & .scam .icon {
         background-image: url(../../../../shared/assets/img/icons/Malware-Site-96.svg);
         margin-left: calc(-1 * var(--sp-2));
         margin-right: calc(-1 * var(--sp-1));
@@ -86,6 +86,7 @@
 
     & .content {
         text-align: center;
+        text-wrap: balance;
         white-space: pre-line; /* Preserve line breaks on all screen sizes */
     }
 
@@ -116,7 +117,7 @@
         background-image: url(../../../../shared/assets/img/icons/Shield-Alert-128.svg);
     }
 
-    & .phishing .icon, & .malware .icon {
+    & .phishing .icon, & .malware .icon, & .scam .icon {
         background-image: url(../../../../shared/assets/img/icons/Malware-Site-128.svg);
     }
 
@@ -166,7 +167,7 @@
         margin-top: calc(-1 * var(--sp-2));
     }
 
-    & .phishing .icon, & .malware .icon {
+    & .phishing .icon, & .malware .icon, & .scam .icon {
         background-image: url(../../../../shared/assets/img/icons/Malware-Site-96.svg);
         margin-left: calc(-1 * var(--sp-2));
         margin-right: calc(-1 * var(--sp-1));

special-pages/pages/special-error/app/hooks/ErrorStrings.jsx

@@ -49,7 +49,7 @@ const reportSiteAnchorTagParams = (urlParam) => {
  * @typedef {import("../../types/special-error.js").SSLInvalidCertificate} SSLInvalidCertificate
  * @typedef {import("../../types/special-error.js").SSLSelfSignedCertificate} SSLSelfSignedCertificate
  * @typedef {import("../../types/special-error.js").SSLWrongHost} SSLWrongHost
- * @typedef {import("../../types/special-error.js").PhishingAndMalware} PhishingAndMalware
+ * @typedef {import("../../types/special-error.js").MaliciousSite} MaliciousSite
  * @typedef {SSLExpiredCertificate|SSLInvalidCertificate|SSLSelfSignedCertificate|SSLWrongHost} SSLError
  */
 
@@ -60,16 +60,15 @@ export function useWarningHeading() {
     const { t } = useTypedTranslation();
     const { kind } = useErrorData();
 
-    if (kind === 'phishing') {
-        return t('phishingPageHeading').replace('{newline}', '\n');
-    }
-
-    if (kind === 'malware') {
-        return t('malwarePageHeading').replace('{newline}', '\n');
-    }
-
-    if (kind === 'ssl') {
-        return t('sslPageHeading');
+    switch (kind) {
+        case 'ssl':
+            return t('sslPageHeading');
+        case 'malware':
+        case 'phishing':
+        case 'scam':
+            const translationKey = /** @type {const} */ (`${kind}PageHeading`);
+            return t(translationKey).replace('{newline}', '\n');
+        default:
     }
 
     throw new Error(`Unhandled error kind ${kind}`);
@@ -93,6 +92,11 @@ export function useWarningContent() {
         return [<Trans str={text} values={{ a: helpPageAnchorTagParams }} />];
     }
 
+    if (kind === 'scam') {
+        const text = t('scamWarningText').replace('{newline}', '\n');
+        return [<Trans str={text} values={{ a: helpPageAnchorTagParams }} />];
+    }
+
     if (kind === 'ssl') {
         const { domain } = /** @type {SSLError}} */ (errorData);
         return [<Trans str={t('sslWarningText', { domain })} values="" />];
@@ -109,16 +113,17 @@ export function useAdvancedInfoHeading() {
     const errorData = useErrorData();
     const { kind } = errorData;
 
-    if (kind === 'phishing' || kind === 'malware') {
-        const { url } = /** @type {PhishingAndMalware} */ (errorData);
-        const anchorTagParams = reportSiteAnchorTagParams(url);
-        const translatioKey = kind === 'phishing' ? 'phishingAdvancedInfoHeading' : 'malwareAdvancedInfoHeading';
-
-        return <Trans str={t(translatioKey)} values={{ a: anchorTagParams }} />;
-    }
-
-    if (kind === 'ssl') {
-        return t('sslAdvancedInfoHeading');
+    switch (kind) {
+        case 'ssl':
+            return t('sslAdvancedInfoHeading');
+        case 'malware':
+        case 'phishing':
+        case 'scam':
+            const { url } = /** @type {MaliciousSite} */ (errorData);
+            const anchorTagParams = reportSiteAnchorTagParams(url);
+            const translationKey = /** @type {const} */ (`${kind}AdvancedInfoHeading`);
+            return <Trans str={t(translationKey)} values={{ a: anchorTagParams }} />;
+        default:
     }
 
     throw new Error(`Unhandled error kind ${kind}`);
@@ -132,7 +137,7 @@ export function useAdvancedInfoContent() {
     const errorData = useErrorData();
     const { kind } = errorData;
 
-    if (kind === 'phishing' || kind === 'malware') {
+    if (kind === 'malware' || kind === 'phishing' || kind === 'scam') {
         return [];
     }
 

special-pages/pages/special-error/integration-tests/special-error-screenshots.spec.js

@@ -33,4 +33,11 @@ test.describe('screenshots @screenshots', () => {
         await special.openPage({ errorId: 'malware', locale: 'ru' });
         await expect(page).toHaveScreenshot('malware-warning-ru.png', { maxDiffPixels });
     });
+
+    test('Scam warning with advanced info', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.openPage({ errorId: 'scam' });
+        await special.showsAdvancedInfo();
+        await expect(page).toHaveScreenshot('scam-warning-advanced.png', { maxDiffPixels });
+    });
 });

special-pages/pages/special-error/integration-tests/special-error-screenshots.spec.js-snapshots/phishing-warning-advanced-ios-darwin.png

@@ -295,6 +295,27 @@ export class SpecialErrorPage {
         ).toBeVisible();
     }
 
+    async showsScamPage() {
+        const { page } = this;
+
+        await this.showsPageTitle('Warning: Security Risk');
+
+        await expect(page.getByText('Warning: This site may be a security risk', { exact: true })).toBeVisible();
+        await expect(
+            page.getByText(
+                'DuckDuckGo blocked this page because it may be trying to deceive or manipulate you into transferring money, buying counterfeit goods, or installing malware under false pretenses. Learn more',
+                { exact: true },
+            ),
+        ).toBeVisible();
+        await this.showsAdvancedInfo();
+        await expect(
+            page.getByText(
+                'If you believe this website is safe, you can report an error. You can still visit the website at your own risk.',
+                { exact: true },
+            ),
+        ).toBeVisible();
+    }
+
     /**
      * Clicks on advanced link to show expanded info
      *

special-pages/pages/special-error/integration-tests/special-error-screenshots.spec.js-snapshots/phishing-warning-advanced-macos-darwin.png

@@ -60,6 +60,12 @@ test.describe('special-error', () => {
         await special.showsMalwarePage();
     });
 
+    test('shows scam warning', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.openPage({ errorId: 'scam' });
+        await special.showsScamPage();
+    });
+
     test('leaves site', async ({ page }, workerInfo) => {
         const special = SpecialErrorPage.create(page, workerInfo);
         await special.openPage({ errorId: 'ssl.expired' });
@@ -92,6 +98,16 @@ test.describe('special-error', () => {
         await special.opensNewPage('Learn more', expectedURL);
     });
 
+    test('opens scam help page in a new window', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.overrideTestLinks();
+
+        const expectedURL = `${phishingMalwareHelpPageURL}`;
+
+        await special.openPage({ errorId: 'scam' });
+        await special.opensNewPage('Learn more', expectedURL);
+    });
+
     test('opens report form in a new window', async ({ page, browser }, workerInfo) => {
         const special = SpecialErrorPage.create(page, workerInfo);
         await special.overrideTestLinks();

special-pages/pages/special-error/integration-tests/special-error-screenshots.spec.js-snapshots/phishing-warning-advanced-windows-darwin.png

@@ -25,12 +25,12 @@
       "oneOf": [
         {
           "type": "object",
-          "title": "Phishing and Malware",
+          "title": "Malicious Site",
           "required": ["kind", "url"],
           "properties": {
             "kind": {
               "type": "string",
-              "enum": ["phishing", "malware"]
+              "enum": ["phishing", "malware", "scam"]
             },
             "url": {
               "type": "string"

special-pages/pages/special-error/integration-tests/special-error-screenshots.spec.js-snapshots/scam-warning-advanced-ios-darwin.png

@@ -24,14 +24,14 @@
     "title" : "Поемане на риска и отваряне на сайта",
     "note" : "Button shown in an error page that warns users of security risks on a website due to Phishing or Malware issues. The buttons allows the user to visit the website anyway despite the risks."
   },
+  "maliciousSiteTabTitle" : {
+    "title" : "Предупреждение: Риск за сигурността",
+    "note" : "Title shown in the browser window or tab when the current page may be a security risk due to phishing"
+  },
   "malwarePageHeading" : {
     "title" : "Предупреждение: Този сайт може да представлява{newline}риск за сигурността",
     "note" : "Title shown in an error page that warn users of security risks on a website due to malware distribution. The {newline} tag should not be translated. It should be placed within the sentence to avoid having a single word hanging on the last line"
   },
-  "malwareTabTitle" : {
-    "title" : "Предупреждение: Риск за сигурността",
-    "note" : "Title shown in the browser window or tab when the current page may be a security risk due to malware"
-  },
   "malwareWarningText" : {
     "title" : "DuckDuckGo блокира тази страница, защото тя може да разпространява зловреден софтуер, който да компрометира устройството ви или да открадне личната ви информация.{newline}<a>Научете повече</a>",
     "note" : "Error description shown in an error page that warns users of security risks on a website due to malware distribution. The {newline} tag should not be translated. It should be placed before the translated <a>Learn More</a> text."
@@ -44,10 +44,6 @@
     "title" : "Предупреждение: Този сайт може да представлява{newline}риск за сигурността",
     "note" : "Title shown in an error page that warn users of security risks on a website due to Phishing issues. The {newline} tag should not be translated. It should be placed within the sentence to avoid having a single word hanging on the last line"
   },
-  "phishingTabTitle" : {
-    "title" : "Предупреждение: Риск за сигурността",
-    "note" : "Title shown in the browser window or tab when the current page may be a security risk due to phishing"
-  },
   "phishingWarningText" : {
     "title" : "Този уебсайт може да имитира легитимен сайт, за да ви подмами да предоставите лична информация, като например пароли или номера на кредитни карти.{newline}<a>Научете повече</a>",
     "note" : "Error description shown in an error page that warns users of security risks on a website due to Phishing issues. The {newline} tag should not be translated. It should be placed before the translated <a>Learn More</a> text."
@@ -56,6 +52,18 @@
     "title" : "Ако смятате, че този уебсайт е безопасен, можете да <a>съобщите за грешка</a>. Все пак можете да посетите уебсайта на свой собствен риск.",
     "note" : "Title of the Advanced info section shown in an error page that warns users of security risks on a website due to malware distribution."
   },
+  "scamPageHeading" : {
+    "title" : "Предупреждение: Този сайт може да представлява{newline}риск за сигурността",
+    "note" : "Title shown in an error page that warn users of security risks on a website due to suspected scam attempts. The {newline} tag should not be translated. It should be placed within the sentence to avoid having a single word hanging on the last line"
+  },
+  "scamWarningText" : {
+    "title" : "DuckDuckGo блокира тази страница, защото тя може да се опитва да Ви измами или манипулира да преведете пари, да купите фалшиви стоки или да инсталирате зловреден софтуер под фалшив претекст.{newline}<a>Научете повече</a>",
+    "note" : "Error description shown in an error page that warns users of security risks on a website due to suspected scam attempts. The {newline} tag should not be translated. It should be placed before the translated <a>Learn More</a> text."
+  },
+  "scamAdvancedInfoHeading" : {
+    "title" : "Ако смятате, че този уебсайт е безопасен, можете да <a>съобщите за грешка</a>. Все пак можете да посетите уебсайта на свой собствен риск.",
+    "note" : "Title of the Advanced info section shown in an error page that warns users of security risks on a website due to suspected scam attempts."
+  },
   "sslPageHeading" : {
     "title" : "Предупреждение: Този сайт може да не е сигурен",
     "note" : "Title shown in an error page that warn users of security risks on a website due to SSL issues"

special-pages/pages/special-error/integration-tests/special-error-screenshots.spec.js-snapshots/scam-warning-advanced-macos-darwin.png

@@ -24,14 +24,14 @@
     "title" : "Přijmout riziko a přejít na stránku",
     "note" : "Button shown in an error page that warns users of security risks on a website due to Phishing or Malware issues. The buttons allows the user to visit the website anyway despite the risks."
   },
+  "maliciousSiteTabTitle" : {
+    "title" : "Pozor: Bezpečnostní riziko",
+    "note" : "Title shown in the browser window or tab when the current page may be a security risk due to phishing"
+  },
   "malwarePageHeading" : {
     "title" : "Pozor: Tahle stránka může představovat{newline}bezpečnostní riziko",
     "note" : "Title shown in an error page that warn users of security risks on a website due to malware distribution. The {newline} tag should not be translated. It should be placed within the sentence to avoid having a single word hanging on the last line"
   },
-  "malwareTabTitle" : {
-    "title" : "Pozor: Bezpečnostní riziko",
-    "note" : "Title shown in the browser window or tab when the current page may be a security risk due to malware"
-  },
   "malwareWarningText" : {
     "title" : "Služba DuckDuckGo tuhle stránku zablokovala, protože může šířit malware, jehož cílem je narušit zabezpečení zařízení nebo odcizit osobní údaje.{newline}<a>Přečti si další informace.</a>",
     "note" : "Error description shown in an error page that warns users of security risks on a website due to malware distribution. The {newline} tag should not be translated. It should be placed before the translated <a>Learn More</a> text."
@@ -44,10 +44,6 @@
     "title" : "Pozor: Tahle stránka může představovat{newline}bezpečnostní riziko",
     "note" : "Title shown in an error page that warn users of security risks on a website due to Phishing issues. The {newline} tag should not be translated. It should be placed within the sentence to avoid having a single word hanging on the last line"
   },
-  "phishingTabTitle" : {
-    "title" : "Pozor: Bezpečnostní riziko",
-    "note" : "Title shown in the browser window or tab when the current page may be a security risk due to phishing"
-  },
   "phishingWarningText" : {
     "title" : "Tahle webová stránka se může vydávat za legitimní web, aby tě přiměla k poskytnutí osobních údajů, jako jsou hesla nebo čísla platebních karet.{newline}<a>Přečti si další informace.</a>",
     "note" : "Error description shown in an error page that warns users of security risks on a website due to Phishing issues. The {newline} tag should not be translated. It should be placed before the translated <a>Learn More</a> text."
@@ -56,6 +52,18 @@
     "title" : "Pokud věříš, že je tahle stránka bezpečná, můžeš <a>nahlásit chybu</a>. Můžeš taky stránku navštívit na vlastní nebezpečí.",
     "note" : "Title of the Advanced info section shown in an error page that warns users of security risks on a website due to malware distribution."
   },
+  "scamPageHeading" : {
+    "title" : "Pozor: Tahle stránka může představovat{newline}bezpečnostní riziko",
+    "note" : "Title shown in an error page that warn users of security risks on a website due to suspected scam attempts. The {newline} tag should not be translated. It should be placed within the sentence to avoid having a single word hanging on the last line"
+  },
+  "scamWarningText" : {
+    "title" : "Služba DuckDuckGo zablokovala tuto stránku, protože se tě může pokoušet pod falešnými záminkami přimět k převodu peněz, nákupu padělaného zboží nebo instalaci malwaru.{newline}<a>Další informace</a>",
+    "note" : "Error description shown in an error page that warns users of security risks on a website due to suspected scam attempts. The {newline} tag should not be translated. It should be placed before the translated <a>Learn More</a> text."
+  },
+  "scamAdvancedInfoHeading" : {
+    "title" : "Pokud věříš, že je tahle stránka bezpečná, můžeš <a>nahlásit chybu</a>. Můžeš taky stránku navštívit na vlastní nebezpečí.",
+    "note" : "Title of the Advanced info section shown in an error page that warns users of security risks on a website due to suspected scam attempts."
+  },
   "sslPageHeading" : {
     "title" : "Pozor: Tenhle web může být nezabezpečený",
     "note" : "Title shown in an error page that warn users of security risks on a website due to SSL issues"