@particle-academy/react-fancy 2.4.0 → 2.5.0

package/docs/Action.md

@@ -39,7 +39,7 @@ import { Action } from "@particle-academy/react-fancy";
 | sort | `string` | `"eiab"` | Sort order of decorative elements: `e`=emoji, `i`=icon, `a`=avatar, `b`=badge |
 | loading | `boolean` | `false` | Show loading spinner (disables the button) |
 | disabled | `boolean` | - | Disable the button |
-| href | `string` | - | Render as an anchor tag instead of a button |
+| href | `string` | - | Render as an anchor tag instead of a button. Sanitized to a safe-protocol allow-list (since v2.5.0) — `javascript:`, `data:`, `vbscript:` are silently dropped and the component renders a `<button>` instead of an `<a>`. |
 
 Also extends all native `<button>` HTML attributes (except `color`).
 

package/docs/ContentRenderer.md

@@ -23,6 +23,29 @@ import { ContentRenderer } from "@particle-academy/react-fancy";
 | lineSpacing | `number` | `1.6` | Line height |
 | extensions | `RenderExtension[]` | - | Per-instance render extensions (merged with global) |
 | className | `string` | - | Additional CSS classes |
+| unsafe | `boolean` | `false` | Skip HTML sanitization. See **Sanitization** below. |
+
+## Sanitization
+
+Since v2.5.0, `ContentRenderer` sanitizes its rendered output by default:
+
+- Strips `<script>`, `<iframe>`, `<object>`, `<embed>`, `<style>`, `<link>`, `<meta>`, `<base>`, `<form>`.
+- Removes `on*` event-handler attributes (`onclick`, `onerror`, ...).
+- Filters `href`, `src`, `action`, `formaction` to a safe-protocol allow-list (`http`, `https`, `mailto`, `tel`, `sms`, `ftp`, fragment, relative). `javascript:`, `data:`, `vbscript:` are dropped.
+
+Pass `unsafe` to opt out — only do this when the input is fully trusted (e.g. your own CMS):
+
+```tsx
+<ContentRenderer value={trustedHtmlFromOurCMS} unsafe />
+```
+
+The helpers are also exported for use elsewhere:
+
+```tsx
+import { sanitizeHtml, sanitizeHref } from "@particle-academy/react-fancy";
+```
+
+> **Render extensions still need to sanitize their own input.** The `content` prop passed to your extension component is the raw text inside the matched tag — treat it as untrusted and call `sanitizeHtml(content)` if you render it as HTML.
 
 ## Render Extensions
 
@@ -31,12 +54,14 @@ Extensions let you define custom tags that are rendered by React components. Reg
 ```tsx
 import { registerExtension } from "@particle-academy/react-fancy";
 
+import { sanitizeHtml } from "@particle-academy/react-fancy";
+
 registerExtension({
   tag: "thinking",
   component: ({ content }) => (
     <details className="bg-zinc-100 p-3 rounded">
       <summary>Thinking...</summary>
-      <div dangerouslySetInnerHTML={{ __html: content }} />
+      <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(content) }} />
     </details>
   ),
   block: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-academy/react-fancy",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "React UI component library — React port of the fancy-flux Blade component library",
   "repository": {
     "type": "git",