Reland: NetworkConfig: Escape names before passing to i18n()

i18n() asserts if any unsafe tags are passed to it. We need to
HTMLEscape any network names passed to i18n().

Includes fix for browser tests.
Original CL:
https://chromium-review.googlesource.com/c/chromium/src/+/920903

Bug: 811562
TBR: tbarzic@chromium.org
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I7762ac9309b812358799c7eb885b1b4d29f9ec7f
Reviewed-on: https://chromium-review.googlesource.com/924655Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Commit-Queue: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#537518}

chrome/browser/resources/settings/internet_page/compiled_resources2.gyp

@@ -37,6 +37,7 @@
         '<(DEPTH)/ui/webui/resources/cr_elements/cr_dialog/compiled_resources2.gyp:cr_dialog',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:util',
         '<(EXTERNS_GYP):networking_private',
         '<(INTERFACES_GYP):networking_private_interface',
       ],

chrome/browser/resources/settings/internet_page/internet_config.js

@@ -100,7 +100,7 @@ Polymer({
   getDialogTitle_: function() {
     const name = this.networkProperties_.Name;
     if (name)
-      return this.i18n('internetConfigName', name);
+      return this.i18n('internetConfigName', HTMLEscape(name));
     const type = this.i18n('OncType' + this.networkProperties_.Type);
     return this.i18n('internetJoinType', type);
   },

chrome/browser/resources/settings/internet_page/tether_connection_dialog.js

@@ -138,7 +138,8 @@ Polymer({
    */
   getExplanation_: function(networkProperties) {
     return this.i18n(
-        'tetherConnectionExplanation', CrOnc.getNetworkName(networkProperties));
+        'tetherConnectionExplanation',
+        CrOnc.getEscapedNetworkName(networkProperties));
   },
 
   /**
@@ -149,7 +150,7 @@ Polymer({
   getDescriptionTitle_: function(networkProperties) {
     return this.i18n(
         'tetherConnectionDescriptionTitle',
-        CrOnc.getNetworkName(networkProperties));
+        CrOnc.getEscapedNetworkName(networkProperties));
   },
 
   /**

chrome/test/data/webui/settings/cr_settings_browsertest.js

@@ -1184,6 +1184,7 @@ CrSettingsInternetDetailPageTest.prototype = {
   extraLibraries: CrSettingsBrowserTest.prototype.extraLibraries.concat([
     ROOT_PATH + 'ui/webui/resources/js/promise_resolver.js',
     ROOT_PATH + 'ui/webui/resources/js/assert.js',
+    ROOT_PATH + 'ui/webui/resources/js/util.js',
     '../fake_chrome_event.js',
     '../chromeos/fake_networking_private.js',
     'internet_detail_page_tests.js',

ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp

@@ -54,6 +54,7 @@
     {
       'target_name': 'cr_onc_types',
       'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:util',
         '<(EXTERNS_GYP):networking_private',
       ],
       'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],

ui/webui/resources/cr_elements/chromeos/network/cr_onc_types.js

@@ -422,6 +422,15 @@ CrOnc.getNetworkName = function(properties) {
   return name;
 };
 
+/**
+ * @param {!CrOnc.NetworkProperties|!CrOnc.NetworkStateProperties|undefined}
+ *     properties The ONC network properties or state properties.
+ * @return {string} The name to display for |network|.
+ */
+CrOnc.getEscapedNetworkName = function(properties) {
+  return HTMLEscape(CrOnc.getNetworkName(properties));
+};
+
 /**
  * @param {!CrOnc.NetworkProperties|!CrOnc.NetworkStateProperties|undefined}
  *   properties The ONC network properties or state properties.