Disallow non-templates as interpolations in Polymer.html

lib/utils/html-tag.html

@@ -20,20 +20,22 @@
       if (value instanceof HTMLTemplateElement) {
         return /** @type {!HTMLTemplateElement} */(value).innerHTML;
       } else {
-        return String(value);
+        throw new Error(`non-template value passed to Polymer.html: ${value}`);
       }
     }
 
     /**
-     * A template literal tag that creates an HTML <template> element from the contents of the string.
+     * A template literal tag that creates an HTML <template> element from the
+     * contents of the string.
      *
      * This allows you to write a Polymer Template in JavaScript.
      *
-     * Interpolated values are converted to strings when the template is created,
-     * they are not intended as a replacement for Polymer data-binding.
+     * Templates can be composed by interpolating `HTMLTemplateElement`s in
+     * expressions in the JavaScript template literal. The nested template's
+     * `innerHTML` is inluced in the containing template.
      *
-     * There is special support for HTMLTemplateElement values,
-     * allowing for easy composition of superclass or partial templates.
+     * All other values are disallowed in expressions to help prevent XSS
+     * attacks.
      *
      * Example:
      *

test/unit/html-tag.html

@@ -32,15 +32,10 @@
         let t = Polymer.html`<span>the \`price\` is \${{foo}}\n</span>`;
         assert.equal(t.innerHTML, '<span>the `price` is ${{foo}}\n</span>');
       });
-      test('variables work', function() {
-        let a = 3;
-        let b = 'foo';
-        let t = Polymer.html`<div>${a} ${b}</div>`;
-        let inst = document.createElement('div');
-        inst.appendChild(t.content.cloneNode(true));
-        assert.equal(inst.textContent, `${a} ${b}`);
+      test('interpolation of non-templates throw', function() {
+        assert.throws(() => Polymer.html`<div>${'a'}</div>`);
       });
-      test('template variables only include the template contents', function() {
+      test('interpolation of templates include the template contents', function() {
         let t1 = Polymer.html`<div></div>`;
         let t2 = Polymer.html`<span>${t1}</span>`;
         assert.equal(t2.innerHTML, '<span><div></div></span>');
@@ -131,4 +126,4 @@
     });
   </script>
 </body>
-</html>
+</html>