Remove innerHTML usage in chrome://safe-browsing

This change removes innerHTML usage in chrome://safe-browsing so that
it'll be compatible with Trusted Types.

Bug: 41905
Change-Id: I06ba1bf4d1bfd7cdf2b0769678fdb5daf02390c8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2212627
Commit-Queue: Jun Kokatsu <Jun.Kokatsu@microsoft.com>
Reviewed-by: dpapad <dpapad@chromium.org>
Reviewed-by: Daniel Rubery <drubery@chromium.org>
Cr-Commit-Position: refs/heads/master@{#773089}

chrome/browser/ui/webui/chrome_url_data_manager_browsertest.cc

@@ -392,3 +392,10 @@ IN_PROC_BROWSER_TEST_F(
     NoTrustedTypesViolationInQuotaInternals) {
   CheckTrustedTypesViolation("chrome://quota-internals");
 }
+
+// Verify that there's no Trusted Types violation in chrome://safe-browsing
+IN_PROC_BROWSER_TEST_F(
+    ChromeURLDataManagerTestWithWebUIReportOnlyTrustedTypesEnabled,
+    NoTrustedTypesViolationInSafeBrowsing) {
+  CheckTrustedTypesViolation("chrome://safe-browsing");
+}

components/safe_browsing/content/web_ui/resources/safe_browsing.css

@@ -4,7 +4,7 @@
 
 body {
   color: rgb(48, 57, 66);
-  margin:15px;
+  margin: 15px;
 }
 p {
   white-space: pre-wrap;
@@ -13,25 +13,36 @@ p {
   background-color: #fbfbfb;
   border: 1px solid #cecece;
   border-radius: 3px;
-  padding: 19px;
   line-height: 1.5;
+  padding: 19px;
 }
 #sb-title {
   font-size: 2em;
   margin-bottom: 0.8em;
 }
-h1, h2, h3, p {
+h1,
+h2,
+h3,
+p {
   font-weight: normal;
   line-height: 1.5;
 }
 table.request-response {
-  table-layout:fixed;
-  width: 100%;
-  word-break:break-all;
-  white-space:pre-wrap;
   border: 1px solid #cecece;
   border-radius: 3px;
+  table-layout: fixed;
+  white-space: pre-wrap;
+  width: 100%;
+  word-break: break-all;
 }
 table.request-response td {
   width: 50%;
 }
+.bold-span {
+  font-weight: bold;
+}
+.result-container {
+  font-weight: normal;
+  line-height: 1.5;
+  white-space: normal;
+}

components/safe_browsing/content/web_ui/resources/safe_browsing.html

@@ -35,21 +35,21 @@
         <tabpanel>
           <h2>Experiments</h2>
           <div class="content">
-            <p id="experiments-list"></p>
+            <p id="experiments-list" class="result-container"></p>
           </div>
           <h2>Preferences</h2>
           <div class="content">
-            <p id="preferences-list"></p>
+            <p id="preferences-list" class="result-container"></p>
           </div>
           <h2>Safe Browsing Cookie</h2>
           <div class="content">
-            <p id="cookie-panel"></p>
+            <p id="cookie-panel" class="result-container"></p>
           </div>
         </tabpanel>
         <tabpanel>
           <h2>Database Manager</h2>
           <div class="content">
-            <p id="database-info-list"></p>
+            <p id="database-info-list" class="result-container"></p>
           </div>
         </tabpanel>
         <tabpanel>
@@ -92,7 +92,7 @@
         </tabpanel>
         <tabpanel>
           <h2>RT Lookup Pings</h2>
-          <p id="rt-lookup-experiment-enabled"></p>
+          <p id="rt-lookup-experiment-enabled" class="result-container"></p>
           <table id="rt-lookup-ping-list" class="request-response"></table>
         </tabpanel>
         <tabpanel>
@@ -123,6 +123,24 @@
         </tabpanel>
       </tabpanels>
     </tabbox>
+    <template id="result-template">
+      <div>
+        <span class="bold-span"></span>
+        <span></span>
+      </div>
+    </template>
+    <template id="cookie-template">
+      <div>
+        <span class="bold-span">Value: </span>
+        <span class="result"></span>
+      </div>
+      <span class="bold-span">Created: </span>
+      <span class="result"></span>
+    </template>
+    <template id="rt-lookup-template">
+      <span class="bold-span">RT Lookup Experiment Enabled: </span>
+      <span id="experiment-bool"></span>
+    </template>
     <script src="safe_browsing.js"></script>
   </body>
 </html>

components/safe_browsing/content/web_ui/resources/safe_browsing.js

@@ -161,62 +161,79 @@ cr.define('safe_browsing', function() {
 
   function addExperiments(result) {
     const resLength = result.length;
-    let experimentsListFormatted = '';
 
     for (let i = 0; i < resLength; i += 2) {
-      experimentsListFormatted += "<div><b>" + result[i + 1] +
-          "</b>: " + result[i] + "</div>";
+      const experimentsListFormatted =
+          $('result-template').content.cloneNode(true);
+      experimentsListFormatted.querySelectorAll('span')[0].textContent =
+          result[i + 1] + ': ';
+      experimentsListFormatted.querySelectorAll('span')[1].textContent =
+          result[i];
+      $('experiments-list').appendChild(experimentsListFormatted);
     }
-    $('experiments-list').innerHTML = experimentsListFormatted;
   }
 
   function addPrefs(result) {
     const resLength = result.length;
-    let preferencesListFormatted = "";
 
     for (let i = 0; i < resLength; i += 2) {
-      preferencesListFormatted += "<div><b>" + result[i + 1] + "</b>: " +
-          result[i] + "</div>";
+      const preferencesListFormatted =
+          $('result-template').content.cloneNode(true);
+      preferencesListFormatted.querySelectorAll('span')[0].textContent =
+          result[i + 1] + ': ';
+      preferencesListFormatted.querySelectorAll('span')[1].textContent =
+          result[i];
+      $('preferences-list').appendChild(preferencesListFormatted);
     }
-    $('preferences-list').innerHTML = preferencesListFormatted;
   }
 
   function addCookie(result) {
-    const cookieFormatted = '<b>Value:</b> ' + result[0] + '\n' +
-        '<b>Created:</b> ' + (new Date(result[1])).toLocaleString();
-    $('cookie-panel').innerHTML = cookieFormatted;
+    const cookieFormatted = $('cookie-template').content.cloneNode(true);
+    cookieFormatted.querySelectorAll('.result')[0].textContent = result[0];
+    cookieFormatted.querySelectorAll('.result')[1].textContent =
+        (new Date(result[1])).toLocaleString();
+    $('cookie-panel').appendChild(cookieFormatted);
   }
 
   function addSavedPasswords(result) {
     const resLength = result.length;
-    let savedPasswordFormatted = "";
 
     for (let i = 0; i < resLength; i += 2) {
-      savedPasswordFormatted += "<div>" + result[i];
-      if (result[i+1]) {
-        savedPasswordFormatted += " (GAIA password)";
-      } else {
-        savedPasswordFormatted += " (Enterprise password)";
-      }
-      savedPasswordFormatted += "</div>";
+      const savedPasswordFormatted = document.createElement('div');
+      const suffix = result[i + 1] ? 'GAIA password' : 'Enterprise password';
+      savedPasswordFormatted.textContent = `${result[i]} (${suffix})`;
+      $('saved-passwords').appendChild(savedPasswordFormatted);
     }
-
-    $('saved-passwords').innerHTML = savedPasswordFormatted;
   }
 
   function addDatabaseManagerInfo(result) {
     const resLength = result.length;
-    let preferencesListFormatted = "";
 
     for (let i = 0; i < resLength; i += 2) {
-      preferencesListFormatted += "<div><b>" + result[i] + "</b>: " +
-          result[i + 1] + "</div>";
+      const preferencesListFormatted =
+          $('result-template').content.cloneNode(true);
+      preferencesListFormatted.querySelectorAll('span')[0].textContent =
+          result[i] + ': ';
+      const value = result[i + 1];
+      if (Array.isArray(value)) {
+        const blockQuote = document.createElement('blockquote');
+        value.forEach(item => {
+          const div = document.createElement('div');
+          div.textContent = item;
+          blockQuote.appendChild(div);
+        });
+        preferencesListFormatted.querySelectorAll('span')[1].appendChild(
+            blockQuote);
+      } else {
+        preferencesListFormatted.querySelectorAll('span')[1].textContent =
+            value;
+      }
+      $('database-info-list').appendChild(preferencesListFormatted);
     }
-    $('database-info-list').innerHTML = preferencesListFormatted;
   }
 
   function addFullHashCacheInfo(result) {
-    $('full-hash-cache-info').innerHTML = result;
+    $('full-hash-cache-info').textContent = result;
   }
 
   function addSentClientDownloadRequestsInfo(result) {
@@ -307,8 +324,9 @@ cr.define('safe_browsing', function() {
   }
 
   function addRTLookupExperimentEnabled(enabled) {
-    const enabledFormatted = '<b>RT Lookup Experiment Enabled:</b> ' + enabled;
-    $('rt-lookup-experiment-enabled').innerHTML = enabledFormatted;
+    const enabledFormatted = $('rt-lookup-template').content.cloneNode(true);
+    enabledFormatted.querySelector('#experiment-bool').textContent = enabled;
+    $('rt-lookup-experiment-enabled').appendChild(enabledFormatted);
   }
 
   function addLogMessage(result) {
@@ -339,7 +357,8 @@ cr.define('safe_browsing', function() {
 
     cr.sendWithPromise('getReferrerChain', $('referrer-chain-url').value)
         .then((response) => {
-          $('referrer-chain-content').innerHTML = response;
+          $('referrer-chain-content').innerHTML = trustedTypes.emptyHTML;
+          $('referrer-chain-content').textContent = response;
         });
   }
 

components/safe_browsing/content/web_ui/safe_browsing_ui.cc

@@ -14,6 +14,7 @@
 #include "base/base64url.h"
 #include "base/bind.h"
 #include "base/callback.h"
+#include "base/i18n/number_formatting.h"
 #include "base/i18n/time_formatting.h"
 #include "base/json/json_string_value_serializer.h"
 #include "base/memory/ref_counted.h"
@@ -368,34 +369,33 @@ void AddStoreInfo(const DatabaseManagerInfo::DatabaseInfo::StoreInfo store_info,
     database_info_list->Append(base::Value("Unknown store"));
   }
 
-  std::string store_info_string = "<blockquote>";
+  base::Value store_info_list(base::Value::Type::LIST);
   if (store_info.has_file_size_bytes()) {
-    store_info_string +=
-        "Size (in bytes): " + std::to_string(store_info.file_size_bytes()) +
-        "<br>";
+    store_info_list.Append(
+        "Size (in bytes): " +
+        base::UTF16ToUTF8(base::FormatNumber(store_info.file_size_bytes())));
   }
 
   if (store_info.has_update_status()) {
-    store_info_string +=
-        "Update status: " + std::to_string(store_info.update_status()) + "<br>";
+    store_info_list.Append(
+        "Update status: " +
+        base::UTF16ToUTF8(base::FormatNumber(store_info.update_status())));
   }
 
   if (store_info.has_last_apply_update_time_millis()) {
-    store_info_string += "Last update time: " +
-                         UserReadableTimeFromMillisSinceEpoch(
-                             store_info.last_apply_update_time_millis())
-                             .GetString() +
-                         "<br>";
+    store_info_list.Append("Last update time: " +
+                           UserReadableTimeFromMillisSinceEpoch(
+                               store_info.last_apply_update_time_millis())
+                               .GetString());
   }
 
   if (store_info.has_checks_attempted()) {
-    store_info_string += "Number of database checks: " +
-                         std::to_string(store_info.checks_attempted()) + "<br>";
+    store_info_list.Append(
+        "Number of database checks: " +
+        base::UTF16ToUTF8(base::FormatNumber(store_info.checks_attempted())));
   }
 
-  store_info_string += "</blockquote>";
-
-  database_info_list->Append(base::Value(store_info_string));
+  database_info_list->Append(std::move(store_info_list));
 }
 
 void AddDatabaseInfo(const DatabaseManagerInfo::DatabaseInfo database_info,