Prevent usage of dangerous JSX properties (no-danger)

Dangerous properties in React are those whose behavior is known to be a
common source of application vulnerabilities. The properties names
clearly indicate they are dangerous and should be avoided unless great
care is taken.

See https://facebook.github.io/react/tips/dangerously-set-inner-html.html

The following patterns are considered warnings:

    var Hello = <div dangerouslySetInnerHTML={{ __html: "Hello World" }}></div>;

The following patterns are not considered warnings:

    var Hello = <div>Hello World</div>;

Author: scothis

docs/rules/no-danger.md

@@ -0,0 +1,27 @@
+# Prevent usage of dangerous JSX properties (no-danger)
+
+Dangerous properties in React are those whose behavior is known to be a common source of application vulnerabilities. The properties names clearly indicate they are dangerous and should be avoided unless great care is taken.
+
+See https://facebook.github.io/react/tips/dangerously-set-inner-html.html
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```js
+var React = require('react');
+
+var Hello = <div dangerouslySetInnerHTML={{ __html: "Hello World" }}></div>;
+```
+
+The following patterns are not considered warnings:
+
+```js
+var React = require('react');
+
+var Hello = <div>Hello World</div>;
+```
+
+## When Not To Use It
+
+If you are certain the content passed to dangerouslySetInnerHTML is sanitized HTML you can disable this rule.

index.js

@@ -8,6 +8,7 @@ module.exports = {
     'display-name': require('./lib/rules/display-name'),
     'wrap-multilines': require('./lib/rules/wrap-multilines'),
     'self-closing-comp': require('./lib/rules/self-closing-comp'),
+    'no-danger': require('./lib/rules/no-danger'),
     'no-did-mount-set-state': require('./lib/rules/no-did-mount-set-state'),
     'no-did-update-set-state': require('./lib/rules/no-did-update-set-state'),
     'react-in-jsx-scope': require('./lib/rules/react-in-jsx-scope'),
@@ -28,6 +29,7 @@ module.exports = {
     'display-name': 0,
     'wrap-multilines': 0,
     'self-closing-comp': 0,
+    'no-danger': 0,
     'no-did-mount-set-state': 0,
     'no-did-update-set-state': 0,
     'react-in-jsx-scope': 0,

lib/rules/no-danger.js

@@ -0,0 +1,65 @@
+/**
+ * @fileoverview Prevent usage of dangerous JSX props
+ * @author Scott Andrews
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Constants
+// ------------------------------------------------------------------------------
+
+var DANGEROUS_MESSAGE = 'Dangerous property \'{{name}}\' found';
+
+var DANGEROUS_PROPERTY_NAMES = [
+  'dangerouslySetInnerHTML'
+];
+
+var DANGEROUS_PROPERTIES = DANGEROUS_PROPERTY_NAMES.reduce(function (props, prop) {
+  props[prop] = prop;
+  return props;
+}, Object.create(null));
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+/**
+ * Checks if a node name match the JSX tag convention.
+ * @param {String} name - Name of the node to check.
+ * @returns {boolean} Whether or not the node name match the JSX tag convention.
+ */
+var tagConvention = /^[a-z]|\-/;
+function isTagName(name) {
+  return tagConvention.test(name);
+}
+
+/**
+ * Checks if a JSX attribute is dangerous.
+ * @param {String} name - Name of the attribute to check.
+ * @returns {boolean} Whether or not the attribute is dnagerous.
+ */
+function isDangerous(name) {
+  return name in DANGEROUS_PROPERTIES;
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+  return {
+
+    JSXAttribute: function(node) {
+      if (isTagName(node.parent.name.name) && isDangerous(node.name.name)) {
+        context.report(node, DANGEROUS_MESSAGE, {
+          name: node.name.name
+        });
+      }
+    }
+
+  };
+
+};
+
+module.exports.schema = [];

tests/lib/rules/no-danger.js

@@ -0,0 +1,32 @@
+/**
+ * @fileoverview Tests for no-danger
+ * @author Scott Andrews
+ */
+
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+var eslint = require('eslint').linter;
+var ESLintTester = require('eslint-tester');
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+var eslintTester = new ESLintTester(eslint);
+eslintTester.addRuleTest('lib/rules/no-danger', {
+  valid: [
+    {code: '<App />;', ecmaFeatures: {jsx: true}},
+    {code: '<App dangerouslySetInnerHTML={{ __html: "" }} />;', ecmaFeatures: {jsx: true}},
+    {code: '<div className="bar"></div>;', ecmaFeatures: {jsx: true}}
+  ],
+  invalid: [{
+    code: '<div dangerouslySetInnerHTML={{ __html: "" }}></div>;',
+    errors: [{message: 'Dangerous property \'dangerouslySetInnerHTML\' found'}],
+    ecmaFeatures: {jsx: true}
+   }
+  ]
+});