先日のエントリー
jQueryでツールチップ。
のツールチップは通常のHTMLサイトでは動作的に問題が無いのですが、
システムと大きく絡む構成のサイトにおいて、ツールチップ内に表示する内容が、
ユーザーの入力した任意の値を組み込んだりする場合、
title属性からツールチップを表示する構成には脆弱性が発生する可能性があることが判明。
(title属性に記述する内容は<>を<や>と記載した場合もタグと判断されてしまい
タグのエスケープ処理が不可能になる。)

そんな時の為のツールチップVer2のスクリプトについて。
title属性は使用せずに<span>で囲った中の値をツールチップで表示するパターン。

HTMLソースの構成は
——————————————————————–
<a href=”#”><img src=”○○○○○○” /></a>
——————————————————————–
の様なリンクタグでツールチップを出す際に、ソースに
——————————————————————–
<a href=”#”><img src=”○○○○○○” /><span class=”tooltips”>(ツールチップに表示する内容)</span></a>
——————————————————————–
といった具合いにリンクタグ内に<span class=”tooltips”>を追加します。

そして実際のスクリプトは以下の様な感じに。

◆SCRIPT ———————————————————–
$(function(){
 $(“span.tooltips”).each(function(){
  $(this).css(“display”,”none”);
 });
 $(“a:has(span.tooltips)”).mouseover(function(e){
  $(“body”).append(“<div id=’ttp’>”+ ($(this).children(“span.tooltips”).html()) +”</div>”);
   $(“#ttp”)
    .css(“position”,”absolute”)
    .css(“top”,(e.pageY) + 15 + “px”)
    .css(“left”,(e.pageX) + 15 + “px”)
    .css(“display”,”none”)
    .css(“filter”,”alpha(opacity=85)”)
    .css(“opacity”,”0.85″)
    .fadeIn(“fast”)
 }).mousemove(function(e){
   $(“#ttp”)
    .css(“top”,(e.pageY) + 15 + “px”)
    .css(“left”,(e.pageX) + 15 + “px”)
 }).mouseout(function(){
   $(“#ttp”).remove();
 });
});
——————————————————————–
始めの部分で<span class=”tooltips”>をまず非表示[display=none]に。
(これはCSS側でも設定しておいた方が○)

<a>タグの<span class=”tooltips”>を子要素に持っている値に対して、
マウスオーバーで自分の子要素<span class=”tooltips”>のテキストを
<div id=”ttp”>(←ツールチップ用のソース)に入れて表示する構成になります。

動作サンプルは以下(画像にマウスオーバしてみて下さい。)
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

画像(リンク付き)にマウスオーバーすることでツールチップが出現します。
テキスト内にある「ダミーリンク」には子要素<span class=”tooltips”>がないので
SCRIPTの実行はされません。
(前回とツールチップの出現演出を変えてフェードにしてみました。)

システムと大きく絡まないサイトでは前回の構成で問題がありませんが、
問題が発生しそうなサイトではこちらを使ってみてもらえれば脆弱性の問題は回避されます。

こんな感じですが何かの際には是非。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでツールチップ。Ver2

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner