先日のエントリー
≫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の実行はされません。
（前回とツールチップの出現演出を変えてフェードにしてみました。）
システムと大きく絡まないサイトでは前回の構成で問題がありませんが、
問題が発生しそうなサイトではこちらを使ってみてもらえれば脆弱性の問題は回避されます。
こんな感じですが何かの際には是非。。。