Question

通过脚本动态插入img时会出现问题。

使用以下代码插入地点的图像：

newPlace.find('.PlaceThumb').append('<img src="' + place.ThumbnailUrl + '" alt="' + place.Name + '" width="50px" style = "padding:2px;"/>');

有人可以说出他们的位置：“onload =”alert（'hi'）“并且标记将呈现为：

<img src="/item.aspx?id=123" alt="" onload="alert('hi')" width="50px" style = "padding:2px;"/>

加载图像后，脚本将执行。

虽然只有和标签支持onload属性，但这是一个绝对不相信用户输入的好教训。

这是什么“正确”（漂亮，优雅，干净，一般）的方式：

newPlace.find('.PlaceThumb').append('<img src="' + place.ThumbnailUrl + '" alt="' + place.Name.replace('"', '&quot;') + '" width="50px" style = "padding:2px;"/>');

我想也许可以使用模板，你可以在字符串上定义一个操作符来对它们进行UU编码 - 类似于C＃中以@为前缀的字符串对于反斜杠的特殊含义。有没有办法将此功能添加到标准.net字符串类？

Answer 1

AntiXSS library是一种可能的解决方案。要非常小心编码，因为你的代码似乎在数据和呈现的HTML之间有大量的层（ASP.Net - ＆gt;渲染HTML模板作为渲染JavaScript的一部分 - ＆gt;浏览器加载JavaScript - ＆gt;某些东西执行写入转而使用JQuery基于temeplate创建HTML。

注意：考虑将CSS（宽度和样式属性）与HTML布局分离为良好的HTML实践。

Answer 2

我不知道你是否使用jQuery。如果你是，那么你可以做这样的事情：

newPlace.find('.PlaceThumb').append('<img>');
$('.PlaceThumb img').attr('src', place.ThumbnailUrl).attr('alt', place.Name);

这可能不是有效的，它只是我的头脑，但应该给你一些东西来研究。

Answer 3

也许你可以使用新的Uri（yourUrlString）。我相信使用它（使用方法IsWellFormedUriString和IsWellFormedOriginalString）将帮助您验证输入。

用C＃消毒用户输入 - 最干净的方式？

3 个答案: