Webサイトでコピペを禁止するプログラムコード

私自身はあまりおすすめしない「コピペ禁止サイト」ですが、よく方法を聞かれます。

一定の需要はあるんだなと感じますので、プログラムコードを紹介します。

「右クリック」も「コピー(Ctrl + c)」も「F12(デベロッパーツール)」も防ぐ強固な手法です。

100%防ぐことはできませんが、90%くらいは対策できると思います。

右クリックを禁止するコード

コンテキストメニューといいますが、メニューの中に「コピー」や「ページのソースを表示」などがありますが、この項目を選択できないようにします。

bodyタグにオプションoncontextmenuを設定します。

<body oncontextmenu="return false">

JavaScriptのコードは下記です。

document.oncontextmenu = () => {
  alert('右クリック禁止');  // 右クリック時にアラートを出す
  return false;
}

右クリック時にアラートを出すことができます。

コピーをするときにコピー範囲を選択すると思います。

範囲選択を禁止する方法です。

bodyタグにonmousedownを設定します。

<body onmousedown="return false">

CSSで対策するなら下記になります。

body {
  user-select: none;
}

これでコピー範囲を選択することができなくなるので、コピー対策になります。

コンテキストメニューからコピーを選んだり、「Ctrl + C」でのコピーを禁止する対策です。

bodyタグにoncopyを設定します。

<body oncopy="return false">

JavaScriptのコードは下記です。

document.oncopy = () => {
  alert('コピーはダメです');  // 「Ctrl + c」コピー時にアラートを出す
  return false;
}

ChromeやEdgeなどのブラウザを使用時に「F12」を押すと開発者ツール(デベロッパーツール)が開きます。

HTMLが表示されるのでそこからコピーする強者も存在します。

JavaScriptで「F12」も対策します。

document.addEventListener('keydown', e => {
  if (e.keyCode == 123) e.preventDefault(); // 123:F12キーのコード、e.keyでF12を指定もあり
});

押したキーを判定してF12なら無効にするJavaScriptです。

同様のやり方で「Ctrl + U」の「ソースを表示する」も対策できます。(Ctrlキーを無効にする)

JavaScriptを無効にされるとコピーできてしまいます。

CSSの「user-select: none;」は効果あるので範囲選択ができないのでコピーは面倒ですが。

CSSも無効にされると打つ手なしです。

ただ、JavaScript無効もCSS無効も面倒くさいので、そこまでしてコピーしたいのかは微妙ですが。。

当サイトではコピペを禁止にはしません。

ただし転載を許可しているわけではありません、禁止です。（ここ重要）

プログラムコードを1文字ずつ手打ちするのも大変なのでコピーブロックはしないです。

優しさです、私はバファリンの次にやさしいのです。

誰もがコピーして参考にしたくなる、そんな技術サイトになればいいなと思います。