右クリックの禁止は簡単。禁止の回避も簡単。

多くのブラウザでは、ウェブページ上でマウスを右クリックすると状況に応じたメニューが表示されます。たとえば、

  • リンクを右クリックすれば、別タブで表示したり、リンク先を保存したりする項目が表示されるでしょう。
  • 画像を右クリックすれば、画像だけを単独で表示させる項目や、画像を保存する項目などが表示されるでしょう。
  • ページ上の何もない場所で右クリックすれば、そのページのHTMLソースを表示する項目などが表示されます。

このような、マウスの右クリックで表示されるメニューのことを、コンテキストメニューと呼びます。マウスを右クリックする以外にも、Windows PCのキーボードにあるアプリケーションキーを押すことでも表示できます。

リンクを右クリックした際に表示されるコンテキストメニューの例

リンクを右クリックした際に表示されるコンテキストメニューの例



 
コンテキストメニューの表示は禁止できるが、禁止の回避もできる
このコンテキストメニューの表示を禁止(技術的に抑制)しているウェブページを見かけることがあります。実際に右クリックしてみると「右クリックはできません」や「ソースは見れません」のようなメッセージが表示される場合もあります。

ページを右クリックするとエラーメッセージを表示する例

ページを右クリックするとエラーメッセージを表示する例


このように、ブラウザの右クリックを禁止する(コンテキストメニューを非表示にする)のはとても簡単です。ほんの少しの記述をHTMLに加えるだけで実現できます。そして、それと同じくらい「右クリック禁止」を回避することも簡単です。

つまり、閲覧者にHTMLソースを見られないようにするのは無理です。コンテキストメニューの表示を禁止してしまうと、そこで利用できる便利な機能が使えなくなってしまうので不便になるだけです。右クリックを禁止するのは避けておきましょう。

今回は、右クリックされてもコンテキストメニューを表示させない方法と、それを回避する方法の両方をご紹介いたします。

右クリック(コンテキストメニューの表示)を禁止するには

右クリックすることでコンテキストメニューが表示されるのを抑制するには、HTMLソースのbody要素に対して下記のように属性を書き加えます。この場合は、マウスの右クリックだけではなく、キーボードのアプリケーションキーを押す場合も同じように抑制されます。
<body oncontextmenu="return false;">
bodyタグに「oncontextmenu」という属性を記述して、その値に「return false;」と記述します。これだけで、コンテキストメニューは表示されなくなります。本記事のページ全体で実験すると不便なので、下記の枠内だけで実験してみました。

下記の枠内を右クリックしてみて下さい。
この枠内を右クリックしてみて下さい。
JavaScriptが有効な環境で、oncontextmenuイベントをサポートしているブラウザで閲覧している場合のみ、上記の枠内を右クリックしても何も反応しなくなります。

無反応ではなく、エラーメッセージを表示させたいなら、例えば次のように記述します。
<body oncontextmenu="alert('メニューは表示されませんよ~。'); return false;">
すると、右クリックされた際にエラーメッセージを掲載したアラートボックスが表示されます。
この枠内を右クリックしてみて下さい。エラーメッセージが出ます。
このように、コンテキストメニューの表示を禁止するのはとても簡単です。しかし、この禁止を回避することもとても簡単にできます。

次のページで、右クリック禁止を回避する方法をご紹介いたします。