【HTML/JS】右クリック、文字選択、コピーを禁止するサイトの作り方

HTML

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

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

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

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

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

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

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

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等でコピーされたら普通にコピーされてしまうので、マウスドラッグでの選択範囲指定を禁止します。

サイト全体

対象がサイト全体であれば、bodyタグ内に追記します。

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

指定箇所のみ

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

<div onMouseDown="return false;" onSelectStart="return false;">
....
(選択されたくないエリア)
....
</div>

クリップボードに記憶させない方法

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

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

<body oncopy="return false;">

終わりに

以上がサイト上での右クリック禁止、文字選択の禁止、コピー禁止のやり方説明でした。

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

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

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

【Chrome】右クリック禁止、コピペ禁止を強力に解除する方法。Pumpkin's Right Click Enable。
通常のWEBサイトであれば、マウスで文字を選択してコピーしたり、右クリック&サブメニュー表示して印刷などをすることができますが、これらの機能を意図的に禁止しているサイトをたまに見かけます。 おそらく、 「ウチの記事をパクるな...
タイトルとURLをコピーしました