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

如何在 Astro 中安全地渲染 HTML 字符串

在 Astro 组件中，直接插入含 HTML 标签的字符串（如特征）默认会被转义为纯文本；需使用 set:html 指令显式声明信任该内容，才能将其解析为真实 DOM 节点。

在 astro 组件中，直接插入含 html 标签的字符串（如 `特征`）默认会被转义为纯文本；需使用 `set:html` 指令显式声明信任该内容，才能将其解析为真实 dom 节点。

Astro 默认对插值表达式（如 {item}）执行 HTML 转义，这是出于安全考虑——防止 XSS 攻击。因此，即使你在 characteristics 数组中传入类似 "免运费" 的字符串，Astro 也会原样输出为文本，而非加粗的 HTML 元素。

要正确渲染 HTML 字符串，必须使用 Astro 的 set:html 指令：

---
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>
))}

✅ 正确示例（在 .astro 文件中）：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

<plan title="基础套餐" subtitle="适合个人开发者" characteristics="{[">无限带宽",
    "支持 <code>WebSockets</code>",
    "每月 <em>10 万次 API 调用</em>"
  ]}
/></plan>

⚠️ 重要注意事项：

set:html 会绕过转义机制，直接将字符串注入 DOM —— 仅限可信内容使用。若 characteristics 来自用户输入或外部 API，务必先进行 HTML 清洗（例如使用 DOMPurify.sanitize()），否则存在严重 XSS 风险。
不推荐在 set:html 中嵌入复杂结构（如 <script>、<iframe> 或事件处理器），Astro 不会执行其中的 JS，且可能引发安全或渲染异常。 </script>
若只需简单格式化（如加粗、斜体），更安全的替代方案是：将富文本语义拆解为结构化数据（如 [{ type: 'bold', text: '免运费' }]），再在组件内映射为对应标签。

总结：set:html 是 Astro 中渲染动态 HTML 字符串的标准方式，但其本质是“信任即渲染”。请始终遵循“最小权限”原则——只对已验证、受控的 HTML 内容启用该指令。