Échappement du runtime JSX

PRISM est sûr par défaut : les enfants texte et les valeurs d'attribut sont échappés en HTML automatiquement — sur le chemin de passe de compilation (renderChild / __bextEsc) comme dans le runtime. La première colonne montre l'échappement automatique par défaut ; la seconde utilise <Raw> pour désactiver l'échappement (réservé au HTML de confiance).

Astuce

N'appelez jamais escapeHtml() manuellement sur des valeurs passées comme enfants JSX — elles seraient doublement encodées. Réservez <Raw> uniquement au HTML produit par un moteur de rendu de confiance (marked, sanitize-html, etc.) et jamais à des entrées utilisateur brutes.

Résultat

Charge utile	{value} (échappement auto)	<Raw html={value} /> (désactivé)
plain text	hello world	hello world
HTML chars	<b>strong</b>	strong
image tag	<img src=x>
ampersand & quotes	Tom & Jerry's "best" episode	Tom & Jerry's "best" episode
attr injection	" onmouseover="x	" onmouseover="x

src/app/examples/jsx-escape/page.tsxTSX

// PRISM's escape policy (safe by default):
//   <p>{x}</p>          — children are HTML-ESCAPED automatically.
//   <input value={x}>   — attributes are escaped automatically too.
//   <p><Raw html={x}/>  — opt OUT of escaping (you vouch x is safe HTML).
//
// You no longer call escapeHtml() by hand for plain values — the runtime
// (and the compile fold's renderChild) escape any child that isn't marked
// safe. Reach for <Raw> / dangerouslySetInnerHTML only for trusted markup.

import { Raw } from "@bext-stack/framework/jsx-runtime";

export default function Page({ user, renderedMarkdown }) {
  return (
    <div>
      <p>{user.bio}</p>                 {/* auto-escaped — safe              */}
      <input value={user.bio} />        {/* attributes auto-escaped          */}
      <div><Raw html={renderedMarkdown} /></div> {/* opt-out: trusted HTML */}
    </div>
  );
}

Échappement du runtime JSX

Résultat

Documentation associée