プラカンブログSTAFF BLOG

2018.02.27

「画像を保存させない、ノーコピー」の巻

システムのまついです

今回はPHPなどのサーバーサイドスクリプトを使わずに、JavaScriptなどのクライアントサイドだけで画像を保存させなくできるかを検証します。

一般にブラウザに表示している画像を保存する時は、マウス右クリックで[画像の保存]をしたり、ドラッグしてデスクトップに保存といったことをするかと思います。
そこで、マウス右クリックの禁止やドラッグの禁止をすると画像の保存ができなくなりますが、ブラウザには[ソース表示]や[デベロッパーツール]という便利な機能があり、それを使うと画像のURLが判明するので、そのURLで直接ブラウザ表示すればマウス右クリックやドラッグの禁止に関係なく保存することができてしまいます。
残念ながらブラウザの[ソース表示]や[デベロッパーツール]を禁止する方法は無く、画像を保存させ辛くする程度の効果にとどまります。
それならば、ブラウザの[ソース表示]や[デベロッパーツール]でもわからないように、画像のURLを隠匿することができたらと思うのですが、果たしてそれがJavaScriptなどのクライアントサイドだけで実現できるのかどうかを検証してみましたので紹介したいと思います。
サンプルソースをダウンロードできますのでご利用ください

1.右クリック禁止、ドラッグ禁止の方法
サンプルサイト1
ソースファイルはマウス右クリック禁止により見れませんが、F12キーでデベロッパーツールを開くと画像URLがわかります。
禁止の方法はJavaScriptでcontextmenuとdragstartのイベントを受けキャンセルします。

2.JavaScriptで動的にimg要素のsrc属性を書き換える方法
サンプルサイト2
コンテンツロードのタイミングでsrc属性を書き換えるので、ブラウザのソース表示では画像のURLは表示されなくなります。
しかし、デベロッパーツールではURLがばっちりわかります。

3.jQueryのdwImageProtector.jsを使う方法
サンプルサイト3
dwImageProtector.jsは透過Gifを表示画像に上乗せして保存をさせなくするものです。
しかし、ブラウザのソース表示やデベロッパーツールでは画像URLは丸見えです。

4.CANVASタグを使う方法
サンプルサイト4
CANVASタグを使った場合、画像URLはブラウザのソース表示やデベロッパーツールでもわかりません。
しかし、JavaScriptのプログラムソースを見れば丸わかりなので、Javascript難読化ツールを使うとURLはわかりません。
js/myscript.js を難読化したものがobfuscated.jsとなります。
注意するのは、この方法は検索結果などの動的ページには使えないという事です。
クライアントサイドだけを使うという条件では、あらかじめ画像URLが決まっている静的ページだけの方法となります。

さいごに、
JavaScriptなどのクライアントサイドだけでは画像を保存させ辛くする程度でした。
案件で「画像を保存させない」という条件がある場合は、クライアントへ効果を正確に説明してから実装しましょう。

ご相談ください。プロフェッショナルへのご相談は無料です。
問い合わせ プラスデザインカンパニー

この記事は1年以上前の記事で内容が古くなっている場合があります。

+dc(松)

この記事は、MATUI が書きました。