セコい「コピペ禁止サイト」の作り方（右クリックもテキスト選択も禁止！）

個人的には大反対な「右クリック禁止サイト」ですが、あえてその実装方法を紹介します。

右クリックを禁止しているサイトの意図は文字のコピーをされたくないことだと思うので、マウスドラッグで文字等の選択を禁止する方法も併せて紹介します。

現在は、より強固に右クリックをガードする手法もありますが、一般的には以下のように実装されています。

がんばって書いた記事をコピーされたくない気持ちもわからなくはないですが、ユーザ側からするとただただウザいだけです。

右クリックを禁止する方法

右クリックするとコンテキストメニューが表示されます。

コンテキストメニュー内には「コピー」や「ソースを表示」という項目があるので、この項目を選択できないように意地悪したい場合に設定します。

bodyタグ内にoncontextmenuイベントハンドラを追加します。

<body oncontextmenu="return false;">

禁止ついでにアラートメッセージを表示させるには、以下のようにします。

<body oncontextmenu="alert('右クリックすんなってば！'); return false;">

HTMLタグ内に直接記載せず、JavaScriptとして記載しても同様の機能になります。scriptタグで囲んで対象ページ内部に記載しても良いですし、外部ファイルとして記載してもOKです。

document.oncontextmenu = function(){
return false;
};

「画像は絶対コピーさせん！」という~~セコい~~意図をアピールする方法。
imgタグに同様のコードを追記します。

<img src="XXXX.jpg" oncontextmenu="return false;">

右クリック禁止だけしても、マウスドラッグで文字を選択し、Ctrl + C等でコピーされたら普通にコピーされてしまうので、マウスドラッグでの選択範囲指定を禁止します。

Javascript設定の他、CSSの設定を行うことにより、より強固に文字選択禁止にすることができます。

<body onMouseDown="return false;" onSelectStart="return false;">

body {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

指定箇所のみ選択禁止にしたい場合は、bodyではなく、divタグなどに追記します。

<div class="ban_select" onMouseDown="return false;" onSelectStart="return false;">
....
（選択されたくないエリア）
....
</div>

.ban_select {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

右クリックやCtrl + Cからコピーされてもクリップボードにはコピーされない方法。
bodyタグにoncopyイベントハンドラを追加します。

コピーできてるみたいに見せかけて、実はできていないので、これが一番悪質かも…。

<body oncopy="return false;">

上記のコードをまとめたソースコードです。
とりあえず、この設定をしておけば「右クリック禁止＆コピペサイト」をつくることができます。

<body class="ban_select"
      onMouseDown="return false;"
      onSelectStart="return false;"
      oncopy="return false;">
..
..
..
</body>

body {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

WordPressサイトで右クリック＆コピペ禁止サイトを作るのは非常に簡単で、
「WP Content Copy Protection & No Right Click」というプラグインをインストールすればOKです。

以上がコピペ禁止サイトのつくり方説明でした。

これらの設定で一応コピー禁止サイトになりますが、HTMLやJSの特性上ソースを完全に隠すことは難しく、大抵の場合は少し工夫でテキストのコピーは簡単に行うことができます。

「ウチのサイトの文章はコピーさせんぞ！」
「コピーしたら許さんからな！」

…というセコセコアピールにはなりますが、利便性を考えると、メリットよりはデメリットの方が多いかと思います。

因みに、解除する方法は、以下のページにズバリ掲載していますので、ご参考にどうぞ。