no-danger-with-children.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. /**
  2. * @fileoverview Report when a DOM element is using both children and dangerouslySetInnerHTML
  3. * @author David Petersen
  4. */
  5. 'use strict';
  6. const variableUtil = require('../util/variable');
  7. const jsxUtil = require('../util/jsx');
  8. const docsUrl = require('../util/docsUrl');
  9. const report = require('../util/report');
  10. // ------------------------------------------------------------------------------
  11. // Rule Definition
  12. // ------------------------------------------------------------------------------
  13. const messages = {
  14. dangerWithChildren: 'Only set one of `children` or `props.dangerouslySetInnerHTML`',
  15. };
  16. /** @type {import('eslint').Rule.RuleModule} */
  17. module.exports = {
  18. meta: {
  19. docs: {
  20. description: 'Disallow when a DOM element is using both children and dangerouslySetInnerHTML',
  21. category: 'Possible Errors',
  22. recommended: true,
  23. url: docsUrl('no-danger-with-children'),
  24. },
  25. messages,
  26. schema: [], // no options
  27. },
  28. create(context) {
  29. function findSpreadVariable(node, name) {
  30. return variableUtil.getVariableFromContext(context, node, name);
  31. }
  32. /**
  33. * Takes a ObjectExpression and returns the value of the prop if it has it
  34. * @param {object} node - ObjectExpression node
  35. * @param {string} propName - name of the prop to look for
  36. * @param {string[]} seenProps
  37. * @returns {object | boolean}
  38. */
  39. function findObjectProp(node, propName, seenProps) {
  40. if (!node.properties) {
  41. return false;
  42. }
  43. return node.properties.find((prop) => {
  44. if (prop.type === 'Property') {
  45. return prop.key.name === propName;
  46. }
  47. if (prop.type === 'ExperimentalSpreadProperty' || prop.type === 'SpreadElement') {
  48. const variable = findSpreadVariable(node, prop.argument.name);
  49. if (variable && variable.defs.length && variable.defs[0].node.init) {
  50. if (seenProps.indexOf(prop.argument.name) > -1) {
  51. return false;
  52. }
  53. const newSeenProps = seenProps.concat(prop.argument.name || []);
  54. return findObjectProp(variable.defs[0].node.init, propName, newSeenProps);
  55. }
  56. }
  57. return false;
  58. });
  59. }
  60. /**
  61. * Takes a JSXElement and returns the value of the prop if it has it
  62. * @param {object} node - JSXElement node
  63. * @param {string} propName - name of the prop to look for
  64. * @returns {object | boolean}
  65. */
  66. function findJsxProp(node, propName) {
  67. const attributes = node.openingElement.attributes;
  68. return attributes.find((attribute) => {
  69. if (attribute.type === 'JSXSpreadAttribute') {
  70. const variable = findSpreadVariable(node, attribute.argument.name);
  71. if (variable && variable.defs.length && variable.defs[0].node.init) {
  72. return findObjectProp(variable.defs[0].node.init, propName, []);
  73. }
  74. }
  75. return attribute.name && attribute.name.name === propName;
  76. });
  77. }
  78. /**
  79. * Checks to see if a node is a line break
  80. * @param {ASTNode} node The AST node being checked
  81. * @returns {boolean} True if node is a line break, false if not
  82. */
  83. function isLineBreak(node) {
  84. const isLiteral = node.type === 'Literal' || node.type === 'JSXText';
  85. const isMultiline = node.loc.start.line !== node.loc.end.line;
  86. const isWhiteSpaces = jsxUtil.isWhiteSpaces(node.value);
  87. return isLiteral && isMultiline && isWhiteSpaces;
  88. }
  89. return {
  90. JSXElement(node) {
  91. let hasChildren = false;
  92. if (node.children.length && !isLineBreak(node.children[0])) {
  93. hasChildren = true;
  94. } else if (findJsxProp(node, 'children')) {
  95. hasChildren = true;
  96. }
  97. if (
  98. node.openingElement.attributes
  99. && hasChildren
  100. && findJsxProp(node, 'dangerouslySetInnerHTML')
  101. ) {
  102. report(context, messages.dangerWithChildren, 'dangerWithChildren', {
  103. node,
  104. });
  105. }
  106. },
  107. CallExpression(node) {
  108. if (
  109. node.callee
  110. && node.callee.type === 'MemberExpression'
  111. && 'name' in node.callee.property
  112. && node.callee.property.name === 'createElement'
  113. && node.arguments.length > 1
  114. ) {
  115. let hasChildren = false;
  116. let props = node.arguments[1];
  117. if (props.type === 'Identifier') {
  118. const variable = variableUtil.getVariableFromContext(context, node, props.name);
  119. if (variable && variable.defs.length && variable.defs[0].node.init) {
  120. props = variable.defs[0].node.init;
  121. }
  122. }
  123. const dangerously = findObjectProp(props, 'dangerouslySetInnerHTML', []);
  124. if (node.arguments.length === 2) {
  125. if (findObjectProp(props, 'children', [])) {
  126. hasChildren = true;
  127. }
  128. } else {
  129. hasChildren = true;
  130. }
  131. if (dangerously && hasChildren) {
  132. report(context, messages.dangerWithChildren, 'dangerWithChildren', {
  133. node,
  134. });
  135. }
  136. }
  137. },
  138. };
  139. },
  140. };