如何在表单中安全地显示用户的服务器端数据？

Question

我在通过 javascript.

在 html 中显示之前使用 mustache 转义用户数据

但是，当我使用它在表单输入字段中显示他们的数据时（通过 AJAX 从服务器检索用户数据后预填充表单），它会显示实体。

例如

Shaun's place

显示为

Shaun&#39;s place

我会在 Mustache 中使用三括号技巧，但这是否意味着数据不会被转义，从而使页面容易受到攻击？

MySQL中存储的数据是用户配置文件。
当我从服务器取回数据时，我运行通过以下胡须代码获取数据，然后将其保存在本地对象中 - 我的想法是我不必保留运行每次我要在网站上的不同地方展示它时，它都会有很多胡须。所以这里有一个例子，其中一个键，位置，正在处理：

var t="{{x}}",o={x:serverObjectReturn.location},x=Mustache.render(t, o); localUserDataObject.location=x;
不是 100% 确定内容类型的意思 - 我正在使用 AJAX 调用，并将数据发送回 JSON。 AJAX 函数数据类型是 "json"。如果您需要其他东西，请告诉我，我会编辑
我更新了表单输入字段，以便他们加载个人资料数据以供编辑，如下所示：

$("#location").val(userData.location);

那时我得到：

Shaun&#39;s place

...鉴于：

$("#testerDivLocation").html(userData.location);

显示

Shaun's place

谢谢。

Answer 1

这是关于这个主题的文档：

All variables are HTML escaped by default. If you want to return unescaped HTML, use the triple mustache: {{{name}}}.

所以你是对的，它可能会让你容易受到漏洞的攻击（尤其是 XSS）。这对于您已知可以安全地在 HTML 中呈现的数据很有用，也许是因为您已经逃脱了 and/or 在其他地方对其进行了清理。

由于 input 字段值略有不同，因为它们比普通 HTML 更原始，您可能需要在服务器端或 [=33] 中进行一些自定义转义=] 就在 render 调用之前。这意味着找出使输入字段处于危险之中的所有可能字符的集合（引号很明显，但是尖括号 <、> 呢？）

另一种方法是将 HTML 中的表单字段值留空，并使用 JavaScript 通过 DOM 设置它们的值。这对我来说感觉更安全，因为您不再试图将原始数据嵌入 HTML 代码。

var t="<input type='text' name='firstname' value=''>";
var x=Mustache.render(t);
$('input', x).val(serverObjectReturn.firstname);

（假设为 $ 调用加载了 jQuery）。

How to safely display user's server side data in a form?