【画像の保存禁止】サイト上で画像の保存をさせない方法

CODE
この記事のURLとタイトルをコピーする
ブログなどに掲載している画像、保存できないように対策したいときがあります。
そんなときに実装する、画像を引用できないようにするための方法です。

今回はフロントで簡単にできる、2パターン。
  • ・右クリックを禁止する
  • ・ドラッグ&ドロップを禁止する
それぞれ確認していきましょう。

右クリックを禁止する方法

右クリックして画像の保存ができないようにする方法です。
実装対象を、ページ全体画像のみのどちらかで設定することができます。

bodyタグにoncontextmenu=”return false;を追加します。
ページ全体を右クリック禁止にする
画像のみ右クリックを禁止する

ドラッグ&ドロップを禁止する

ドラッグ&ドロップで画像の保存ができないようにする方法です。
こちらも実装対象を、ページ全体画像のみのどちらかで設定することができます。

bodyタグにonselectstart=”return false;”onmousedown=”return false;を追加します。
ページ全体のドラッグ&ドロップを禁止にする
画像のみのドラッグ&ドロップを禁止する

さいごに

今回は画像を保存させない2通りの方法について書きました。
  • ・右クリックを禁止する
  • ・ドラッグ&ドロップを禁止する
簡単に実装できるので、ぜひ試してみてください。
この記事のURLとタイトルをコピーする


share