HTML・CSS3・JSを使い，Webサイトを「コピペ禁止」にする方法のまとめ。右クリックや文字列選択・内容の複製をできなくする無効化テクニック集

Webページを「コピペ不可能」にするためのテクニックまとめ。

CSSやJavaScriptでの手法を網羅した。

（１）右クリックの禁止方法

（２）コピーイベントを禁止する。Ctrl + C のキーボードショートカットも封印

（３）コピーどころか文字列の「選択」自体を禁止する

（４） JavaScript無効化の対策方法

（５） CSSでコピペを禁じる

（６）画像の保存を封じるには？

（７）コピペ禁止を導入する際の注意点

※↑ もくじジェネレータで自動生成

（１）右クリックの禁止方法

コピペを禁止するには，まずマウスの右クリックを無効化するところから。

右クリックメニューを禁止する方法：

jQueryで右クリックを禁止させる方法 | BlackFlag
http://black-flag.net/jquery/20130227...

「contextmenu」が右クリック動作にあたる

その動作を無効化します。

対象の範囲を変えることで, 画像のみや特定の範囲のみ、右クリックを禁止させるということもできる

ただし，「右クリック禁止」は乱用しないほうが良い。

右クリックには様々な機能があり，アドオンの動作のために必要な事もあるから。

例えばそのサイトをお気に入りに追加したり，
文字化けしているので文字コードを変えたり，
といった基本的な必須操作もできなくなってしまう。

また，Evernoteに保管してもらえなくなる。

右クリックを無効にする - JavaScript
http://javascript.eweb-design.com/090...

右クリックは、エンコードやお気に入りに追加など、様々なメニューがあるので、よく考えた上で禁止しましょう。

俺日記 : 日経新聞サイトの時代遅れなコピペ禁止
http://might1976.doorblog.jp/archives...

Evernoteのクリッパーがバージョンアップされて、ページの一部を選択して右クリックするだけでその部分だけを保存できるようになりました。

この仕組みは便利です。

しかし、この便利機能が日経新聞のサイトでは使えません。javascriptで右クリックを無効にしていて, コンテキストメニューが表示されないからです。

右クリックによるコンテキストメニューを無効にしているページでも右クリック可能とする(Firefox) - Enjoy*Study
http://blog.enjoyxstudy.com/entry/201...

コンテキストメニューには、ブラウザのアドオンによるメニューなどもある

なので、無効になってしまっているととても困る

画面コピー禁止メモ(Hishidama's prohibit Copy Memo)
http://www.ne.jp/asahi/hishidama/home...

その他の便利なメニューも使えなくなってしまう

コピーを禁止したいのであれば、コンテキストメニューを禁止するのではなく、コピー自体を禁止する方がいい。

↑目次へ戻る

（２）コピーイベントを禁止する。Ctrl + C のキーボードショートカットも封印

右クリックを無効化しても，Ctrl + C や Ctrl + A のキーボードショートカットでコピーできてしまう。

右クリック禁止サイトの禁止を解除してコピーを行うための3つの方法 | 適宜覚書-Fragments
http://f.daccot.com/2012/04/08/11323/

企業のWebサービスや一部のBlogでは、右クリックで表示されるコンテキストメニューを利用不能にしていることがあります。

それならばCtrl+Cで対抗。

最終手段としては，HTMLソースを直接参照する。

ドラッグによるテキストの選択をキャンセルする【CSS, HTML, JavaScript】 - Programming Magic
http://www.programming-magic.com/2007...

ドラッグによる選択を防ぐだけでは、Ctrl+Aの全選択を防ぐことができない

ソースを表示させればコピーできてしまう。

文章をコピーできないサイトは不便で、ユーザに不快な思いをさせてしまう

これを防ぐには，コピーというイベントそのものを封じればよい。

初心者のためのJavaScript入門（2）：イベントで「右クリック禁止」を禁止してみよう (4/4) - ＠IT
http://www.atmarkit.co.jp/ait/article...

メールアドレスをコピー＆ペーストされてしまうと確認の意味がなくなります。

そんな時はイベントを使って、コピー＆ペーストを禁止してしまいましょう。

oncopyと書くことで「コピーされたとき」というイベントが使えます。

「コピーされたことをなかったことに」したいのでreturn false

コピーだけ禁止しても、Control＋Xキーでカットされてしまうので、ついでにoncutイベントでカットも禁止にしています。

JavaScript : onCopy
http://www.openspc2.org/JavaScript/re...

戻り値がfalseの場合はコピーされません。

copyイベントの禁止は，body以外に特定のdivタグなどに記述できる。

JavaScript、コピーを禁止する｜マコトのおもちゃ箱　〜ぼへぼへ自営業者の技術メモ〜
http://piyopiyocs.blog115.fc2.com/blo...

document.oncopy はIE8で動かない。

onloadを待ってから document.body.oncopy を操作すればよい。

jQueryでは， $(document).bind("copy" がIEで効かない場合がある。

対策として $(document).bind("copy selectstart" とする。

HTML：WEBサイト内の文章・文字列をコピー禁止にする | raining
http://raining.bear-life.com/html/web...

divタグ内の文字を禁止する場合

divタグに「onCopy=”return false;”」を追加します。

パクリ野郎を淘汰せよ　右クリック禁止　Ctrl+C禁止 | CTLアフィリエイト
http://teku-okusawa.com/%E3%83%91%E3%...

Ctrl+C禁止＜body oncopy=”return false;”＞

これをサイト内で自動的に対応してくれるプラグインがある。

WordPressでサイト構築している場合，WP-Copyright-Protectionを導入すればよい。

WordPressで記事が盗用(パクられる)対策、コピー防止する方法と設定まとめ | debate
http://debate.co.jp/word_press/1102

WP-Copyright-Protectionは、記事をコピー（盗用）させないためのプラグイン

なにをやっているかというと、Javascriptを利用して右クリックさせないようにしてコピーを防止している

通常、右クリックからコピーや、ctl + cでコピーすると思うのですが、それが無効になります。

ユーザには多少の不便をしいてしまうのが欠点

トレンドアフィリで稼ぐのにコピペ禁止プラグインを導入する理由！ | トレンド×時流講座
http://prepie.jp/update/copy_kinsi/

手動アップデートに引っかからず、検索エンジン上で上位に来ているサイトを見ていると，かなりの割合でコピペ禁止の設定にしている。

どうしてコピペ禁止にするかというと，トレンドアフィリエイトを実践するライバルの中には, 人の文章をコピーしてしまうという人が少なからずいるから。

文章はおろか、文字の装飾の仕方も含めて丸々すべて真似してしまうという人すらいる。

サイトのコンテンツをコピペ禁止に設定できるwordpressのプラグイン、『wp-copyright-protection』をインストールして有効化すれば、コピペ禁止の設定になる

↑目次へ戻る

（３）コピーどころか文字列の「選択」自体を禁止する

文字列の選択も禁止しよう。

mousedownイベントに加え，念のため dragstart イベントも封印する。

これからドラッグ＆ドロップを書く人のために - m2
http://d.hatena.ne.jp/miya2000/200703...

ドラッグ時の文字列選択は、文字列選択の開始、つまり mousedown イベントでのブラウザのデフォルトの挙動を抑止することで起きなくなります。

テキストと画像の選択を無効にする方法 (HTML) - Windows app development
https://msdn.microsoft.com/ja-jp/libr...

次のいずれかのイベントハンドラーから preventDefault を呼び出すと、選択は取り消されます。 pointerdown pointerup mousedown mouseup

HTML5のDrag and DropによるUIとlocalStorageへの設定保存 - ある1つのサンプル
http://d.hatena.ne.jp/ksy_dev/2010073...

DnDの起点となるdragstartイベントが他のmouseoverやclickイベントと異なるのは、eventのtargetはイベントが発生したエレメントとなるのでは無く、あくまでdraggable属性が設定されたエレメントに限定されるという点。

スマホ対策としては，タッチ系のイベントを封じる。

iPhoneでのコピペを禁止にするのは-webkit-user-select:none;でい...
http://detail.chiebukuro.yahoo.co.jp/...

ontouchstart="return false;" これはユーザのタッチイベントを無効化しています。

↑目次へ戻る

（４）JavaScript無効化の対策方法

上述のコピペ禁止コードは，すべてJavaScriptだ。

つまり，JSの無効化でかいくぐれてしまう。

アンドロイドのユーザーがブラウザのJavaScriptを無効にしたら即...
http://detail.chiebukuro.yahoo.co.jp/...

ontouchstart="return false;"でタッチ操作できなくさせているページでも、アンドロイドからは、ブラウザのJavaScriptを無効にすると、もう今開いているページのタッチ操作ができる

なので，さらにその上手を行き，JS無効化を禁ずることもできる。

JS無効化の無効化である。

JavaScript無効化によるコピペ有効化を禁止する方法：

JavaScript、右クリックを禁止する｜マコトのおもちゃ箱　〜ぼへぼへ自営業者の技術メモ〜
http://piyopiyocs.blog115.fc2.com/blo...

JS無効化を回避する方法は，bodyをCSSで非表示にして，JavaScriptのコードからコンテンツを表示させてあげること

JavaScriptが無効の状態だとコンテンツが表示されないので一瞬ビックリする。

↑目次へ戻る

（５）CSSでコピペを禁じる

またJSが無効化されていても，CSSで文字列を選択できないように指定することもできる。

ただしIEでは無効。残念。

CSSで文字列選択を禁止する：

テキスト、画像のドラッグでコピーさせない方法
http://www.itti-c.com/web-staff/not-d...

まずは、CSSでテキストを選択できなくする CSS3のuser-selectで，ドラッグでの選択を不能にします。

CSS3の属性になるのでCSS3未対応のブラウザで制御できません

ウェブ上の文章をコピーできないようにする方法 | No:285 | Ri-mode Memo
http://ri-mode.com/memo/2013/07/11/un...

CSS3のuser-selectを使って文章をセレクトできないようにする。

bodyに書き込むと全体がセレクトできないようになり、特定の要素に書き込むとその要素のみセレクトできないようになる。

IEはダメなようです。IE10でも不可。

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

jQuery を使ったテキストのコピー防止 JavaScript, CSS « をぶろぐ
http://tetsuwo.tumblr.com/post/563397...

.css('user-select', 'none')

スマホ対応するには，「touch-callout:none」も入れておくと良い。

これは，スマホでリンクを長押しすると，リンクをコピペできる
という機能を封じる手法。

iPhone、AndroidのモバイルWebでの長押しアクションを無効化する - paranitips
http://paranishian.hateblo.jp/entry/c...

-webkit-touch-callout:none; // リンク長押しのポップアップを無効化

-webkit-user-select:none; // テキスト長押しの選択ボックスを無効化

[css] WebViewで長押し等を禁止 | Drowsy Dog's Diary
http://ka-zoo.net/2014/02/forbid-long...
/* リンクの長押しでメニューを出さないようにする */
-webkit-touch-callout: none
/* 文字列や画像を選択してコピーなどのメニューを出さないように、選択不可にする */
-webkit-user-select: none;

input要素やselect要素だけは操作可能にしたい場合，CSSセレクタで除外設定する。

[スマホ（iPhone）で、文字や画像のコピペを禁止する方法] by シロのITメモ
http://shiroit.blog.fc2.com/blog-entr...

テキスト部分などを長押ししている時に出てくる「COPY」ダイアログの抑制方法。

*:not(input):not(textarea):not(select),
input[type=image],
input[type=file],
input[type=submit],
input[type=button],
input[type=reset]
{ -webkit-user-select: none; }

↑目次へ戻る

（６）画像の保存を封じるには？

ブラウザ上で，画像の右クリックによる保存を禁止する方法もある。

たとえば写真・ギャラリー系のサイトを構築する場合などにニーズがある。

もちろん，完全にダウンロードを禁じる方法はないが，
１手間増やすことで，複製の発生率を減らすことはできる。

コピー禁止用のjQueryプログラム - とにかくやってみるブログ - Ingwer Design
http://ingwer-design.com/blog/javascr...

写真家の方のサイトを作る際に，画像をコピーできないようにしてもらえないか・・・と言われ、コピー禁止用のJavaScriptを書いてみました。

HTMLがクライアント側で解釈されるので, 完全にコピー禁止にすることはできません

が、一手間かけないとコピーできないようになってます。

抜け道として，右クリックせずに，
かわりに画像をデスクトップにドラッグ・ドロップする
という方法がある。

これを防ぎたい場合は，jQueryのプラグインで画像を守る。

右クリック禁止を回避する
http://www.losttechnology.jp/Tips/ant...

画像を保存したい。

保存したい画像の上で、マウスの左ボタンを押します。

左ボタンを押したままデスクトップ上へマウスカーソルを持っていく

ボタンを離すとデスクトップ上などドロップ先のフォルダに画像が保存されています。

右クリック禁止の方法色々【jquery、java script】 | MD.WEBLOG | 長野県飯田市のフリーランス【MITAMA DESIGN】
http://mitama-design.com/blog/cate_ja...

これらの方法では、画像をデスクトップにドロップ＆ドラッグした時に画像を保存することが可能

jqueryプラグインで画像のダウンロードを防ぐ

jqueryプラグイン「jquery.dwImageProtector.js」で画像を保存できないようにする

画像の上に透明なカバーをかけて，マウスで選択できないようにするという手もある。

画像の保存を禁止する〜CSSテクニック〜
http://www.stylish-style.com/csstec/b...

写真の上に透明なカバーをかけてコピーを防いでいます。

またブラウザ依存にはなるが，画面キャプチャを封じることもできる。

クリップボードの内容を絶え間なく削除し続ければよい。

ただしこれはあまり効率が良くなく，ブラウザ外部のキャプチャソフトを防ぐことはできない。

JavaScriptで画面キャプチャーを防止する方法
http://www.hypergear.com/reference/Js...

PrintScreen禁止のサンプル。

PrintScreenキーで画面コピーし，ペイントに貼り付けてみてください。貼り付けメニューが選択できません。

↑目次へ戻る

（７）コピペ禁止を導入する際の注意点

これらのテクニックを導入する際には，十分な注意と検討が必要だ。

Webサイト制作時，どういう場合に，コピペ禁止の処理が必要になるか：

Javascriptを使ったフォームのコピー＆ペースト禁止処理｜PHP工房
http://www.php-factory.net/trivia/04.php

メールフォームのメールアドレス2重チェック時に，コピペできないようしたい

CSS3：文字や画像を選択できなくする | Hack
http://hack.aipo.com/archives/5955/

ピンポイントには選択できなくても、画面全体を選択してコピーされれば普通にコピーされるので、コピペ禁止に使えるわけではありません。

UIなどはテキスト選択できない方が「UIっぽい」感じもするので、見た目を調整する面で利用できます。

パスワード欄では，もとからコピーができない。

この場合，ペーストは可能にしておくべき：

入力フォームでコピペ(コピー&ペースト)を禁止する方法 - [サンプルコード /JavaScript] ぺんたん info
http://pentan.info/javascript/sample/...

パスワードの入力部分でtype="password"を使用している場合は、コピーはできない

なのでonCopy、onContextmenuを指定する必要はありません。

テキストエディタでパスワードを入力したものをコピーして、入力フォームにペースト(貼り付け)する人もいる

なので、onPasteを禁止するのもよくない

このため, パスワード入力欄にはコピペ禁止は不要

HTMLソースを見ればコピペできるので，
完全なコピペ防止は不可能：

透明画像を置いて画像をコピーガードする。 | Web雑記帳。
http://motoshige.net/blog/archives/562

どれも、ソースコードや画面のキャプチャーからコピーが出来るので、完全にガードする事が出来ません。

パソコン初心者の人に対するガード程度なら良いかもしれません。

コピペを禁じると，他のサイトで紹介してもらえなくなる：

無断転載を防げ！ブログがパクられるのを軽減できるかもしれない小技集
http://naifix.com/all-rights-reserved...

ユーザビリティの低下につながります。

『お！この記事をブログで紹介したい！』と思ったときにコピペをブロックされていると、『わざわざ紹介するまでもないかな…』となる

余談ですが、書店などで販売されている地図のごく一部には架空の道路や名称が記されていることがあり、他社が無断転載するとそれが証拠になる。

ちなみに，ここで取り上げた全てのテクニックは，簡単に突破する方法がある。

Webページの「コピペ禁止」を解除・回避するJavaScriptコード。スクリプト有効のまま，ブラウザ上で右クリック・テキスト選択の禁止タグを迂回する
http://language-and-engineering.hatenablog.jp/entry/20150716/UnlockCopyPasteF...

Webページ上で，「コピペ禁止」を解除するJavaScriptコード。

ブラウザ上で，マウスで文章を選択して，右クリック→コピーという操作は，HTML側で禁止できる。 Webサイトの内容が, コピペで無断転載されるのを防ぐためだ。

しかし，その禁止をかいくぐる方法もある。