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

2019年12月13日 2021年10月27日

CODE

この記事のURLとタイトルをコピーする

ブログなどに掲載している画像、保存できないように対策したいときがあります。
そんなときに実装する、画像を引用できないようにするための方法です。

今回はフロントで簡単にできる、2パターン。

それぞれ確認していきましょう。

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

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

bodyタグにoncontextmenu=”return false;を追加します。

<body oncontextmenu="return false;">

1	<body oncontextmenu="return false;">

<img src="/images/sample.png" alt="" oncontextmenu="return false;" />

1	<img src="/images/sample.png" alt="" oncontextmenu="return false;" />

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

bodyタグにonselectstart=”return false;”とonmousedown=”return false;を追加します。

<body onselectstart="return false;" onmousedown="return false;">

1	<body onselectstart="return false;" onmousedown="return false;">

<img src="/images/sample.png" alt=""  onselectstart="return false;" onmousedown="return false;" />

1	<img src="/images/sample.png" alt="" onselectstart="return false;" onmousedown="return false;" />

今回は画像を保存させない2通りの方法について書きました。

簡単に実装できるので、ぜひ試してみてください。

この記事のURLとタイトルをコピーする