画像保存を困難化してはいるが……

とあるサイトで画像が保存できなくて、一体どんな仕掛けなのかと気になって、

それでGoogle Chromeの開発者ツール(F12)で調べてみたのだが、

実はソースコードにimg要素がべた書きされていて、

それをJavascript・CSSで触れなくしてあっただけだった。


Javascriptで画像のダウンロードを困難化する話は聞いたことがあったが、

CSSも使われていたようである。

Javascriptでの対策としては、oncontextmenu, onselectstart, onmousedownの各イベントにreturn false;を設定するというもの。

oncontextmenuは右クリックや長押しなどでメニューを出すときのイベント、

onselectstartはテキストなどを選択開始する操作を開始するときのイベント、

onmousedownは左右問わずクリックするときに発生するイベントである。

いずれも発生時にreturn false;とすることで当該操作を無効化できるらしい。

主はoncontextmenuの無効化ですね。onselectstartはテキストのコピペ対策に使われることが多いようだが、画像にも併用されるようである。


このあたりはよく聞く対策なのだが、スタイルシートで pointer-events: none; というのが設定されていた。

これはポインタセットの対象としないというスタイルらしい。

通常はautoに設定されていて、要素に応じて適切に振る舞う。

どうも調べると、SVGで塗りつぶし部分は選択対象に含むか含まないかとか、そういう設定に使うことが予定されているスタイルらしい。

pointer-events (MDN Web Docs)


あとこのサイトでは使われてなかったけど、よくある対策として透明な画像を重ねるというものがあるらしい。

CSSで透明な画像を背景とした要素を前面に置くとかそんな形らしい。

このあたりから必要なものを選択して使っているのが実情らしい。


また、直リンク対策として、画像ファイルへのアクセス時のrefferを確認するというのがあり、

ソースコード見ればimg要素が丸見えだって言っても、そのURLに直接飛んでも保存できないようになっていた。

これはアクセス時のrefferをそのサイトのURLにすればよいのだが、

しかし、そのような操作ができない場合は確かに保存できない。


いろいろな対策はあるが、障害となるものを取り除き続ければ、結局は保存できてしまうものである。

特にこのサイトはimg要素へのイベント設定・スタイル設定が全てなので、

全要素のイベント設定・スタイル設定を無害なものに変更するJavascriptを作って、ブラウザで実行すれば普通に保存できてしまう。

そういうブックマークレットはそこら辺に転がってるので調べればいくらでも。


あと、開発者ツールはWebページがアクセスしたデータを確認する機能があり、

この機能を使えばJavascriptで動的に開かれた画像としても確認出来る。

今回の場合は画像の読み込みはimg要素でシンプルに実現されているが、

当然その場合もF12で開発者ツールを開き、アクセスしたデータを見れば当該画像データはある。

そこから保存してしまえば当然保存はできる。

一般の人は開発者ツールなんて使わないのが前提であろうけど。

(直リンク対策でrefferを確認する対策もそうだが、一般の人には回避困難な対策であろう)


おそらく一般の人にとってもっとも突破しやすい方法はスクリーンショットである。

スクリーンショットをWebページから回避・検出する方法はほとんどない。

考えようによっては最強の回避手段である。

どれだけ困難化してもスクリーンショットで保存されてしまうなら、

あまり手の込んだ画像保存対策を行う意味はないかもしれない。


どれだけ複雑でもブラウザはHTMLを解析・表示することと、CSSを当てはめること、Javascriptを実行することしかできない。

Javascriptは複雑な操作を行うことができるが、しかしどのような操作をしてるかはソースコードから判明する。

Instagramの画像はそれこそもっと複雑な保存回避が行われているが、

しかしInstagramのURLを投げれば、そこから画像のURLを抽出するサービスは世の中にたくさんある。

どれだけ複雑でも手間さえ掛ければ回避でき、Instagramは利用者が多いからそのような手間を掛けたとしても報われてしまうという、そういうことですね。

そもそもInstagramだってスクリーンショットを撮れば何も複雑なことは考えなくてよいのである。

この時点でどうしょうもない話じゃないかなと思う。


以前、集英社の電子書籍アプリでスクリーンショットをPC・Androidでは禁止、iOSでは検出して警告・アカウント停止を行っているという話を紹介した。

iOSではスクリーンショットできるんですか

iOSでは禁止ではなく警告→アカウント停止という対策になるとか、

PCの外側(HDCP非対応デバイス)やAndroidエミュレータBlueStacksで外側からキャプチャするという方法で回避できてしまうということを紹介した。

しかし、iOSでの警告も十分に効果的であり、回避手段はかなり特殊な方法である。

このぐらいの対策がなされていれば、それは実質困難といってよいでしょう。


しかし、このような回避手段が適用できる前提としては、閲覧にあたって専用のアプリをインストールする必要があり、Webサイトより作成者も閲覧者も手間がかかる。

それだけの手間をかける価値があるかは考えないといけない。

集英社のこのアプリは期間限定のコンテンツがあり、それは自社アプリでの閲覧に限っているので、これだけの手間をかけさせてもよいと考えているのだろう。

集英社という出版業界のガリバーだからこそとれる手段ということで。


それに比べればブラウザの画像保存対策はずいぶんいい加減なものである。

ここまで見てもわかるけど、技術的にはしょうもないものだらけである。

そういう中途半端な対策ならやらない方がよいという考えもあると思う。

しかしやはり時々は見ますね。なんやかんややってしまうんでしょうんね。

作成者も保存を完全回避できるとは思っていないとは思いますけどね。

Webサイトで容易に閲覧できるものは、保存できないわけがない。それに尽きるでしょう。