続・画像をダウンロードさせない方法？

• 2008年4月17日 17:00
• (X)HTMLJavaScript

Tweet

前回「画像をダウンロードさせない方法？」ということで、本画像を背景に配置し、その上にダミーの透明画像を配置するという方法を紹介しました。しかし、この方法ではソースを見れば画像のURLはすぐわかってしまいます。

今回は、前回の方法に、画像のURLをわかりにくくする方法を追加してみました。

続・画像をダウンロードさせない方法？手順

1. 本画像を背景に配置
2. 上にかぶせるようにダミーの透明画像を配置
3. 画像配置を外部JavaScriptに記述
4. 外部JavaScriptの、画像URLをHTMLエンティティ化
5. 外部JavaScriptを難読化

上記の手順に沿って、実際に作ったサンプルです。

• サンプルHTML
• サンプルJavaScript

画像の配置方法

画像の配置ですが、単純に横並びに配置した画像をCSS「position」で制御して重ねているだけです。今回はimg要素で画像を配置しましたが、CSS「background-image」で制御しても良いかもしれません。

<p><img src="http://www.ibnet.ne.jp/images/logo.gif" /><img src="http://www.ibnet.ne.jp/images/spacer.gif" width="221" height="59" /><p>

p { position: relative; }
p img { position: absolute;}

画像配置JavaScriptの記述

外部JavaScriptですが、行っているのは「document.write」で画像を2つ配置しているだけです。元々はこんな感じになります。

document.write('<img src="http://www.ibnet.ne.jp/images/logo.gif" /><img src="http://www.ibnet.ne.jp/images/spacer.gif" width="221" height="59" />');

画像URLをHTMLエンティティ化

まず画像URLを、まずHTMLエンティティ化します。

HTMLエンティティ化

document.write('<img src="&#104;t&#116;&#112;&#58;&#47;&#47;k&#46;y&#105;&#109;&#103;&#46;&#106;&#112;&#47;i&#109;&#97;&#103;&#101;&#115;&#47;top&#47;&#115;p&#47;&#108;&#111;&#103;o&#46;&#103;&#105;f" />');

JavaScriptを難読化

次にJavaScriptを難読化します。

JavaScriptを難読化 /packer/

eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('q.b(\'<n e="&#8;7&#l;&#4;&#d;&#0;&#0;k&#2;a&#6;&#5;&#1;&#2;&#j;&#4;&#0;i&#5;&#g;&#1;&#h;&#3;&#0;c&#0;&#3;p&#0;&#m;&#9;&#1;o&#2;&#1;&#6;f" />\');',27,27,'47|103|46|115|112|109|105|t|104|111|y|write|top|58|src||97|101||106||116|108|img|||document'.split('|'),0,{}))

ここまで行えば、パッと見では画像のURLがどこら辺に書かれているかすらわからなくなります。
まあ、この方法も画面をキャプチャーされれば終わりですし、ちょっと時間をかければ画像のURLもわかっちゃいますが、軽い気持ちでダウンロードしようという方々には効果あるかもしれません。

「めんどくせぇ！もーやめた！」と思わせたら勝ちかな、という程度のローテクな方法の紹介でした。

08年11月4日　追記：

JavaScriptを利用したもっと簡単な方法を見つけました。CSSのclass「protect」を付けるだけで出来るので、画像が複数あっても楽に出来ます。

しかし、JavaScriptやCSSを切ってやればダウンロード出来ていまいます。なかなか「コレ！」という方法は見つかりませんね。

• MooTools 1.2 Image Protector: dwProtector
• view the example

Tweet