jquery - 在 jquery 模板中将 < 渲染为文本而不是 < 或 > 因为它不是 >

Question

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

我的 jquery 模板如下：

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

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

Answer 1

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

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

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

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

但是，如果您需要在前端执行此操作，您可以编写一个简单的 jQuery 函数来对值进行编码（无耻地从这个答案中窃取）：

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/

Answer 2

要从&字面上理解，请使用<

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

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

http://jsfiddle.net/yCuZt/