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") {
-            // check for ${..} expressions
-            if (expression.expressions.length === 0) {
             allowed = true;
-            } else {
+            // check for ${..} expressions
+            for (var e = 0; e < expression.expressions.length; e++) {
+                var templateExpression = expression.expressions[e];
+                if (!allowedExpression(templateExpression, expression)) {
                     allowed = false;
-            } // else: contains expressions, but no tagged function? not cool.
+                    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
@@ -167,6 +179,26 @@ eslintTester.run("no-unsafe-innerhtml", rule, {
                 }
             ]
         },
+        {
+            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
         {
             code: "node.insertAdjacentHTML('beforebegin', htmlString);",