Webサイト上でテキストやソースコードのコピーを禁止する方法

Webサイト上でテキストやソースコードのコピーを禁止する方法 プログラミング
Webサイト上でテキストやソースコードのコピーを禁止する方法

Webサイトを運用していると、ソースコードをコピーされたくないな~と思う時がありますよね。

コピーされたくない理由としては、

  • コピーサイトが作られる
  • 必死で作ったCSSがいとも簡単に盗まれる…

などでしょうか。

僕はあんまり気にしない性格なので、コピーされてもほっとくだけですが気になる人は気になるものです。

今回はそんなWebサイトのソースコードのコピーを禁止する方法をご紹介したいと思います。

このブログは現役のエンジニア(プログラマー歴が約12年)の僕(よしたか)が2019年12月後半から日々更新しております。

もしもアフィリエイトは会員登録後も無料です!
今すぐ会員登録してアフィリエイトを始めよう!

Webサイト上でテキストのコピーを禁止する方法

ではテキストのコピーを禁止するのか見ていきましょう。

手順はいくつかありますので、各それぞれのWebサイトに適した方法で実装頂ければと思います。

bodyタグでテキストのコピーを禁止する方法

<body oncopy='return false;'>

bodyタグで対応する場合は、このようにしましょう。

Webサイト上でテキストコピーが禁止されます。

javascriptでテキストのコピーを禁止する方法

<script type="text/javascript">
document.getElementsByTagName('html')[0].oncopy = function () {return false;}
</script>

javascriptで対応する場合は、このようにしましょう。

こちらもWebサイト上でテキストコピーが禁止されます。

個人的にはこのやり方が一番しっくりきます。

Webサイトでソースコードのコピーを禁止する方法

続いて、ソースコードのコピーを禁止するのか見ていきましょう。

手順はいくつかありますので、各それぞれのWebサイトに適した方法で実装頂ければと思います。

bodyタグでソースコードのコピーを禁止する方法

<body oncontextmenu='return false;'>

bodyタグで対応する場合は、このようにしましょう。

Webサイトで右クリックが禁止されるので、ソースコードコピーができなくなります。

javascriptでソースコードのコピーを禁止する方法

<script type="text/javascript">
document.getElementsByTagName('html')[0].oncontextmenu = function () {return false;}
</script>

javascriptで対応する場合は、このようにしましょう。

こちらもWebサイトで右クリックが禁止されるので、ソースコードコピーができなくなります。

個人的にはこのやり方が一番しっくりきます。

スマホの場合のコピー禁止対応方法は?

スマホ(iOS/Android)ではちょっと対応が違ってきます。

CSSでコピーを禁止する方法

<style type="text/css">
body {
-webkit-touch-callout:none;
-webkit-user-select:none;
}
</style>

スマホ(iOS/Android)で対応する場合は、このようにしましょう。

「-webkit-touch-callout:none;」では、リンク長押しのポップアップを無効化します。

「-webkit-user-select:none;」では、テキスト長押しの選択ボックスを無効化します。

まとめ

この記事のおさらい
  • Webサイト上のテキストコピーを禁止するにはoncopyを使おう
  • Webサイトのソースコードコピーを禁止するにはoncontextmenuを使おう
  • スマホサイトでのコピーを禁止するにはCSSで対応しよう

いかがだったでしょうか。

いずれも簡単に対応できますが、ChromeやFirefoxなどブラウザ機能のデバックツールを利用すれば、コピー禁止を施してもコピーはできてしまいます。

そこまでする人の事はもう諦めましょう…。

ちなみに、WordpressもLinuxも利用できるレンタルサーバーはエックスサーバーがオススメです。