雑多なノート

プログラミング初心者がメモとかを書きます。基礎的なこともメモとして。偏食系のアニオタ。

jqueryから属性値を取得すると実体参照が元に戻る?

Magnific PopupとcollagePlusというライブラリでクリックした画像をモーダルで拡大表示する機能を作っていたのだが,完成段階で問題が生じた.
作っていたのはツイッターの画像を一覧表示するWebアプリ.
f:id:vayacico:20170625220232p:plain
ホバーするとツイート情報を表示する.
f:id:vayacico:20170625220250p:plain
画像をクリックするとツイートオブジェクトと一緒にホップアップ表示する.
f:id:vayacico:20170625220318p:plain
APIとはいえ外部からテキストを持ってきているのでXSS対策をする必要があったのだけど,ホバー表示の部分が上手くいかなかった.
htmlspecialcharsで実体参照に変換しているのになぜかHTMLタグが有効になる.
以下が名前に<pre>を入れた場合.
f:id:vayacico:20170625220400p:plain
<pre>タグが作用して正しく表示されていない.
ホップアップは正しく動作するのになんでここだけ上手くいかないのか調べたら属性値から値を取得する段階で実体参照が解除されてるっぽいことが分かった.


ホバー表示はcollagePlusの機能を利用して実装してる.
表示するHTMLはこんな感じでdata-captionという属性の属性値に与える.

<div data-caption="<p class='caption_username'>&lt;pre&gt;</p><p class='caption_screen_name'>@vayacico</p><p class='caption_date'>2017-06-25 12:09:59</p>" class="popup_test" id="878948385163628544">
    <img src="http://pbs.twimg.com/media/DDKm5NEV0AAjlWz.jpg:small">
</div>

ここでdata-captionの内容をjqueryで取得するとこうなった.

 > $('.popup_test').data('caption')
"<p class='caption_username'><pre></p><p class='caption_screen_name'>@vayacico</p><p class='caption_date'>2017-06-25 12:09:59</p>"

実体参照が解除されている.
ライブラリの実装追う気力は無かったのでわからないけど多分こんな感じで取得してHTMLを構成してるのが原因なのかもしれない.

というわけで何となくスッキリしないけどhtmlspecialcharsを2回かけることで何とか正常に表示できるようになった.
根本的な解決になってないような気もするし穴がありそうで落ち着かないのだけど.
この現象でググっても似たような話出てこないので自分が何か勘違いをしているだけな気もするし.

誰か詳しい方見てたら教えてください(+o+)

追記

Twitter APIから返される内容って常に安全なものになってるっぽい?
API叩いてみたら実体参照の状態で帰ってきたんだけど…?