0

私はhtml属性titleを使用して、次のようなヒントを設定します。

 <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）どうすればそれを解決できますか？（1つの解決策がダブル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>
4

1 に答える 1

1

1) 属性値はデコードされた値です。考えてみれば、これが唯一の方法です。JavaScript の値を "\n" に設定してアラートを出すと、"\n" または実際の改行を取得しますか? title 属性はテキストです... たまたまそれを HTML エンコードして書き込む必要があります。

2) 二重エンコードするか、テキスト ノードを使用できます。

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

これは推奨される方法であり、スパイダー/非 JavaScript ブラウザーには正しいタイトル属性が表示されます。

于 2009-05-05T10:49:12.140 に答える