一昔前にWebページをセキュアに保ちたければ、「ページのソースを見せない」「ブラウザコンソールなどに連結させない」「勝手にJavascriptのコードを実行させない」という鉄則がありました。
これらが簡単にできてしまう、右クリックを防止すればいいと安易に考えられていましたが、上部メニューや、F12キーなどで簡単に代用できてしまうので、右クリック防止には何の意味もありません。
手軽にできるコピー防止の方法を覚えてページの情報を守れるので、簡単なコードを紹介したいと思います。
コピーイベントの使い方
copyイベントというのがあり、あまり使われているのを見たことが無いのですが、これを使うと、ページ内でコピーをした時のタイミングで関数を実行することができます。
サンプルコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="sample">Sample</div>
<input type="text" class="hoge" value="hoge">
<input type="text" class="huga" value="huga">
</body>
</html>
<script>
document.querySelector(".sample").addEventListener("copy",(e=>{
alert("コピー防止")
e.preventDefault()
}))
document.querySelector(".hoge").addEventListener("copy",(e=>{
alert("hogeをコピーしました")
}))
document.querySelector(".huga").addEventListener("copy",(e=>{
alert("hugaをコピーしました")
}))
</script>
解説
コピー制御をしたいエレメントに、oncopy（または、adEventListenerで"copy"）を使って関数を実行できます。
このときに、event.preventDefault()とすると、コピー操作自体を防止することができます。
非常に簡単に使えるので、お手軽です。
当たり前ですが、指定したエレメントの配下のコピー作業に対して有効になりますが、同じページでも指定されていないエレメントではイベントは発火しません。
あと、window全体と言う指定も有効なので、ページ全体を指定したい場合はいいかもしれません。
でも、アドレスバーや、デバッグコンソールにおいては、イベントが適用されないので、認識しておきましょう。
コピー防止に最適なページ
でも、コピーができないページって、ホームページとしては非常に使いづらいんですよ。
情報提供をするページで、そのページを引用したい場合にコピーができないって、引用してバックリンクチャンスを逃してしまう可能性もあるので、
インターネットの特性としては、諸刃の剣になりかねませんね。
でもそう入っても、コピペしてほしくないページであれば、今回のソースを使って情報を守ることもできるかもしれません。（100%守ることはできませんが・・・）
会社内の契約書や規約などを自社内ページで作っているような場合や、会社のプライバシーポリシーなどのページで、こうしたイベントを使ってコピー防止をするのはいいかもしれません。
コピー防止の他の手段
本当にコピーをされたくないWEBページにしたい場合は、Canvasでページを作り込んでしまえばほぼ完璧に近い感じで文字列を守ることができるでしょう。
Javascriptをページ内に直接埋め込むのではなく、Nodejsなどを使って、SSR対応にするなど工夫をすれば、ソースコードを見てもテキストが存在しないページを作ることができます。
また他の方法としては、サーバーサイドで、PNGやWebpなどの画像をテキストから生成して、それを単なる画像ファイルとして扱うことで、かなりスタティックな状態にすることができるでしょう。
でも、これらの方法を使うと、SEOに対しては全く意味をなさなくなるので、検索エンジンにはテキストがヒットしない状態になってしまうデメリットを理解して構築しましょう。
あとがき
個人的には、コピペ防止しているページは、いろんな観点から使いづらくて仕方がありません。
紹介しておいてなんですが、今回紹介したページは局所的に使うことはオススメしますが、あまり盛大に使わないほうがいいと思っています。
ただ、サンプルにあるように、コピペをしたときに、注意喚起するalert()を実行したり、
何かしらのアクションを実行できるイベント操作として便利に使うことも可能なので、
このイベントをうまく使いこなせるようになると、Webサイトもプラスに働く効果につながるかもしれませんね。
技術はアイデアとセットで使うものですからね。
