---
title: Text setting may be rendered as unsafe HTML
description: Investigates merchant-configurable text rendered as HTML without sanitization.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/security/app-security-checks/text-setting-html-smuggling
  md: >-
    https://shopify.dev/docs/apps/build/security/app-security-checks/text-setting-html-smuggling.md
---

# Text setting may be rendered as unsafe HTML

Investigates merchant-configurable text rendered as HTML without sanitization.

| Detail | Value |
| - | - |
| Check ID | `TEXT_SETTING_HTML_SMUGGLING` |
| Severity | High |
| How it runs | Agent review |

***

## Vulnerable example

## app/components/BannerPreview\.tsx

```tsx
type Props = { settings: { headline: string } };


export function BannerPreview({ settings }: Props) {
  // A merchant-editable text setting rendered as raw HTML.
  // A value like <img src=x onerror=...> runs on the client.
  return (
    <div dangerouslySetInnerHTML={{ __html: settings.headline }} />
  );
}
```

***

## How to fix

Render settings as text or sanitize with a strict allowlist.

## app/components/BannerPreview\.tsx

```tsx
type Props = { settings: { headline: string } };


export function BannerPreview({ settings }: Props) {
  // Render the setting as text. If the feature really needs rich
  // text, sanitize with a strict allowlist on the server before
  // it is stored.
  return <div>{settings.headline}</div>;
}
```

***

## Related

* [`shopify app security check`](https://shopify.dev/docs/api/shopify-cli/app/app-security-check), the command that runs this check
* [All app security checks](https://shopify.dev/docs/apps/build/security/app-security-checks)

***