javascript.browser.security.insecure-innerhtml.insecure-innerhtml

profile photo of semgrepsemgrep
Author
4,974
Download Count*

User controlled data in a $EL.innerHTML is an anti-pattern that can lead to XSS vulnerabilities

Run Locally

Run in CI

Defintion

rules:
  - id: insecure-innerhtml
    message: User controlled data in a `$EL.innerHTML` is an anti-pattern that can
      lead to XSS vulnerabilities
    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
      category: security
      technology:
        - browser
      cwe2022-top25: true
      cwe2021-top25: true
      subcategory:
        - audit
      likelihood: LOW
      impact: LOW
      confidence: LOW
      references:
        - https://owasp.org/Top10/A03_2021-Injection
      license: Commons Clause License Condition v1.0[LGPL-2.1-only]
      vulnerability_class:
        - Cross-Site-Scripting (XSS)
    languages:
      - javascript
      - typescript
    severity: ERROR
    patterns:
      - pattern: |
          $EL.innerHTML = $HTML;
      - pattern-not: |
          $EL.innerHTML = "...";

Examples

insecure-innerhtml.js

const el = element.innerHTML;

function bad1(userInput) {
  // ruleid: insecure-innerhtml
  el.innerHTML = '<div>' + userInput + '</div>';
}

function bad2(userInput) {
  // ruleid: insecure-innerhtml
  document.body.innerHTML = userInput;
}

function bad3(userInput) {
  const name = '<div>' + userInput + '</div>';
  // ruleid: insecure-innerhtml
  document.body.innerHTML = name;
}

function ok1() {
  const name = "<div>it's ok</div>";
  // ok: insecure-innerhtml
  el.innerHTML = name;
}

function ok2() {
  // ok: insecure-innerhtml
  document.body.innerHTML = "<div>it's ok</div>";
}