在 Astro 组件中，直接插值字符串（如 characteristics 数组中的内容）默认会被转义为纯文本；若需将字符串作为 HTML 渲染，须使用 set:html 指令并确保内容可信。
在 astro 组件中，直接插值字符串（如 `characteristics` 数组中的内容）默认会被转义为纯文本；若需将字符串作为 html 渲染，须使用 `set:html` 指令并确保内容可信。
Astro 默认对所有 {expression} 插值进行 HTML 转义，这是关键的安全机制，可防止 XSS 攻击。因此，即使你在 characteristics 数组中传入类似 <strong>characteristic1</strong> 的字符串，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>
))}✅ 正确示例：
若 characteristics = ["<strong>快速交付</strong>", "<em>24小时支持</em>"]，上述代码将渲染为：
<p class="text"><strong>快速交付</strong></p> <p class="text"><em>24小时支持</em></p>
⚠️ 重要注意事项：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 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 字符串的标准且高效方式，但务必以安全性为前提，权衡可控性与风险。
立即学习“前端免费学习笔记（深入）”；
