Question

我使用html属性标题设置一些这样的提示：

 <a href... title="Go to next chapter">Go</a>

然后jquery插件遍历所有[title]属性并制作漂亮的工具提示。非常简化为上面的链接创建了一个新的div

<div style="position:absolute...">Go to next chapter</div>

问题是，标题可由用户编辑，因此他可以写任何他想要的内容。我首先认为html编码很好，但事实证明我错了。如果我有

<a id="a" title="&lt;script&gt;alert(10);&lt;/script&gt">Go</a>

然后工具提示div看起来像这样：

<div style="position:absolute..."><script>alert(10)</script></div>

1）为什么浏览器在查询其值时会对title属性进行解码？

2）我该如何解决？（我知道一个解决方案是双html编码，但它很糟糕）

如何测试：考虑此代码

<html>  
 <body>  
  <!-- encoding once, this doesn't work -->
  <a id="a" title="&lt;script&gt;alert(10);&lt;/script&gt">atitle</a>  
  <!-- encoding twice, this works -->
  <a id="b" title="&amp;lt;script&amp;gt;alert(10);&amp;lt;/script&amp;gt">btitle</a>  

  <script>  
   function w(x){ document.write(x.attributes["title"].value);}  
   w(a);  // shows alert
   w(b);  // outputs it correctly into the page
  </script>  
 </body>  
</html>

Answer 1

1）属性值是解码值 - 如果您考虑它，它是唯一有意义的方法。如果您将javascript值设置为“\ n”然后提醒它，是否要返回“\ n”或真正的换行符？ title属性是文本...您只需对其进行HTML编码即可编写它。

2）您可以对其进行双重编码，也可以使用文本节点：

var node = document.createTextNode(x.attributes['title'].value);
document.appendChild(node);

这是首选方式，然后蜘蛛/非JavaScript浏览器会看到正确的标题属性。

为什么html属性返回为'htmldecoded'，即使在html源代码中编码？

1 个答案: