如何在 Lit 元素中安全渲染已转义的 HTML 字符串-html教程-PHP中文网

如何在 Lit 元素中安全渲染已转义的 HTML 字符串

Lit 默认对插值内容进行 HTML 转义以防止 XSS，若需将预高亮的 HTML 字符串（如 Prism.js 或 highlight.js 生成的）作为真实 DOM 渲染，必须显式绕过转义机制，推荐使用 unsafeHTML 指令。

lit 默认对插值内容进行 html 转义以防止 xss，若需将预高亮的 html 字符串（如 prism.js 或 highlight.js 生成的 ``）作为真实 dom 渲染，必须显式绕过转义机制，推荐使用 `unsafehtml` 指令。

在 Lit 中，模板表达式（如 ${this._code}）默认以 文本内容 方式插入，所有 、<code>>、& 等字符均被自动转义为 、<code>>、& —— 这是 Lit 的核心安全机制，可有效防御跨站脚本攻击（XSS）。但当你集成代码高亮库（如 highlight.js 或 Prism.js）时，它们返回的是已包含 HTML 标签的字符串（例如 '<span class="hljs-tag"><test></test></span>'），此时直接插值只会渲染出转义后的源码文本，而非高亮后的 DOM 结构。

✅ 正确做法：使用 unsafeHTML 指令
该指令明确告知 Lit：“此字符串已由可信来源处理，可作为原始 HTML 插入”。需先导入并应用：

import { LitElement, html } from 'lit';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';

class MyElement extends LitElement {
  private _code = '';

  render() {
    if (this.language) {
      return html`
        <h1>Hello</h1>
        <code class="language-${this.language}">${unsafeHTML(this._code)}</code>
      `;
    }
    return html`
      <h1>Hello</h1>
      <code>${unsafeHTML(this._code)}</code>
    `;
  }
}

⚠️ 重要注意事项：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

unsafeHTML 不执行任何清理或过滤，传入的字符串必须确保来自可信上下文（例如服务端预渲染、本地静态资源，或经严格校验的客户端高亮结果）；
切勿将用户输入、URL 参数、localStorage 原始值等未经净化的内容直接传给 unsafeHTML；
若高亮逻辑在客户端执行（如调用 highlightElement()），请确保所用高亮库本身不引入恶意标签（现代高亮库默认仅输出 <span></span> 等无交互标签，相对安全）；
替代方案（如手动设置 element.innerHTML）虽可行，但会脱离 Lit 的响应式更新与生命周期管理，易导致状态不一致，不推荐。