WebUI: Make localized-link TrustedTypes compliant.

This is in preparation of turning on TrustedTypes for Browser Settings,
which uses localized-link on CrOS.

Bug: 1098690
Change-Id: I9c4183c7aa1cb23e5cda7a6cdb59c2cf923a2c08
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4021527
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Auto-Submit: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1070582}

chrome/test/data/webui/cr_components/localized_link_test.ts

@@ -54,23 +54,23 @@ suite('localized_link', function() {
 
   test('PopulatedLink', function() {
     document.body.innerHTML = getLocalizedStringWithLinkElementHtml(
-        `<a>populated link</a>`, `http://google.com`);
+        `<a>populated link</a>`, `https://google.com`);
     localizedStringWithLink = document.body.querySelector('localized-link');
     assertTrue(!!localizedStringWithLink);
     assertEquals(
         localizedStringWithLink.$.container.innerHTML,
         `<a id="id0" aria-labelledby="id0" tabindex="0" ` +
-            `href="http://google.com" target="_blank">populated link</a>`);
+            `href="https://google.com" target="_blank">populated link</a>`);
   });
 
   test('PrepopulatedLink', function() {
     document.body.innerHTML = getLocalizedStringWithLinkElementHtml(
-        `<a href='http://google.com'>pre-populated link</a>`, ``);
+        `<a href='https://google.com'>pre-populated link</a>`, ``);
     localizedStringWithLink = document.body.querySelector('localized-link');
     assertTrue(!!localizedStringWithLink);
     assertEquals(
         localizedStringWithLink.$.container.innerHTML,
-        `<a href="http://google.com" id="id0" aria-labelledby="id0" tabindex="0">` +
+        `<a href="https://google.com" id="id0" aria-labelledby="id0" tabindex="0">` +
             `pre-populated link</a>`);
   });
 

ui/webui/resources/cr_components/localized_link/localized_link.ts

@@ -24,6 +24,7 @@ import '../../cr_elements/cr_shared_vars.css.js';
 import '../../cr_elements/cr_shared_style.css.js';
 
 import {assert, assertNotReached} from '//resources/js/assert.js';
+import {sanitizeInnerHtml} from '//resources/js/parse_html_subset.js';
 import {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {getTemplate} from './localized_link.html.js';
@@ -97,7 +98,7 @@ export class LocalizedLinkElement extends PolymerElement {
   private getAriaLabelledContent_(localizedString: string, linkUrl: string):
       string {
     const tempEl = document.createElement('div');
-    tempEl.innerHTML = localizedString;
+    tempEl.innerHTML = sanitizeInnerHtml(localizedString, {attrs: ['id']});
 
     const ariaLabelledByIds: string[] = [];
     tempEl.childNodes.forEach((node, index) => {
@@ -148,7 +149,14 @@ export class LocalizedLinkElement extends PolymerElement {
   }
 
   private setContainerInnerHTML_() {
-    this.$.container.innerHTML = this.containerInnerHTML_;
+    this.$.container.innerHTML = sanitizeInnerHtml(this.containerInnerHTML_, {
+      attrs: [
+        'aria-hidden',
+        'aria-labelledby',
+        'id',
+        'tabindex',
+      ],
+    });
     const anchorTag = this.shadowRoot!.querySelector('a');
     if (anchorTag) {
       anchorTag.addEventListener(