友人のカメラマンからお仕事としてWebサイトの新規構築を頂きまして。
とはいえ、ドメインを取る際に色々と助言したのがもう10年ぐらい前になるのだけれど(笑)

今回はサイトの性質上、画像をたくさん公開するという事で
「完全に防ぐ方法がないのはわかってるけども、出来る限りの防御はしておきたい」とのご要望。
なるほど、そりゃそうだってんで色々と調べながら施工していったのをまとめておこうかなと。

「完全に出来なくしてくれ！お前プロやろ！」みたいな事は決して言わない友人、というのもあり
テストしながらワイワイと楽しく進める事が出来たのが今回一番面白かったとこでした(笑)
そういや、制作に関しての打ち合わせって一度も会わずにZOOMだけで済ませたなあ。
時代はほんと変わっていくんやね・・・・

WordPressを使って構築する、というのは前もって決まってたのでプラグインを使いながら構築していった。
もちろんプラグインの最終更新日をチェックする事も忘れずに。
最終更新が3年前とかのプラグインを無理矢理使うと後々エライ事になりますが故に。

自動で透かしを挿入するプラグイン「Image Watermark」

色んな素材に転用されるのを防ぐ為に写真に透かしを入れる事があるとは思いますが、この「Image Watermark」はWordpressに画像をアップロードする際に自動でその透かしを挿入してくれるという優れ物。
ただし、設定画面は全て英語です。

透かし画像には背景透明の画像を用意すればOK。
透かしを添付する画像サイズ（これは使用テーマに割り振られた画像サイズが自動的に設定画面に現れる）や、挿入の位置、そして挿入位置のオフセット距離なども設定出来ていたれりつくせりのプラグインなのだ。

この透かし画像の挿入でまず画像を持って行こうとする人間のやる気を削ぐ。
何よりアップロードするだけで自動で挿入されるってのが楽なのよ。
設定したサイズに自動的にリサイズしてくれる「EWWW Image Optimizer」を併用すればもっと楽に。

この「Image Watermark」にも一応「Image Protection」という項目があって

  • 右クリック禁止
  • 画像のドラッグ禁止
  • WordPressにログインしているユーザーは上記を許すか

がチョイス出来る。

Windows環境のほとんどのブラウザからはこれらが出来ないのを確認したのだけども、友人から
「MacのGoogle Chromeやと右クリックもドラッグも出来ますー」との情報が。
やーっぱこういう時の為にMacの確認環境持っとくべき、なんよなあ・・・・

プロテクト特化のプラグイン「Disable Right Click For WP」

そこで見つけたのがこちら。
これはこの手のプロテクトに特化していて、テキストの選択すら出来なくなるという優れ物。
有効化するだけで設定項目はなしの親切設計。

友人「お、出来なくなりましたー」よしっ！

友人「スマホで見た時やと長押しで端末保存されてしまいますよねー」

それもあるか・・・・長押し保存。

長押しを無効化するCSSを追加する

めっちゃめちゃ強引な手法ではありますが、imgタグに以下のCSSを適用させました。

img {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
}

これでもう何1つ長押し出来ないぜ・・・・・・
仮にダウンロードページとかフリー写真の配布ページなど作る場合はページIDで除外すればええし。

直リン禁止の.htaccessを画像フォルダに配置する

あとはサーバ側でWordpressの画像アップロードディレクトリに.htaccessを配置。
これで他のドメインからの呼出は出来なくなる。

しかし根こそぎやってしまうと画像検索のクローラーを弾いてしまったり、SNSでシェアされた時のOGP画像が表示されなくなる。
友人に確認すると「画像検索は表示されるようにしてほしい」との事なので、同じドメインからのリファラーと各種サービスは許可する内容にした。

SetEnvIf Referer "^https://samples\.com" ok_url
SetEnvIf Referer "google" ok_url
SetEnvIf Referer "yahoo" ok_url
SetEnvIf Referer "bing" ok_url
SetEnvIf User-Agent "^Googlebot.*$" ok_url
SetEnvIf User-Agent "msnbot" ok_url
SetEnvIf User-Agent "^facebookexternalhit.*$" ok_url
SetEnvIf User-Agent "^facebookplatform.*$" ok_url
SetEnvIf User-Agent "^Twitterbot.*$" ok_url
<Files ~ "\.(jpg|jpeg|gif|png|pdf|zip)$">
order deny,allow
deny from all
allow from env=ok_url
</Files>

これをUTF-8(BOMなし）で.htaccessとして保存。
/wp-content/uploadsフォルダに配置すれば完了っと。

ここまでしても結局ブラウザ側でJavascriptをオフにされたら全てが解除になってまうんですけどね。
ある程度のPCスキルがないとそれも出来ないので、少しは防御にはなるかな・・って感じです。