如何在 Astro 中安全地渲染包含 HTML 标签的字符串-html教程-PHP中文网

如何在 Astro 中安全地渲染包含 HTML 标签的字符串

在 Astro 组件中，直接插值字符串（如 characteristics 数组中的内容）默认会被转义为纯文本；若需将字符串作为 HTML 渲染，须使用 set:html 指令并确保内容可信。

在 astro 组件中，直接插值字符串（如 `characteristics` 数组中的内容）默认会被转义为纯文本；若需将字符串作为 html 渲染，须使用 `set:html` 指令并确保内容可信。

Astro 默认对所有 {expression} 插值进行 HTML 转义，这是关键的安全机制，可防止 XSS 攻击。因此，即使你在 characteristics 数组中传入类似 characteristic1 的字符串，Astro 也会将其原样输出为文本，而非解析为 HTML 元素。

要突破这一限制、让字符串被当作 HTML 解析并渲染，需使用 Astro 提供的 set:html 指令：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

---
const { title, subtitle, characteristics } = Astro.props;
---

<p class="title">{title}</p>
<p class="subtitle">{subtitle}</p>

{characteristics?.map((item) => (
  <p class="text" set:html="{item}"></p>
))}

✅ 正确示例：
若 characteristics = ["快速交付", "24小时支持"]，上述代码将渲染为：

<p class="text"><strong>快速交付</strong></p>
<p class="text"><em>24小时支持</em></p>

⚠️ 重要注意事项：

set:html 绕过自动转义，直接插入原始 HTML —— 仅适用于完全可信的内容（如 CMS 后台可控、开发者预设或经严格净化的字符串）。
绝对不要将用户输入（如表单提交、评论内容）未经消毒直接传入 set:html，否则将导致严重的 XSS 漏洞。
若需动态生成富文本且来源不可信，建议配合 DOMPurify 等库进行 HTML 净化后再赋值，例如：
```
import DOMPurify from 'dompurify';
const safeHTML = DOMPurify.sanitize(item);
```

? 替代方案（推荐用于简单格式）：
若仅需支持少量格式（如加粗、斜体），更安全的做法是约定 Markdown 或自定义标记（如 **bold**），再通过 remark + rehype 在服务端渲染为 HTML，避免客户端直接执行任意 HTML。

总之，set:html 是 Astro 中渲染内联 HTML 字符串的标准且高效方式，但务必以安全性为前提，权衡可控性与风险。