humanspeak/svelte-purify

# @humanspeak/svelte-purify 一个微小且友好的 Svelte 净化器，使用 DOMPurify 保持你的 HTML 闪亮且安全。默认支持 SSR。 [](https://www.npmjs.com/package/@humanspeak/svelte-purify) [](https://github.com/humanspeak/svelte-purify/actions/workflows/npm-publish.yml) [](https://coveralls.io/github/humanspeak/svelte-purify?branch=main) [](https://github.com/humanspeak/svelte-purify/blob/main/LICENSE) [](https://www.npmjs.com/package/@humanspeak/svelte-purify) [](https://github.com/humanspeak/svelte-purify/actions/workflows/codeql.yml) [](https://packagephobia.com/result?p=@humanspeak/svelte-purify) [](https://trunk.io) [](http://www.typescriptlang.org/) [](https://www.npmjs.com/package/@humanspeak/svelte-purify) [](https://github.com/humanspeak/svelte-purify/graphs/commit-activity) ## 功能 - 🚀 **快速且微小**：底层使用 DOMPurify，极简封装 - 🔒 **XSS 防护**：剥离 script、不安全的 URL 以及隐藏的恶意属性 - 🧰 **选项透传**：你可以通过 `options` 控制 DOMPurify - 🧭 **支持 SSR**：默认组件在服务端和客户端均可运行 - 🧪 **经过测试**：使用 Vitest/JSDOM 进行单元测试 - 🧑‍💻 **完整的 TypeScript**：为 options 和 props 提供完善的类型 - 🧿 **兼容 Svelte 5 runes**：简洁、现代的 Svelte API ## 安装 ``` npm i -S @humanspeak/svelte-purify # 或 pnpm add @humanspeak/svelte-purify # 或 yarn add @humanspeak/svelte-purify ``` ## 基础用法 ### 默认 ```

` ``` ### 限制输出长度 ``` ``` ### 渲染钩子 (preHtml/postHtml) 你可以在已净化的 HTML 前后渲染 UI。每个钩子都会接收一个表示已净化 HTML 长度的数字。 ``` <>Sanitized length: {len}} postHtml={(len) => <> • {len} chars} /> ``` ## 选项 (DOMPurify) 传递任何 `DOMPurify.sanitize` 选项。我们不隐藏任何内容——尽情使用 DOMPurify 的全部功能。 ``` ``` 注意：该组件将返回字符串形式的已净化 HTML（而非 DOM 节点）。 ## Props | 组件 | Prop | 类型 | 描述 | | -------------- | ----------- | ------------------------------------------ | ---------------------------------------------- | | `SveltePurify` | `html` | `string` | 待净化和渲染的原始 HTML | | | `options` | `Parameters[1]` | DOMPurify 选项（支持全部） | | | `maxLength` | `number` | 如果设置，将截断已净化的 HTML 字符串 | | | `preHtml` | `Snippet<[number]>` | 在 HTML 之前渲染；接收已净化的长度 | | | `postHtml` | `Snippet<[number]>` | 在 HTML 之后渲染；接收已净化的长度 | ## 导出 ``` import { SveltePurify } from '@humanspeak/svelte-purify' ``` - **SveltePurify**：支持 SSR 的净化组件 ## 安全性 本库将净化工作委托给经过实战检验的净化器 [DOMPurify](https://github.com/cure53/DOMPurify)。它移除了 script 标签、事件处理属性（如 `onerror`）以及不安全的 URL（`javascript:`）等众多其他防护措施。 ## 示例 使用 DOMPurify 选项剥离特定标签： ``` ``` 允许额外的标签： ``` " options={{ ADD_TAGS: ['iframe'] }} /> ``` ## 许可证 MIT © [Humanspeak, Inc.](LICENSE) ## 致谢 由 [Humanspeak](https://humanspeak.com) 用 ❤️ 制作 特别感谢 [@jill64](https://github.com/jill64) ——她多年来对 Svelte 的贡献教会了我许多，并启发了这项工作。

标签：DOMPurify, HTML净化, SBOM分析, Svelte, TypeScript, Web安全, XSS防御, 安全插件, 自动化攻击, 蓝队分析