SolidJS innerHTML should not be used without sanitization

ID

javascript.solidjs_dangerously_set_innerhtml

Severity

high

Resource

Risky Values

Language

JavaScript

Tags

CWE:79, OWASP:2025:A05, PCI-DSS:6.5.4, SolidJS, asvs50-v3.2.3

Description

In SolidJS, the innerHTML JSX attribute sets raw HTML content on an element. This is equivalent to React’s dangerouslySetInnerHTML. Setting HTML from code is risky because it can inadvertently expose users to cross-site scripting (XSS) attacks.

As documented in the SolidJS Security Guide:

XSS attacks occur when malicious scripts are injected into web applications. In SolidJS, this can happen through improper use of innerHTML or when rendering user-provided content without sanitization.

Rationale

Consider a SolidJS component that renders user-provided HTML without sanitization:

import { createSignal } from "solid-js";

function UnsafeComponent(props) {
  // FLAW: XSS vulnerability - user content rendered as raw HTML
  return <div innerHTML={props.userContent} />;
}

An attacker could inject malicious scripts through props.userContent, such as <img src=x onerror=alert('XSS')>, which would execute arbitrary JavaScript in the victim’s browser.

This detector reports any usage of the innerHTML attribute in SolidJS JSX where the value is not passed through a recognized sanitizer function. Note that other detectors, such as the Cross-Site Scripting detector for JavaScript, also check whether the value passed to innerHTML could originate from untrusted input via data flow analysis.

Remediation

To fix this issue, either remove the innerHTML attribute or ensure the value is sanitized using a trusted XSS sanitization library:

import { createSignal } from "solid-js";
import DOMPurify from "dompurify";

function SafeComponent(props) {
  // Safe: content sanitized before rendering
  return <div innerHTML={DOMPurify.sanitize(props.userContent)} />;
}

Some recommended anti-XSS sanitizers:

  • DOMPurify - XSS sanitizer for HTML, MathML and SVG.

  • xss - Sanitize untrusted HTML with a whitelist-based configuration.

  • xss-filters - Secure XSS Filters.

Alternatively, avoid using innerHTML altogether. SolidJS supports safe text rendering by default — expressions in JSX are automatically escaped:

function SafeTextComponent(props) {
  // Safe: text content is automatically escaped by SolidJS
  return <div>{props.userContent}</div>;
}

Configuration

You may configure the accepted sanitizer functions by changing the sanitizers property, a list of regular expressions for the function names that will be accepted as sanitizers.

References