Allow expressions within template strings, as long as they are allowed on their own (literals, etc.). Adding bailout in allowedExpression when used improperly. This has bitten mee way too often

lib/rules/no-unsafe-innerhtml.js

@@ -20,6 +20,9 @@ module.exports = function (context) {
     var VALID_UNWRAPPERS = ["Sanitizer.unwrapSafeHTML", "unwrapSafeHTML"];
 
     function allowedExpression(expression, parent) {
+        if (typeof parent === "undefined") {
+            throw new Error("allowedExpressions() expects two parameters. Only one given.");
+        }
         /*
          expression = { right-hand side of innerHTML or 2nd param to insertAdjacentHTML
          parent is the parent node of the call or assignment. used to look into comments.
@@ -39,12 +42,15 @@ module.exports = function (context) {
             // we just assign a literal (e.g. a string, a number, a bool)
             allowed = true;
         } else if (expression.type === "TemplateLiteral") {
+            allowed = true;
             // check for ${..} expressions
-            if (expression.expressions.length === 0) {
-                allowed = true;
-            } else {
-                allowed = false;
-            } // else: contains expressions, but no tagged function? not cool.
+            for (var e = 0; e < expression.expressions.length; e++) {
+                var templateExpression = expression.expressions[e];
+                if (!allowedExpression(templateExpression, expression)) {
+                    allowed = false;
+                    break;
+                }
+            }
         } else if (expression.type === "TaggedTemplateExpression") {
             // context.getSource(expression.tag) is the function name
             if (VALID_ESCAPERS.indexOf(context.getSource(expression.tag)) !== -1) {

tests/rules/no-unsafe-innerhtml.js

@@ -120,8 +120,20 @@ eslintTester.run("no-unsafe-innerhtml", rule, {
         {
             code: "document.writeln(Sanitizer.escapeHTML`<em>${evil}</em>`);",
             ecmaFeatures: features
-        }
-
+        },
+        // template string expression tests
+        {
+            code: "u.innerHTML = `<span>${'lulz'}</span>`;",
+            ecmaFeatures: features
+        },
+        {
+            code: "v.innerHTML = `<span>${'lulz'}</span>${55}`;",
+            ecmaFeatures: features
+        },
+        {
+            code: "w.innerHTML = `<span>${'lulz'+'meh'}</span>`;",
+            ecmaFeatures: features
+        },
     ],
 
     // Examples of code that should trigger the rule
@@ -159,13 +171,33 @@ eslintTester.run("no-unsafe-innerhtml", rule, {
             ]
         },
         {
-             code: "m.outerHTML = htmlString;",
-             errors: [
+            code: "m.outerHTML = htmlString;",
+            errors: [
                 {
                      message: "Unsafe assignment to outerHTML",
                      type: "AssignmentExpression"
                 }
-          ]
+            ]
+        },
+        {
+            code: "t.innerHTML = `<span>${name}</span>`;",
+            errors: [
+                {
+                    message: "Unsafe assignment to innerHTML",
+                    type: "AssignmentExpression"
+                }
+            ],
+            ecmaFeatures: features
+        },
+        {
+            code: "t.innerHTML = `<span>${'foobar'}</span>${evil}`;",
+            errors: [
+                {
+                    message: "Unsafe assignment to innerHTML",
+                    type: "AssignmentExpression"
+                }
+            ],
+            ecmaFeatures: features
         },
         // insertAdjacentHTML examples
         {