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

はじめに

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

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

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

禁止したい操作

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

CSSによる制限

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

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

jQueryによる制限

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

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

おわりに

以上、メモ記事でした。

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください