Posted at

Webサイトのコンテンツを不正コピーから守る方法を考えてみた

More than 1 year has passed since last update.

ブログやウェブサイトを運営していると、コンテンツの不正コピーって自然と気になります。

文章は正しく引用してくれればそれで良いんですけれど、オリジナルの画像やアニメーションコンテンツは中々そうはいきません。

他には、JavaScriptファイルをコピーされて利用されたくないという場合もあると思います。

一生懸命作ったコンテンツがコピーされ不正利用されるのは腹立たしいものです。

対策としてウェブサイトを不正コピーから守る方法をいくつか考えてみました。

考えてみただけなので、実際に実装して効果を確認したわけではないし、仮に実装しても不正コピー対策は効果が分かりにくい部類なので、実用的なのかは神のみぞ知るって感じ。


定番のドラッグ&右クリック無効だが…

コピー対策についてググると必ずドラッグとマウスの右クリック無効の記事が出てきます。定番です。

ですが、これをやってもほぼ無意味なんですよね。これだけじゃあ役に立たない。

それは、何を隠そう我らが開発者ツールが最強すぎるからです。


最大の敵はブラウザの開発者ツール

ブラウザのデベロッパーツール。

Webデザイナーやフロントエンドエンジニアからしてみたら、とても有益なツールですよね。

ただ、それは悪巧みしている方も同じで、もともと優秀なツールが悪い人たちに渡ったらそりゃあ思う存分に活用しまくります。

開発者ツールを使えば、ドラッグ&右クリック無効ていどの対策はもはや紙装甲です。

ウェブサイト内の画像データを入手するなんて朝飯前だし、JavaScriptファイルをダウンロードして解析することもできます。

開発者ツールはウェブサイトの中身を隈なく見ることができる、最強のツールで最大の敵なのです。

ですので、ブラウザの開発者ツールをいかにして無効化するかがカギになってきます。

開発者ツールを使わせないということに焦点を当てて対策を考えました。


非推奨対策:開発者ツールをフリーズさせる

開発者ツールをフリーズさせて使わせないという方法。

これはこの記事を書くにあたって軽く調べたら出てきた方法です。

ChromeやFireFoxの開発者ツールを無効にする

上記のサイトによると、開発者ツールを表示するとそれを検知してブレークポイントで無限ループさせフリーズするというもの。

実際にテストサイトで試してみたらブラウザがフリーズしました。

Chromeは少し微妙でしたが最終的にブラウザがクラッシュしたので、開発者ツールを無効化できているっぽいです。

しかし、一つ問題が。

これは、意図的にフリーズさせブラウザによってはクラッシュするので、電子計算機系の法律に引っかかる可能性があります。

対策としては採用できないですね。

もっと安全な方法で対策を考えてみます。


対策1:開発者ツールを表示したらリダイレクトさせる

開発者ツールを表示しているか検知できるJavaScriptライブラリがあります。Github: devtools-detect

それを利用して開発者ツールを検知したら、Yahoo!などの別サイトにリダイレクトしてツールを使わせないという方法。

別サイトで開発者ツールを表示させてから戻ってきても検知できます。

これは有効そうだと思います。悪巧みしてる方からしたらとてもウザそうです。


対策2:開発者ツールを表示させない

開発者ツールを使わせたくないなら表示させなければいいのです。


  • マウスの右クリックメニューから開発者ツールを表示できるので、右クリック無効化。

  • キーボードのF12キーから同じく開発者ツールを表示できるので、FnキーまたはF12キーを無効化。

いずれもJavaScriptで無効化できます。右クリック無効はCSSでも実現可能です。

しかし、ブラウザの固有メニューから表示することもできるので、完全ではないです。

この対策は他の対策とあわせるのがいいですね。


対策3:JavaScript無効化対策でサイトをSPAで構築する

対策1と対策2の方法はいずれもJavaScriptで動作しています。

ですので、ブラウザ側でJavaScriptの実行を停止していると、対策を無効化されてしまいます。悲しい。

ですが、JavaScript無効化を逆手にとった方法が、SPAでウェブサイトを構築する方法です。


SPAとは

Single Page Applicationの略で、その名の通り、単一ページで構成されたWebアプリケーションです。

SPAについては下記のリンク先の記事が簡潔でわかりやすいです。

Qiita: SPA(Single Page Application)の基本

SPAは何かと簡単に言うならば、ReactやVueなどのJavaScriptフレームワークで、ウェブサイトをブラウザ側でHTML生成しレンダリングしている。

通常のウェブサイトは、サーバー側でサイト内容をHTML生成して、ブラウザ側で最終的にレンダリングしています。


つまり…?

つまり、JavaScriptフレームワークはもちろんJavaScriptで動作しているので、ブラウザのJavaScriptを無効化しているとレンダリングができません。そうなると、ウェブサイトが表示されないということになります。

ウェブサイトが表示されなければ、開発者ツールを表示してもコンテンツが何もない状態ですからコピーなどできないってことですね。つよい。


不正コピー対策は大変。

他にもコピー対策はいろいろな方法があると思いますが、上で紹介した方法で開発者ツールは無効化できそうではないでしょうか。

ただ、「対策3」はコストが高く既存のサイトをSPA化するとなると大変だと思います。

コピー対策としてSPAを挙げましたが、そもそもSPAのメリットは別にありますからね。

対策3の内容はあくまでSPAの副産物みたいなもんです。

「対策1」と「対策2」は比較的簡単に実装でそうですが、ブラウザのJavaScript実行停止が弱点になります。

対策1・2・3すべて合わせればいい感じになりそうではある。

開発者ツールに焦点を当てて対策を考えてみましたが、本格的にするならこれ以外にもコピー対策は必要になってきます。

めんどくさい。

ガッチガチにコピー対策してるウェブサイトってどのくらいあるんでしょうね?

普段そういうのを気にしてネットサーフィンなんてしませんからねぇ…。

冒頭でも書きましたが、コピー対策は効果が分かりにくいものなので、実装するならおまじない程度の感覚でやるのが気が楽でしょうか。