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 });
+    });
 });