no-danger-with-children.js 4.9 KB

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