在 jquery 模板中将 &lt 呈现为文本而不是 < 或 &gt 因为它不是 >

Posted 2023-02-19

【中文标题】在 jquery 模板中将 &lt 呈现为文本而不是 < 或 &gt 因为它不是 >

【英文标题】：Render &lt as text instead of < or &gt as it is not > in jquery template

【发布时间】：2013-03-17 08:30:34

【问题描述】：

我有一个文本<script>alert('injection');</script>，我想在视图中呈现它，它在 ASP MVC3 应用程序中呈现为 jquery 模板。但是< 显示为<。

我的 jquery 模板如下：

<script id="nameTemplate" type="text/x-jquery-tmpl">
    <p>$Name</p>
</script>

我们如何将其呈现为纯文本？

【问题讨论】：

您可以进行搜索并将& 替换为&

如果答案解决了您的问题，请务必接受 :)

【参考方案1】：

正如 SpaceBison 所暗示的，您的浏览器将解码 html 编码的值并将它们写为“纯文本”HTML。

为了将值写出编码，您实际上必须对值进行“双重编码”，因此当浏览器解码并呈现它时，它仍然会被编码一次。 p>

如果您的值最初来自 ASP.NET MVC 模型属性或类似属性（假设这基于您的标签），您可以在服务器端代码中使用 HttpUtility.HtmlEncode，例如：

Model.Name = HttpUtility.HtmlEncode(Model.Name);

但是，如果你需要在前端这样做，你可以编写一个简单的jQuery函数来编码值（无耻地从this answer窃取）：

function HtmlEncode(str) 
    return String(str)
        .replace(/&/g, '&')
        .replace(/"/g, '"')
        .replace(/'/g, ''')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');

然后，您可以在 jQuery 中执行以下操作，然后再将项目添加到容器中：

Name = HtmlEncode(Name);

查看实际效果：http://jsfiddle.net/Rb2VJ/1/

【参考方案2】：

要从字面上获取&，请使用<

$(elem).text("<"); 也会将其显示为纯文本。

$(elem).html("<"); 用于 HTML。

http://jsfiddle.net/yCuZt/

【讨论】：

我的问题是 $Name 的值是 <script>alert('injection');</script>。我想按原样显示。但是，当它呈现为