代码之家 › 专栏 › 技术社区 › stej

为什么HTML属性返回为“htmldecoded”,即使是在HTML源代码中编码的?

html-encode dom html

0

stej · 技术社区 · 16 年前

我使用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>

然后tooltip div如下所示:

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

1)为什么浏览器在查询其值时会解码标题属性?

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>

1 回复 | 直到 10 年前

1

Greg 16 年前

1)属性值是解码后的值-这是唯一有意义的方法。如果您将javascript值设置为“\n”,然后警告它,您想返回“\n”还是真的换行?标题属性是文本…你只需要对它进行HTML编码就可以编写它。

2)您可以对其进行双重编码,也可以使用文本节点:

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

这是首选的方式,然后spider/non-javascript浏览器将看到正确的标题属性。