# Dangerously Set Inner HTML
# Detects dangerouslySetInnerHTML usage (XSS risk)
id: dangerously-set-inner-html
name: Dangerously Set Inner HTML
severity: error
category: security
defect_class: injection
inline_tier: blocking
language: tsx

message: "dangerouslySetInnerHTML — XSS risk, sanitize user input"

description: |
  dangerouslySetInnerHTML allows arbitrary HTML injection.
  This is a major XSS vulnerability if user input is used.
  
  ✅ FIX: Sanitize HTML with a library like DOMPurify
  
  ```tsx
  import DOMPurify from 'dompurify';
  
  <div dangerouslySetInnerHTML={{ 
    __html: DOMPurify.sanitize(userInput) 
  }} />
  ```
  
  Or better, avoid using HTML altogether and use JSX.

query: |
  (jsx_attribute
    (property_identifier) @ATTR
    (#match? @ATTR "dangerouslySetInnerHTML"))

metavars:
  - ATTR

tags:
  - security
  - xss
  - react
  - jsx

examples:
  bad: |
    function Component({ userInput }) {
      return <div dangerouslySetInnerHTML={{ __html: userInput }} />;
    }
  
  good: |
    import DOMPurify from 'dompurify';
    
    function Component({ userInput }) {
      return (
        <div dangerouslySetInnerHTML={{ 
          __html: DOMPurify.sanitize(userInput) 
        }} />
      );
    }
    
    // Or better:
    function Component({ content }) {
      return <div>{content}</div>;  // Just use JSX
    }

has_fix: false