HTML属性中的引用会破坏布局

Question

我的网站包含用户生成的内容。我注意到，如果用户在某些文本中有引号，之后我在HTML属性中显示该文本，那么布局将在IE中搞砸。

<a href="link.html" title="user "description" of link">Hello</a>

但是，如果我用Javascript（Prototype库）生成了相同的锚点，那么IE中的布局就不会搞砸了：

$$('body').first().appendChild(
 new Element(
  'a', {
   title: 'user "description" of link',
   href: 'link.html'
  }
 ).update('Hello')
);

为什么会这样？ JS和纯HTML版本都有相同的预期结果，但只有JS不会搞砸IE。幕后发生了什么？

---

BTW，我从所有用户输入中执行strip_tags（）并清除XSS攻击，但我没有删除所有HTML实体，因为我使用了大量的表单文本输入框来显示用户生成的文本。表单元素字面上显示HTML实体，看起来很难看。

Answer 1

您需要转义用户指定的所有输出（使用实体）。 DOM方法自动完成。

Answer 2

我不知道你是如何处理用户生成的内容的，但是你可以使用替换函数来清理像string.replace("\"", "")这样的输入

Answer 3

您的问题的答案：'为什么会这样'是因为在您的JavaScript示例中使用单引号设置title属性。因此，用户生成的字符串中的双引号已经被转义。

在你的标签示例中，在title属性中使用的文本周围的单引号可能是解决渲染问题的一种方法。

然而，您的HTML属性应该是双引号，因此最好使用实体，正如@elusive在回答中所建议的那样。