如何在模板中安全地显示HTML标签不被浏览器解析？

在网站内容管理中，我们经常会遇到需要展示HTML代码片段，例如教程中的代码示例、技术文章中的标记语言说明等。然而，如果直接将这些包含HTML标签的内容输出到页面，浏览器会将其解析并渲染，而非将其作为纯文本显示。这不仅可能导致页面布局错乱，更严重的是，未经处理的用户输入若包含恶意脚本（如 <script>alert('XSS')</script>），会引发跨站脚本（XSS）攻击，给网站安全带来巨大隐患。

安企CMS（AnQiCMS）的模板引擎设计充分考虑了这一点，它提供了一套安全、灵活的机制来处理HTML内容的显示。理解这些机制，可以帮助我们既能安全地展示内容，又能有效预防潜在的安全风险。

理解模板的默认行为：自动转义

AnQiCMS 的模板引擎，类似于Django等主流模板引擎，默认对所有通过 {{ 变量 }} 方式输出的内容进行自动HTML转义。这意味着，当模板变量中包含如 <、>、&、"、' 等特殊HTML字符时，它们会被自动转换为对应的HTML实体，例如 < 会变成 &lt;，> 会变成 &gt;。

这种默认的转义行为是网站安全的第一道防线，它确保了即使用户在提交内容时无意或恶意地插入了HTML标签或JavaScript代码，这些内容在显示时也会被“无害化”处理，仅仅作为文本呈现在页面上，而不会被浏览器解析执行。

举个例子，如果您在后台某字段中输入了以下内容：

<p>这是一段包含<strong>粗体</strong>文字的HTML。</p>
<script>alert('Hello, AnQiCMS!');</script>

并试图在模板中使用 {{ archive.Content }} 来显示它，那么在浏览器中实际看到的是：

<p>这是一段包含<strong>粗体</strong>文字的HTML。</p>
<script>alert('Hello, AnQiCMS!');</script>

而不是一个被渲染的段落和一个弹窗。这就是自动转义在发挥作用。

明确转义：escape 过滤器

虽然默认的自动转义已经提供了良好的防护，但在某些特定场景下，我们可能需要明确地指示模板引擎对某个变量进行HTML转义，尤其是在处理一些复杂数据结构或者需要覆盖其他可能行为时。这时，可以使用 escape 过滤器。

escape 过滤器的作用是将内容中的特殊HTML字符转换为HTML实体。它的使用方式非常直观，只需在变量名后加上 |escape 即可：

{# 假设 raw_html_string 变量包含未经处理的HTML内容 #}
<div>
    我们想显示这段代码：<code>{{ raw_html_string|escape }}</code>
</div>

例如，如果 raw_html_string 的值为 <img src="x" onerror="alert('XSS')">，那么通过 {{ raw_html_string|escape }} 输出后，页面上会显示 <img src="x" onerror="alert('XSS')"> 这样的纯文本，而不是一个可能触发攻击的图片元素。

escape 过滤器是确保任何可能包含HTML字符的内容以纯文本形式显示的关键工具，它与默认的自动转义协同工作，为内容展示提供了双重保障。

按需清理：striptags 和 removetags 过滤器

有时，我们的需求不是显示HTML标签，而是完全移除它们，只保留纯文本内容。AnQiCMS 提供了 striptags 和 removetags 两个过滤器来实现这一目的。

  • striptags 过滤器：顾名思义，它会移除内容中的所有HTML标签，只留下标签内的文本。这在提取文章摘要、生成纯文本描述等场景非常有用。

    {# 假设 article.Description 包含 HTML 内容 #}
<p>文章摘要：{{ article.Description|striptags }}</p>

    如果 article.Description 是 <span>这是一段<em>加粗</em>的描述。</span>，那么 {{ article.Description|striptags }} 将输出 这是一段加粗的描述。。

  • removetags 过滤器：如果您只需要移除特定的HTML标签，而不是全部，removetags 过滤器可以派上用场。它接受一个以逗号分隔的标签名称列表作为参数。

    {# 移除内容中的 <b> 和 <i> 标签 #}
<div>
    过滤后的内容：{{ some_html_content|removetags:"b,i"|safe }}
</div>

    需要注意的是，striptags 和 removetags 的目的是清理HTML，而非将其显示为文本。在实际应用中，它们常用于对用户生成内容进行预处理，以符合页面展示或搜索引擎抓取的要求。

总结与**实践

在AnQiCMS模板中安全地显示HTML标签而不被浏览器解析，核心在于利用模板引擎的自动HTML转义机制，并通过escape 过滤器进行明确的、强制性的转义。

以下是一些**实践建议：

  1. 信任默认转义：对于所有从后台获取或用户输入的内容，除非您明确知道其来源安全且意图作为HTML渲染，否则都应信任模板引擎的默认转义行为。
  2. 主动使用 |escape：当您需要展示代码片段、HTML示例或任何可能包含特殊HTML字符的文本时，主动使用 {{ 变量|escape }} 过滤器，以确保它们作为纯文本显示。
  3. 谨慎使用 |safe：相反地，如果您希望某个变量中的HTML内容被浏览器解析并渲染（例如，后台编辑器中编辑的富文本），则需要使用 {{ 变量|safe }} 过滤器。但请务必确保这些内容是来自可信来源且已经过严格过滤和验证，因为滥用 |safe 是导致XSS攻击的主要原因。
  4. 利用 striptags 和 removetags 清理内容：当目标是完全去除HTML标记以获取纯文本时，这两个过滤器是您的好帮手。

通过合理运用这些模板功能，您可以在AnQiCMS中轻松实现HTML标签的安全展示，同时维护网站的整体安全。

常见问题 (FAQ)

Q1：为什么我明明在模板里输出了 <p>Hello</p>，但浏览器却没有显示一个段落？ A1：这是因为AnQiCMS的模板