この記事について
| 環境 | HTML、javascript / jQuery(jquery.dwImageProtector.js) |
|---|---|
| 目的 | 公開している画像を持っていかれにくくする |
| 結果 | baseタグで画像の場所を隠す+右クリック禁止+dwImageProtectorで透明画像をかぶせる |
つまずきポイント要約
- インターネットで公開している以上、絶対に持っていかれない方法はない
- 右クリック禁止だけではデスクトップへのドラッグで保存できてしまう
インターネットで公開している以上、絶対に画像を持っていかれない方法はない。
ここで紹介するのは、画像を持っていきにくくして、知識の乏しい人なら画像の持ち出しを諦めるだろう方法。そして簡単に実装できる方法を選んだ。
１．baseタグで基準となるURLを設定する
baseタグは、相対パスで書かれたURLの基準を指定するもの。
もしページのソースを見られたら画像の場所がわかってしまう。
絶対パス
<img src="http://example.com/image2001/image01.jpg">相対パス
<img src="image2001/image01.jpg">上の二つどちらも、画像ファイルは「http://example.com/image2001/」の中にあると読める。
そこでbaseタグを使うと画像ファイルの場所を少し分かりにくくできる。
headタグの間にbaseタグを記述する
<base href="http://example.com/image2001/">すると「image2001フォルダ」までが基準になるのでimgタグへの記述は下記のようになる。
相対パスで
<img src="image01.jpg">「image2001」の記述を省略できるのでimgタグ内だけを見ても画像の場所が分からなくなる。
２．baseタグはjavascriptで隠す
imgタグだけを見ても画像ファイルの場所は分からないが、headタグ間に記述したbaseタグを見ると分かってしまう。
そこでbaseタグはheadタグ間に書かずに、外部ファイルとしてjavascriptで書くとよりいい。
外部ファイルとして読み込む
document.write('<base href="http://example.com/image2001/">');参考
http://www.broadband-xp.com/hidesource/base.html
３．右クリックを無効にする
これまでの実装でソースを見ても画像ファイルの場所をわかりにくくすることは出来るが、画像自体を右クリックすれば画像のURLも分かるし、保存も出来てしまう。
そこで右クリックを禁止する。
bodyタグ内に記述
<body onContextmenu="return false">これだと右クリックは防げるがデスクトップへドラッグすれば保存できてしまう。
そこでjquery.dwImageProtector.jsというjqueryのプラグインを使う。
使い方はこちらが分かりやすい。
http://www.css-lecture.com/log/javascript/dwimageprotector.html
jquery.dwImageProtector.jsのソースはこんな感じ
jQuery.fn.protectImage = function(settings) {
settings = jQuery.extend({
image: 'blank.gif',
zIndex: 10
}, settings);
return this.each(function() {
var position = $(this).position();
var height = $(this).height();
var width = $(this).width();
$('<img />').attr({
width: width,
height: height,
src: settings.image
}).css({
border: '1px solid #f00',
top: position.top,
left: position.left,
position: 'absolute',
zIndex: settings.zIndex
}).appendTo('#content')
});
};head内のソースはこう
<script src="http://example.com/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://example.com/js/jquery.dwImageProtector.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).bind('load', function() {
$('img.protect').protectImage();
});
</script>保護するイメージには class を設定する
<img src="image01.jpg" alt="" width="500" height="500" class="protect" />画像を囲む枠がずれる場合は「.appendTo(‘body’)」の部分をbodyでなく任意の場所に変更すればうまくいく。
