mcp-server-semgrep/semgrep-rules/typescript/react/security/audit/react-dangerouslysetinnerhtml.yaml

MCP Server for Semgrep Integration - static code analysis with AI

rules:
- id: react-dangerouslysetinnerhtml
  message: >-
    Detection of dangerouslySetInnerHTML from non-constant definition. This
    can inadvertently expose users to cross-site scripting (XSS) attacks if
    this comes from user-provided input. If you have to use
    dangerouslySetInnerHTML, consider using a sanitization library such as
    DOMPurify to sanitize your HTML.
  metadata:
    cwe:
    - "CWE-79: Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting')"
    owasp:
    - A07:2017 - Cross-Site Scripting (XSS)
    - A03:2021 - Injection
    references:
    - https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html
    category: security
    confidence: MEDIUM
    technology:
    - react
    cwe2022-top25: true
    cwe2021-top25: true
    subcategory:
    - vuln
    likelihood: MEDIUM
    impact: MEDIUM
  languages:
  - typescript
  - javascript
  severity: WARNING
  mode: taint
  pattern-sources:
    - patterns:
        - pattern-either:
            - pattern-inside: |
                function ...({..., $X, ...}) { ... }
            - pattern-inside: |
                function ...(..., $X, ...) { ... }
        - focus-metavariable: $X
        # Added to remove value.map which causes a fair amount of false positives
        - pattern-not-inside: |
              $F. ... .$SANITIZEUNC(...)
  pattern-sinks:
  - patterns:
    - focus-metavariable: $X
    - pattern-either:
      - pattern: |
          {...,dangerouslySetInnerHTML: {__html: $X},...}
      - pattern: |
          <$Y ... dangerouslySetInnerHTML={{__html: $X}} />
    - pattern-not: |
        <$Y ... dangerouslySetInnerHTML={{__html: "..."}} />
    - pattern-not: |
        {...,dangerouslySetInnerHTML:{__html: "..."},...}
    - metavariable-pattern:
        patterns:
        - pattern-not: |
            {...}
        metavariable: $X
    - pattern-not: |
        <... {__html: "..."} ...>
    - pattern-not: |
        <... {__html: `...`} ...>
  pattern-sanitizers:
  - patterns:
    - pattern-either:
      - pattern-inside: |
          import $S from "underscore.string"
          ...
      - pattern-inside: |
          import * as $S from "underscore.string"
          ...
      - pattern-inside: |
          import $S from "underscore.string"
          ...
      - pattern-inside: |
          $S = require("underscore.string")
          ...
    - pattern-either:
      - pattern: $S.escapeHTML(...)
  - patterns:
    - pattern-either:
      - pattern-inside: |
          import $S from "dompurify"
          ...
      - pattern-inside: |
          import { ..., $S,... } from "dompurify"
          ...
      - pattern-inside: |
          import * as $S from "dompurify"
          ...
      - pattern-inside: |
          $S = require("dompurify")
          ...
      - pattern-inside: |
          import $S from "isomorphic-dompurify"
          ...
      - pattern-inside: |
          import * as $S from "isomorphic-dompurify"
          ...
      - pattern-inside: |
          $S = require("isomorphic-dompurify")
          ...
    - pattern-either:
      - patterns:
        - pattern-inside: |
            $VALUE = $S(...)
            ...
        - pattern: $VALUE.sanitize(...)
      - patterns:
        - pattern-inside: |
            $VALUE = $S.sanitize
            ...
        - pattern: $S(...)
      - pattern: $S.sanitize(...)
      - pattern: $S(...)
  - patterns:
    - pattern-either:
      - pattern-inside: |
          import $S from 'xss';
          ...
      - pattern-inside: |
          import * as $S from 'xss';
          ...
      - pattern-inside: |
          $S = require("xss")
          ...
    - pattern: $S(...)
  - patterns:
    - pattern-either:
      - pattern-inside: |
          import $S from 'sanitize-html';
          ...
      - pattern-inside: |
          import * as $S from "sanitize-html";
          ...
      - pattern-inside: |
          $S = require("sanitize-html")
          ...
    - pattern: $S(...)
  - patterns:
    - pattern-either:
      - pattern-inside: |
          $S = new Remarkable()
          ...
    - pattern: $S.render(...)