プラカンブログ
プラカンブログ

プラカンブログ

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

システムのまついです

今回は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などのクライアントサイドだけでは画像を保存させ⾟くする程度でした。

案件で「画像を保存させない」という条件がある場合は、クライアントへ効果を正確に説明してから実装しましょう。

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

プラカン(PLUS DESIGN COMPANY)が目指す3つの顧客満足

  1. ホームページのできあがりに
    満足していただく

    • お客様のご要望、目的の達成
    • ホームページの利便性や満足度の向上
    • ブランドイメージの向上 など
  2. 仕事の進め方に
    満足していただく

    • スケジュール遅延のないスムーズな進行
    • お客様の理解度、知識、経験に応じた親切で分かりやすい進行
    • セキュリティ意識の高い安全な進行管理 など
  3. サポート・フォーローに
    満足していただく

    • 公開後も安心なサーバー保守、CMS保守、コンテンツの保守管理
    • 集客、コンバージョンを強化するためのアクセスログ解析
    • 集客、コンバージョンを強化するためのコンテンツの改善 など

詳しくはWEBコンサルティングをご覧ください

WEBコンサルティング

ホームページに関するご要望がございましたら、お気軽にご相談ください。

Contact Us

お問い合わせをお考えの方

お問い合わせ

Estimate

お見積りをご希望の方

お見積り

お電話でのお問い合わせ