Merge "Escape HTML in descriptions of image metadata"

horizon/static/horizon/js/horizon.string.js

@@ -36,5 +36,19 @@ horizon.string = {
       .replace(/"/g, '"')
       .replace(/'/g, ''')
       .replace(/\//g, '/');
+  },
+
+  /**
+   * A template tag for escaping HTML.
+   */
+  esc: function(strings, ...values) {
+    let output = "";
+    for (let [i, value] of values.entries()) {
+      output += strings[i];
+      if (typeof value !== "undefined") {
+        output += horizon.string.escapeHtml(value);
+      }
+    }
+    return output + strings[strings.length - 1];
   }
 };

openstack_dashboard/dashboards/project/images/templates/images/images/_metadata.html

@@ -94,7 +94,7 @@
               </li>
             {% endfor %}
             {% for obj in namespace.objects %}
-            <li class="list-group-item list-group-item-action level-1 metadata-object metadata-collapsed" data-parentnamespace="{{ namespace.namespace }}" data-description="{{ obj.description }}" data-name="{{ obj.name }}">
+            <li class="list-group-item list-group-item-action level-1 metadata-object metadata-collapsed" data-parentnamespace="{{ namespace.namespace }}" data-description="{{ obj.description }}" data-name="{{ obj.name }}" data-title="{{ obj.name }}">
                 <div class="clearfix">
                   <div class="pull-left">
                       <span class="fa fa-chevron-right"></span> {{ obj.name }}

openstack_dashboard/static/js/horizon.image_metadata.js

@@ -134,8 +134,7 @@
       const description = element.dataset.description;
       const title = element.dataset.title;
       const name = element.dataset.name;
-      // We probably want some html escaping here?
-      well.innerHTML = `<p><strong>${title}</strong> (${name})</p><p>${description}</p>`;
+      well.innerHTML = horizon.string.esc`<p><strong>${title}</strong> (${name})</p><p>${description}</p>`;
     }
 
     select_item(element) {