Malicious site protection - iOS Ship review feedback (#1443)

Author: mgurgel

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

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

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

@@ -14,7 +14,6 @@ body {
     top: 0;
     left: 0;
 
-
     @media (max-height: 400px) {
         padding-top: var(--sp-10);
         align-items: flex-start;

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

@@ -53,7 +53,12 @@ export function WarningHeading() {
     return (
         <header className={classNames(styles.heading, styles[kind])}>
             <i className={styles.icon} aria-hidden="true" />
-            <Text as="h1" variant={platformName === 'macos' ? 'title-2-emphasis' : 'title-2'} strictSpacing={platformName !== 'macos'}>
+            <Text
+                as="h1"
+                variant={platformName === 'macos' ? 'title-2-emphasis' : 'title-2'}
+                strictSpacing={platformName !== 'macos'}
+                className={styles.title}
+            >
                 {heading}
             </Text>
         </header>

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

@@ -87,6 +87,7 @@
 
     & .content {
         text-align: center;
+        white-space: pre-line; /* Preserve line breaks on all screen sizes */
     }
 
     & .buttonContainer {
@@ -117,12 +118,26 @@
     }
 
     & .phishing .icon, & .malware .icon {
-        background-image: url(../../../../shared/assets/img/icons/Malware-Site-96.svg);
+        background-image: url(../../../../shared/assets/img/icons/Malware-Site-128.svg);
     }
 
-    /* Inserts line break before an inline element. Used for the Learn More link in the Warning text */
-    & [data-line-break]::before {
-        content: ' ';
-        display: block;
+    /* Preserves line breaks on smaller screens to avoid orfan words.
+       This is a fallback for browsers that don't support text-wrap: balance */
+    & .title {
+        white-space: pre-line;
+
+        @media (min-width: 600px) {
+            white-space: normal;
+        }
+    }
+}
+
+@supports (text-wrap: balance) {
+    /* Balanced line breaks on title for browsers that support it */
+    [data-platform-name="ios"] {
+        & .title {
+            text-wrap: balance;
+            white-space: normal;
+        }
     }
 }

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

@@ -27,7 +27,6 @@ const sanitizeURL = (urlString) => {
  */
 
 const helpPageAnchorTagParams = {
-    'data-line-break': true,
     href: phishingMalwareHelpPageURL,
     target: '_blank',
 };
@@ -62,11 +61,11 @@ export function useWarningHeading() {
     const { kind } = useErrorData();
 
     if (kind === 'phishing') {
-        return t('phishingPageHeading');
+        return t('phishingPageHeading').replace('{newline}', '\n');
     }
 
     if (kind === 'malware') {
-        return t('malwarePageHeading');
+        return t('malwarePageHeading').replace('{newline}', '\n');
     }
 
     if (kind === 'ssl') {
@@ -85,11 +84,13 @@ export function useWarningContent() {
     const { kind } = useErrorData();
 
     if (kind === 'phishing') {
-        return [<Trans str={t('phishingWarningText')} values={{ a: helpPageAnchorTagParams }} />];
+        const text = t('phishingWarningText').replace('{newline}', '\n');
+        return [<Trans str={text} values={{ a: helpPageAnchorTagParams }} />];
     }
 
     if (kind === 'malware') {
-        return [<Trans str={t('malwareWarningText')} values={{ a: helpPageAnchorTagParams }} />];
+        const text = t('malwareWarningText').replace('{newline}', '\n');
+        return [<Trans str={text} values={{ a: helpPageAnchorTagParams }} />];
     }
 
     if (kind === 'ssl') {

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

@@ -150,6 +150,10 @@ export class SpecialErrorPage {
 
     async showsExpiredPage() {
         const { page } = this;
+
+        const title = await page.locator('title').textContent();
+        expect(title).toBe('Warning: This site may be insecure');
+
         await expect(page.getByText('Warning: This site may be insecure', { exact: true })).toBeVisible();
         await expect(
             page.getByText(
@@ -174,6 +178,10 @@ export class SpecialErrorPage {
 
     async showsInvalidPage() {
         const { page } = this;
+
+        const title = await page.locator('title').textContent();
+        expect(title).toBe('Warning: This site may be insecure');
+
         await expect(page.getByText('Warning: This site may be insecure', { exact: true })).toBeVisible();
         await expect(
             page.getByText(
@@ -193,6 +201,10 @@ export class SpecialErrorPage {
 
     async showsSelfSignedPage() {
         const { page } = this;
+
+        const title = await page.locator('title').textContent();
+        expect(title).toBe('Warning: This site may be insecure');
+
         await expect(page.getByText('Warning: This site may be insecure', { exact: true })).toBeVisible();
         await expect(
             page.getByText(
@@ -212,6 +224,10 @@ export class SpecialErrorPage {
 
     async showsWrongHostPage() {
         const { page } = this;
+
+        const title = await page.locator('title').textContent();
+        expect(title).toBe('Warning: This site may be insecure');
+
         await expect(page.getByText('Warning: This site may be insecure', { exact: true })).toBeVisible();
         await expect(
             page.getByText(
@@ -231,7 +247,11 @@ export class SpecialErrorPage {
 
     async showsPhishingPage() {
         const { page } = this;
-        await expect(page.getByText('Warning: This site may put your personal information at risk', { exact: true })).toBeVisible();
+
+        const title = await page.locator('title').textContent();
+        expect(title).toBe('Warning: Security Risk');
+
+        await expect(page.getByText('Warning: This site may be a security risk', { exact: true })).toBeVisible();
         await expect(
             page.getByText(
                 'This website may be impersonating a legitimate site in order to trick you into providing personal information, such as passwords or credit card numbers. Learn more',
@@ -249,7 +269,11 @@ export class SpecialErrorPage {
 
     async showsMalwarePage() {
         const { page } = this;
-        await expect(page.getByText('Warning: This site may put your personal information at risk', { exact: true })).toBeVisible();
+
+        const title = await page.locator('title').textContent();
+        expect(title).toBe('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 distributing malware designed to compromise your device or steal your personal information. Learn more',

special-pages/pages/special-error/public/locales/bg/special-error.json

@@ -25,24 +25,32 @@
     "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."
   },
   "malwarePageHeading" : {
-    "title" : "Предупреждение: Този сайт може да изложи личната ви информация на риск",
-    "note" : "Title shown in an error page that warn users of security risks on a website due to malware distribution"
+    "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 блокира тази страница, защото тя може да разпространява зловреден софтуер, който да компрометира устройството ви или да открадне личната ви информация. <a>Научете повече</a>",
-    "note" : "Error description shown in an error page that warns users of security risks on a website due to malware distribution."
+    "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."
   },
   "malwareAdvancedInfoHeading" : {
     "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."
   },
   "phishingPageHeading" : {
-    "title" : "Предупреждение: Този сайт може да изложи личната ви информация на риск",
-    "note" : "Title shown in an error page that warn users of security risks on a website due to Phishing issues"
+    "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" : "Този уебсайт може да имитира легитимен сайт, за да ви подмами да предоставите лична информация, като например пароли или номера на кредитни карти. <a>Научете повече</a>",
-    "note" : "Error description shown in an error page that warns users of security risks on a website due to Phishing issues."
+    "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."
   },
   "phishingAdvancedInfoHeading" : {
     "title" : "Ако смятате, че този уебсайт е безопасен, можете да <a>съобщите за грешка</a>. Все пак можете да посетите уебсайта на свой собствен риск.",

special-pages/pages/special-error/public/locales/cs/special-error.json

@@ -25,24 +25,32 @@
     "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."
   },
   "malwarePageHeading" : {
-    "title" : "Pozor: Tahle stránka může vystavit tvoje osobní údaje riziku",
-    "note" : "Title shown in an error page that warn users of security risks on a website due to malware distribution"
+    "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. <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."
+    "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."
   },
   "malwareAdvancedInfoHeading" : {
     "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."
   },
   "phishingPageHeading" : {
-    "title" : "Pozor: Tahle stránka může vystavit tvoje osobní údaje riziku",
-    "note" : "Title shown in an error page that warn users of security risks on a website due to Phishing issues"
+    "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 kreditních karet. <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."
+    "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."
   },
   "phishingAdvancedInfoHeading" : {
     "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čí.",

special-pages/pages/special-error/public/locales/da/special-error.json

@@ -25,24 +25,32 @@
     "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."
   },
   "malwarePageHeading" : {
-    "title" : "Advarsel: Denne side kan udgøre en risiko for dine personlige oplysninger",
-    "note" : "Title shown in an error page that warn users of security risks on a website due to malware distribution"
+    "title" : "Advarsel: Dette websted kan udgøre en{newline}sikkerhedsrisiko",
+    "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" : "Advarsel: Sikkerhedsrisiko",
+    "note" : "Title shown in the browser window or tab when the current page may be a security risk due to malware"
   },
   "malwareWarningText" : {
-    "title" : "DuckDuckGo har blokeret denne side, fordi den muligvis distribuerer malware, der er designet til at kompromittere din enhed eller stjæle dine personlige oplysninger. <a>Få mere at vide</a>",
-    "note" : "Error description shown in an error page that warns users of security risks on a website due to malware distribution."
+    "title" : "DuckDuckGo har blokeret denne side, fordi den muligvis distribuerer malware, der er designet til at kompromittere din enhed eller stjæle dine personlige oplysninger.{newline}<a>Få mere at vide</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."
   },
   "malwareAdvancedInfoHeading" : {
     "title" : "Hvis du mener, at dette websted er sikkert, kan du <a>anmelde en fejl</a>. Du kan stadig besøge webstedet på eget ansvar.",
     "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."
   },
   "phishingPageHeading" : {
-    "title" : "Advarsel: Denne side kan udgøre en risiko for dine personlige oplysninger",
-    "note" : "Title shown in an error page that warn users of security risks on a website due to Phishing issues"
+    "title" : "Advarsel: Dette websted kan udgøre en{newline}sikkerhedsrisiko",
+    "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" : "Advarsel: Sikkerhedsrisiko",
+    "note" : "Title shown in the browser window or tab when the current page may be a security risk due to phishing"
   },
   "phishingWarningText" : {
-    "title" : "Dette websted efterligner muligvis et legitimt websted for at narre dig til at give personlige oplysninger, såsom adgangskoder eller kreditkortnumre. <a>Få mere at vide</a>",
-    "note" : "Error description shown in an error page that warns users of security risks on a website due to Phishing issues."
+    "title" : "Dette websted efterligner muligvis et legitimt websted for at narre dig til at give personlige oplysninger, såsom adgangskoder eller kreditkortnumre.{newline}<a>Få mere at vide</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."
   },
   "phishingAdvancedInfoHeading" : {
     "title" : "Hvis du mener, at dette websted er sikkert, kan du <a>anmelde en fejl</a>. Du kan stadig besøge webstedet på eget ansvar.",