Chromeで読み込みに失敗した画像についてリファラを消して再読み込みを試みる方法
[追記]実際に使用したい方は @civic さん作のLDR Image Loader extensionをどうぞ。
Chrome Dirty Hacks 01: fc2 image for LDR - 枕を欹てて聴くの別解みたいなのです。要は、livedoor Readerでfc2やアメブロの画像を表示してやろうというネタです。
まず、id:edvakfさんが実験していた
edvakf's
gist: 48621 — Gist
から
インラインフレームにdataスキームでhtmlを挿入するとlocationがそのdataスキーム自身になり、そこからのリクエストにはリファラがつかない
というテクニックを応用して、さらに
- errorイベントキャプチャリングフェーズで監視*1して画像のerrorを捕捉
- インラインフレームを作ってデータスキームのhtmlを挿入し、そのなかで読み込みに失敗した画像を読み込むことでリファラを削除して画像を読み込む
- 画像は読み込まれるが、インラインフレームのサイズと画像のサイズが合わない
- データスキームで読み込んだhtmlはSame-Originの制約を受けるので、フレームの中から直接フレームのサイズを変えることはできない
- そこで、MessageEventで親に画像サイズをpostMessageして、メインのページ側でメッセージを受け取ってインラインフレームのサイズを修正する
という方法を使っています。
http://gist.github.com/281516
かなり試行錯誤したおかげか、スマートな雰囲気のするバッドノウハウに…
あとはリファラの偽装ができれば良いのだけど、それはさすがに難しそう…。
*1:addEventListenerの第3引数をtrueに。errorイベントはバブルしないので。
