NewTabPage: Enable TrustedTypes CSP checks.

Bug: 1098690 Change-Id: I659b91c85e3dd6fe14ccfc773a003b302265f849 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4032791 Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org> Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org> Cr-Commit-Position: refs/heads/main@{#1073658}
chromium · Nov 19, 2022 · 6c7dedf · 6c7dedf
1 parent 23202fc
commit 6c7dedf
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 33 deletions.
diff --git a/chrome/browser/resources/new_tab_page/app.ts b/chrome/browser/resources/new_tab_page/app.ts
@@ -14,6 +14,7 @@ import {BrowserCommandProxy} from 'chrome://resources/js/browser_command/browser
 import {hexColorToSkColor, skColorToRgba} from 'chrome://resources/js/color_utils.js';
 import {EventTracker} from 'chrome://resources/js/event_tracker.js';
 import {FocusOutlineManager} from 'chrome://resources/js/focus_outline_manager.js';
+import {getTrustedScriptURL} from 'chrome://resources/js/static_types.js';
 import {SkColor} from 'chrome://resources/mojo/skia/public/mojom/skcolor.mojom-webui.js';
 import {DomIf, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
@@ -71,7 +72,7 @@ function recordClick(element: NtpElement) {
 function ensureLazyLoaded() {
   const script = document.createElement('script');
   script.type = 'module';
-  script.src = './lazy_load.js';
+  script.src = getTrustedScriptURL`./lazy_load.js`;
   document.body.appendChild(script);
 }
 

diff --git a/chrome/browser/resources/new_tab_page/modules/modules.ts b/chrome/browser/resources/new_tab_page/modules/modules.ts
@@ -195,7 +195,7 @@ export class ModulesElement extends PolymerElement {
   }
 
   private appendModuleContainers_(moduleContainers: HTMLElement[]) {
-    this.$.modules.innerHTML = '';
+    this.$.modules.innerHTML = window.trustedTypes!.emptyHTML;
     let shortModuleSiblingsContainer: HTMLElement|null = null;
     this.modulesShownToUser = false;
     moduleContainers.forEach((moduleContainer: HTMLElement, index: number) => {

diff --git a/chrome/browser/resources/new_tab_page/modules/recipes/module.ts b/chrome/browser/resources/new_tab_page/modules/recipes/module.ts
@@ -99,10 +99,10 @@ export class RecipesModuleElement extends I18nMixin
         loadTimeData.getString('modulesRecipeTasksLower');
   }
 
-  private computeInfo_(): string {
+  private computeInfo_(): TrustedHTML {
     return loadTimeData.getBoolean('moduleRecipeExtendedExperimentEnabled') ?
-        loadTimeData.getString('modulesRecipeExtendedInfo') :
-        loadTimeData.getString('modulesRecipeInfo');
+        this.i18nAdvanced('modulesRecipeExtendedInfo') :
+        this.i18nAdvanced('modulesRecipeInfo');
   }
 
   private computeShowRelatedSearches_(): boolean {

diff --git a/chrome/browser/resources/new_tab_page/new_tab_page.ts b/chrome/browser/resources/new_tab_page/new_tab_page.ts
@@ -11,6 +11,7 @@
 
 export {CrAutoImgElement} from 'chrome://resources/cr_elements/cr_auto_img/cr_auto_img.js';
 export {BrowserCommandProxy} from 'chrome://resources/js/browser_command/browser_command_proxy.js';
+export {getTrustedHTML} from 'chrome://resources/js/static_types.js';
 export {DomIf} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 export {AppElement, NtpElement} from './app.js';
 export {BackgroundManager} from './background_manager.js';

diff --git a/chrome/browser/resources/new_tab_page/realbox/realbox_action.ts b/chrome/browser/resources/new_tab_page/realbox/realbox_action.ts
@@ -4,6 +4,7 @@
 
 import 'chrome://resources/cr_elements/cr_shared_style.css.js';
 
+import {sanitizeInnerHtml} from 'chrome://resources/js/parse_html_subset.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {Action} from '../realbox.mojom-webui.js';
@@ -67,7 +68,7 @@ class RealboxActionElement extends PolymerElement {
   action: Action;
   matchIndex: number;
   override ariaLabel: string;
-  private hintHtml_: string;
+  private hintHtml_: TrustedHTML;
   private tooltip_: string;
 
   //============================================================================
@@ -81,11 +82,11 @@ class RealboxActionElement extends PolymerElement {
     return '';
   }
 
-  private computeHintHtml_(): string {
+  private computeHintHtml_(): TrustedHTML {
     if (this.action.hint) {
-      return decodeString16(this.action.hint);
+      return sanitizeInnerHtml(decodeString16(this.action.hint));
     }
-    return '';
+    return window.trustedTypes!.emptyHTML;
   }
 
   private computeTooltip_(): string {

diff --git a/chrome/browser/resources/new_tab_page/realbox/realbox_match.ts b/chrome/browser/resources/new_tab_page/realbox/realbox_match.ts
@@ -9,6 +9,7 @@ import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.js';
 import 'chrome://resources/cr_elements/cr_icons.css.js';
 import 'chrome://resources/cr_elements/cr_hidden_style.css.js';
 
+import {sanitizeInnerHtml} from 'chrome://resources/js/parse_html_subset.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {loadTimeData} from '../i18n_setup.js';
@@ -163,8 +164,8 @@ export class RealboxMatchElement extends PolymerElement {
   match: AutocompleteMatch;
   matchIndex: number;
   private actionIsVisible_: boolean;
-  private contentsHtml_: string;
-  private descriptionHtml_: string;
+  private contentsHtml_: TrustedHTML;
+  private descriptionHtml_: TrustedHTML;
   private removeButtonAriaLabel_: string;
   private removeButtonTitle_: string;
   private separatorText_: string;
@@ -273,9 +274,13 @@ export class RealboxMatchElement extends PolymerElement {
     return decodeString16(this.match.a11yLabel);
   }
 
-  private computeContentsHtml_(): string {
+  private sanitizeInnerHtml_(html: string): TrustedHTML {
+    return sanitizeInnerHtml(html, {attrs: ['class']});
+  }
+
+  private computeContentsHtml_(): TrustedHTML {
     if (!this.match) {
-      return '';
+      return window.trustedTypes!.emptyHTML;
     }
     const match = this.match;
     // `match.answer.firstLine` is generated by appending an optional additional
@@ -287,29 +292,33 @@ export class RealboxMatchElement extends PolymerElement {
     const matchContents =
         match.answer ? match.answer.firstLine : match.contents;
     return match.swapContentsAndDescription ?
-        this.renderTextWithClassifications_(
-                decodeString16(match.description), match.descriptionClass)
-            .innerHTML :
-        this.renderTextWithClassifications_(
-                decodeString16(matchContents), match.contentsClass)
-            .innerHTML;
+        this.sanitizeInnerHtml_(
+            this.renderTextWithClassifications_(
+                    decodeString16(match.description), match.descriptionClass)
+                .innerHTML) :
+        this.sanitizeInnerHtml_(
+            this.renderTextWithClassifications_(
+                    decodeString16(matchContents), match.contentsClass)
+                .innerHTML);
   }
 
-  private computeDescriptionHtml_(): string {
+  private computeDescriptionHtml_(): TrustedHTML {
     if (!this.match) {
-      return '';
+      return window.trustedTypes!.emptyHTML;
     }
     const match = this.match;
     if (match.answer) {
-      return decodeString16(match.answer.secondLine);
+      return this.sanitizeInnerHtml_(decodeString16(match.answer.secondLine));
     }
     return match.swapContentsAndDescription ?
-        this.renderTextWithClassifications_(
-                decodeString16(match.contents), match.contentsClass)
-            .innerHTML :
-        this.renderTextWithClassifications_(
-                decodeString16(match.description), match.descriptionClass)
-            .innerHTML;
+        this.sanitizeInnerHtml_(
+            this.renderTextWithClassifications_(
+                    decodeString16(match.contents), match.contentsClass)
+                .innerHTML) :
+        this.sanitizeInnerHtml_(
+            this.renderTextWithClassifications_(
+                    decodeString16(match.description), match.descriptionClass)
+                .innerHTML);
   }
 
   private computeTailSuggestPrefix_(): string {

diff --git a/chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.cc b/chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.cc
@@ -519,6 +519,7 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource(Profile* profile) {
   webui::SetupWebUIDataSource(
       source, base::make_span(kNewTabPageResources, kNewTabPageResourcesSize),
       IDR_NEW_TAB_PAGE_NEW_TAB_PAGE_HTML);
+  webui::EnableTrustedTypesCSP(source);
 
   // Allow embedding of iframes for the doodle and
   // chrome-untrusted://new-tab-page for other external content and resources.

diff --git a/chrome/test/data/webui/cr_components/help_bubble_test.ts b/chrome/test/data/webui/cr_components/help_bubble_test.ts
@@ -9,6 +9,7 @@ import {CrButtonElement} from '//resources/cr_elements/cr_button/cr_button.js';
 import {IronIconElement} from '//resources/polymer/v3_0/iron-icon/iron-icon.js';
 import {HELP_BUBBLE_DISMISSED_EVENT, HELP_BUBBLE_TIMED_OUT_EVENT, HelpBubbleDismissedEvent, HelpBubbleElement, HelpBubbleTimedOutEvent} from 'chrome://resources/cr_components/help_bubble/help_bubble.js';
 import {HelpBubbleArrowPosition, HelpBubbleButtonParams} from 'chrome://resources/cr_components/help_bubble/help_bubble.mojom-webui.js';
+import {getTrustedHTML} from 'chrome://resources/js/static_types.js';
 import {assertEquals, assertFalse, assertTrue} from 'chrome://webui-test/chai_assert.js';
 import {waitAfterNextRender} from 'chrome://webui-test/polymer_test_util.js';
 import {isVisible} from 'chrome://webui-test/test_util.js';
@@ -138,7 +139,7 @@ suite('CrComponentsHelpBubbleTest', () => {
   }
 
   setup(() => {
-    document.body.innerHTML = `
+    document.body.innerHTML = getTrustedHTML`
     <div id='container'>
       <h1 id='title'>This is the title</h1>
       <p id='p1'>Some paragraph text</p>

diff --git a/chrome/test/data/webui/new_tab_page/lens_upload_dialog_test.ts b/chrome/test/data/webui/new_tab_page/lens_upload_dialog_test.ts
@@ -25,7 +25,7 @@ suite('LensUploadDialogTest', () => {
   let submittedUrl: string|null = null;
 
   setup(() => {
-    document.body.innerHTML = '';
+    document.body.innerHTML = window.trustedTypes!.emptyHTML;
     metrics = fakeMetricsPrivate();
     windowProxy = installMock(WindowProxy);
     windowProxy.setResultFor('onLine', true);

diff --git a/chrome/test/data/webui/new_tab_page/realbox/realbox_test.ts b/chrome/test/data/webui/new_tab_page/realbox/realbox_test.ts
@@ -2637,7 +2637,7 @@ suite('NewTabPageRealboxTest', () => {
       loadTimeData.overrideValues({
         realboxLensSearch: true,
       });
-      document.body.innerHTML = '';
+      document.body.innerHTML = window.trustedTypes!.emptyHTML;
       realbox = document.createElement('ntp-realbox');
       document.body.appendChild(realbox);
       const whenOpenLensSearch = eventToPromise('open-lens-search', realbox);

diff --git a/chrome/test/data/webui/new_tab_page/utils_test.ts b/chrome/test/data/webui/new_tab_page/utils_test.ts
@@ -4,7 +4,7 @@
 
 import 'chrome://webui-test/mojo_webui_test_support.js';
 
-import {createScrollBorders, decodeString16, mojoString16} from 'chrome://new-tab-page/new_tab_page.js';
+import {createScrollBorders, decodeString16, getTrustedHTML, mojoString16} from 'chrome://new-tab-page/new_tab_page.js';
 import {assertEquals, assertTrue} from 'chrome://webui-test/chai_assert.js';
 import {flushTasks, waitAfterNextRender} from 'chrome://webui-test/polymer_test_util.js';
 
@@ -24,7 +24,7 @@ suite('scroll borders', () => {
   }
 
   setup(async () => {
-    document.body.innerHTML = `
+    document.body.innerHTML = getTrustedHTML`
         <div scroll-border></div>
         <div id="container"><div id="content"></div></div>
         <div scroll-border></div>`;