Suggest using textContent instead of innerHTML

Author: manuelpuyol

docs/rules/no-innter-html.md

@@ -1,6 +1,6 @@
 # No `innerHTML`
 
-Using `innerHTML` poses a potential security risk. It should only be used when clearing content.
+Using `innerHTML` poses a potential security risk. Prefer using `textContent` so set text to an element.
 
 ```js
 // bad
@@ -9,8 +9,8 @@ function setContent(element, content) {
 }
 
 // good
-function clearContent(element) {
-  element.innerHTML = ''
+function setContent(element, content) {
+  element.textContent = content
 }
 ```
 

lib/rules/no-inner-html.js

@@ -2,30 +2,28 @@ module.exports = {
   meta: {
     type: 'problem',
     docs: {
-      description: 'disallow `Element.prototype.innerHTML``',
+      description: 'disallow `Element.prototype.innerHTML` in favor of `Element.prototype.textContent`',
       url: require('../url')(module)
     },
+    fixable: 'code',
     schema: []
   },
 
   create(context) {
     return {
-      AssignmentExpression(node) {
-        if (node.operator === '=') {
-          const leftNode = node.left
-          const rightNode = node.right
-
-          if (leftNode.property && leftNode.property.name === 'innerHTML') {
-            if (rightNode.type === 'Literal' && rightNode.value === '') {
-              return
+      MemberExpression(node) {
+        if (node.property && node.property.name === 'innerHTML') {
+          context.report({
+            node: node.property,
+            meta: {
+              fixable: 'code'
+            },
+            message:
+              'Using innerHTML poses a potential security risk and should not be used. Prefer using textContent.',
+            fix(fixer) {
+              return fixer.replaceText(node.property, 'textContent')
             }
-
-            context.report({
-              node,
-              message:
-                'Using innerHTML poses a potential security risk and should not be used other than clearing content.'
-            })
-          }
+          })
         }
       }
     }

tests/no-inner-html.js

@@ -6,27 +6,40 @@ const ruleTester = new RuleTester()
 ruleTester.run('no-innter-html', rule, {
   valid: [
     {
-      code: 'document.createElement("js-flash-text").innerHTML = ""'
+      code: 'document.createElement("js-flash-text").textContent = ""'
+    },
+    {
+      code: 'document.createElement("js-flash-text").textContent = "foo"'
     }
   ],
   invalid: [
     {
       code: 'document.createElement("js-flash-text").innerHTML = "foo"',
+      output: 'document.createElement("js-flash-text").textContent = "foo"',
       errors: [
         {
-          message:
-            'Using innerHTML poses a potential security risk and should not be used other than clearing content.',
-          type: 'AssignmentExpression'
+          message: 'Using innerHTML poses a potential security risk and should not be used. Prefer using textContent.',
+          type: 'Identifier'
         }
       ]
     },
     {
       code: 'document.querySelector("js-flash-text").innerHTML = "<div>code</div>"',
+      output: 'document.querySelector("js-flash-text").textContent = "<div>code</div>"',
+      errors: [
+        {
+          message: 'Using innerHTML poses a potential security risk and should not be used. Prefer using textContent.',
+          type: 'Identifier'
+        }
+      ]
+    },
+    {
+      code: 'document.querySelector("js-flash-text").innerHTML = ""',
+      output: 'document.querySelector("js-flash-text").textContent = ""',
       errors: [
         {
-          message:
-            'Using innerHTML poses a potential security risk and should not be used other than clearing content.',
-          type: 'AssignmentExpression'
+          message: 'Using innerHTML poses a potential security risk and should not be used. Prefer using textContent.',
+          type: 'Identifier'
         }
       ]
     }