画像 右クリックでのダウンロードは禁止！！

弊社では、物件画像を取り扱うシステムを構築することが多いんですが、

不動産会社さんにとって、画像は大事な資源です。

というのも、業者さんは、物件ごとに自分たちで写真を撮ってアップロードされています。

が、稀に、勝手に写真をサイト上から右クリックでダウンロードして、自分たちのサイトで使用されてしまうことがあります。

ということで、

マウスの右クリックでの画像ダウンロードを禁止したい！！

という要望があり早速対応してみることに。

setAttribute('oncontextmenu', 'return(brc2());');
function brc2(){
 return(false);
}

というJavascriptコードを作成して、

テスト開始！！

Firefox => OK
chrome => OK
IE8 => OK

ところが、IE6では動作してくれません。

更にIE7とOperaでも同様の現象が！！！！！！！！

早速調べてみると、

なんとsetAttribute()関数はIE6、IE7、Operaでは動作してくれないと事でした。

これはIE6、IE7のバグとして有名らしいです。

仕方ないので、

ブラウザの判定を行なってブラウザによって処理を変更するように修正しました。

var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();

if(userAgent.indexOf('opera') != -1){
 self._img.oncontextmenu=brc2;
}else if(userAgent.indexOf("msie") != -1){
 if(appVersion.indexOf("msie 6.") != -1 || appVersion.indexOf("msie 7.") != -1){
  self._img.oncontextmenu=brc2;
 }else{
  //IE8以降
  self._img.setAttribute('oncontextmenu', 'return(brc2());');
 }
}else{
 self._img.setAttribute('oncontextmenu', 'return(brc2());');
}

function brc2(){
 return(false);
}

こんな感じです。

このソース、もうちょっとスマートに出来そうですが、

今回は取り敢えず動作してくれればOKなんで、

そこは我慢！！

因みに、ブラウザの判定は

http://d.hatena.ne.jp/Naotsugu/20110927/1317140891

のサイトを参考にさせて頂きました。

本当は、

<img src="画像パス" oncontextmenu="return(false);">

といったように<img>タグに「oncontextmenu="return(false);"」を記述するだけでいいはずなんですが、

ちょっと特別な記述をしてみたかったんで、

今回は敢えてこんな複雑な処理にしてみました。

ただ、これは気休め程度の処理と思ってください。

ブラウザ上からソースをみれば画像のパスはばれてしまうので、

右クリックを禁止にしても簡単にダウンロード出来てしまいます。

さらに、マウスで画像をデスクトップなどへ向けてドラッグ&ドロップされてしまえば、

簡単にダウンロードされてしまいます。

とは言え、盗まれにくくはなります。

画像も大事な資源なので、大事な画像は盗まれにくくしておきましょう。