ng3

[PC・スマホ]サイト上の画像の保存をできる限り阻止する対策法


クライアントから「サイト内の画像を保存できないようにしてほしい!」というご要望をいただくことがたまにあります。
ウェブサイトに画像を掲載している以上、画像保存を完全に阻止するということは不可能です

ソース読めば画像のパスなんてわかるし。最後は画面キャプチャしちゃえばいいし。
なので完全に阻止することはできませんが、できる限り画像保存までの手間を増やす対策をご紹介します。

  • 1:jQueryで「contextmenu」イベントを使って右クリックを禁止にする
  • 2:スマホの場合 CSSを使って長押しアクションを禁止する
  • 3:スマホの場合2 jQueryのタッチイベントを使って画面の長押し後に表示されるメニューを表示させないようにする
  • 4:jQueryライブラリ「dwImageProtector Plugin」を使って対象画像の上に透過画像を重ねる

1:jQueryで「contextmenu」イベントを使って右クリックを禁止にする

migiclick
右メニューにはいろいろな機能があるので、ページ全体に禁止のコードをかけちゃうと不便になることも多いですよね。
なので、下記のコード例では画像の領域に対してだけ右クリックを禁止にします。
contextmenuイベントをreturn falseするだけでOK。

2:スマホの場合 CSSを使って長押しアクションを禁止する

スマートフォンやタブレット端末の場合は右クリック操作の代わりに、画面を長押しすると下記のような保存メニューが表示されます。
IMG_1755
このメニューが出ないように下記のCSSをbodyに記述します。

touch-callout「none」を設定することで長押し後のメニューを表示させなくする
user-select「none」を設定することで要素を選択できなくさせる
caniuse.com > 各デバイスの「user-select」対応状況はこちら

Javascriptを書かずにCSSだけで対応できるで楽で良いですね〜〜(´∀`*)ウフフ
、、、しかし、このCSSはAndroid2〜4.xまでに搭載されているの標準ブラウザには効きません(Chromeだと動作します)。
なので、Android標準ブラウザ向けにも対策をしたい場合は次の3つめの方法を使います。

3:スマホの場合2 jQueryのタッチイベントを使って画面の長押し後に表示されるメニューを表示させないようにする

Androidの場合、保存対象を長押しすることで保存メニューが表示されます。
なので、裏技的な考え方ですがこの長押しするという行為を邪魔すれば良いのでは…。
ということで下記のようなコードで対策を行います。

Screenshot_2015-04-27-12-17-57

上記のコードでは、画像に対してタッチスタートイベントが始まったらその500ミリ秒後に、「画像は保存できません」というalertが表示されます。画像保存のメニューが表示されるよりも前にalertダイアログを表示し、保存メニューが表示されるのを回避しています。
※500ミリ秒という時間はもしかしたら端末によっては調整しないといけないかもしれません。
※他に使用しているライブラリなどでtouchイベントを使っているものがあった場合(たとえばバナー画像をフリックさせるプラグインなど)、動作がバッティングしてしまう可能性があるので注意してください。

4:jQueryライブラリ「dwImageProtector Plugin」を使って対象画像の上に透過画像を重ねる

最後は、jQUeryプラグインのご紹介。dwImageProtector Plugin(デモ)を利用します。
このプラグインを利用すると、自動的に画像ファイルの上に透過のgifを重ねてくれます。
右クリックや画面長押しした際に保存できる画像は元画像ではなくその上にある透過のgifにだけにすることができます。

dwImageProtectorPlugin

jQuery本体とライブラリを読み込んだ上で、必要な記述コードは下記です。

以上、
サイト上の画像の保存をできる限り阻止する対策法でした。

Related Posts

About Blog

スマホサイト制作のフロントエンド・UIについてのノウハウをご紹介しています。

mobile-design Pinterest

スマートフォンサイトのデザインまとめPinterest。株式会社hi-posiのスタッフが日々更新中。