右クリックやドラッグアンドドロップによる画像保存を禁止する【CSS／jQuery】

1 はじめに
2 CSSでドラッグアンドドロップを禁止する
- 2.1 禁止したい操作
- 2.2 CSSによる制限
3 jQueryで右クリックとドラッグアンドドロップを禁止する
- 3.1 jQueryによる制限
4 おわりに

はじめに

Ruby on Railsを使ったWebアプリケーション作成中に、本題のようなことがやりたいと思ったので調べました。そのメモを残しておきます。

ただし、これはフロントエンドで簡単に制御するに過ぎず、この方法だけで完全に画像保存が禁止できるわけではないのでご注意ください。

CSSでドラッグアンドドロップを禁止する

禁止したい操作

禁止したいのはこのような操作です。

CSSによる制限

img {
  pointer-events: none;
}

imgタグを対象として上のようなCSSを適用するだけです。一部の画像のみ対象にしたいときは各々対象を変更すること。

jQueryで右クリックとドラッグアンドドロップを禁止する

jQueryによる制限

<script>
$(function(){
  $('img').attr('onmousedown', 'return false');
  $('img').attr('onselectstart', 'return false');
  $('img').attr('oncontextmenu', 'return false');
});
</script>

onmousedown, onselectstartでドラッグを禁止、oncontextmenu で右クリックを禁止するようですね。

一応次のようにも書けます。

<!-- 1枚のイメージだけ右クリック禁止 -->
<img src="hoge.jpg" oncontextmenu="return false;">

<!-- ページ全体の右クリック禁止 -->
<body oncontextmenu="return false;">

おわりに

以上、メモ記事でした。

繰り返しですがこの程度のことは多少知識がある人には簡単に突破されるので、あくまでシンプルに禁ずる方法として覚えておきましょう。