dangerously_set_inner_html.yml

patterns:
  - pattern: |
      { __html: $<DATA> }
    filters:
      - not:
          variable: DATA
          detection: javascript_react_dangerously_set_inner_html_sanitized_input
          scope: result
auxiliary:
  - id: javascript_react_dangerously_set_inner_html_sanitized_input
    patterns:
      - pattern: |
          $<STRING_LITERAL>
        filters:
          - variable: STRING_LITERAL
            detection: string_literal
            scope: cursor
      - $<_>.sanitize($<_>)
      - sanitize($<_>)
      - sanitizeHTML($<_>)
      - sanitizeHtml($<_>)
      - renderMarkdown($<_>)
languages:
  - javascript
severity: high
metadata:
  description: "Unsanitized user input in React inner HTML method (XSS)"
  remediation_message: |-
    ## Description

    Using React's dangerouslySetInnerHTML with unsanitized data can introduce Cross-Site Scripting (XSS) vulnerabilities. This occurs when external input is embedded directly into the HTML without proper sanitization, allowing attackers to inject malicious scripts.

    ## Remediations

    - **Do** sanitize data before using it with dangerouslySetInnerHTML. This step is crucial to prevent XSS attacks by ensuring that the input does not contain harmful scripts.
    ```javascript
    <div dangerouslySetInnerHTML={{__html: sanitize(data)}} />
    ```

    ## References

    - [OWASP Cross-Site Scripting (XSS) Cheatsheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
  cwe_id:
    - 79
  id: "javascript_react_dangerously_set_inner_html"
  documentation_url: https://docs.bearer.com/reference/rules/javascript_react_dangerously_set_inner_html