Unsafe HTML assignment
Detects innerHTML, outerHTML, and insertAdjacentHTML receiving non-literal values.
| Detail | Value |
|---|---|
| Check ID | UNSAFE_INNERHTML |
| Severity | High |
| How it runs | Deterministic scan and agent review |
| Applies to | Apps with a theme app extension |
Anchor to Vulnerable exampleVulnerable example
extensions/product-badge/assets/badge.js
const params = new URLSearchParams(window.location.search);
// Any non-literal value assigned to innerHTML, outerHTML, or
// insertAdjacentHTML is a script-execution sink. eval() and new
// Function() are flagged the same way.
document.querySelector(".badge").innerHTML = params.get("label");
Anchor to How to fixHow to fix
Use textContent where possible or sanitize with DOMPurify before rendering.
For more detail, see Cross-site scripting.
extensions/product-badge/assets/badge.js
const params = new URLSearchParams(window.location.search);
// textContent renders the value as text, so markup in it stays
// inert. When you genuinely need HTML, sanitize with DOMPurify
// first.
document.querySelector(".badge").textContent = params.get("label");
shopify app security check, the command that runs this check- All app security checks
Was this page helpful?