右クリック禁止

 HTMLのソース隠しとその解読[0] [1] [2]

 右クリック禁止はその簡易さから、ソースの表示や画像の保存、無断転載を防ぐ手段として非常に多く用いられています。

方法

イベントハンドラについて

 イベントハンドラとは、特定のイベントに反応して処理を行うもののことです。例えばonclickというイベントハンドラは、クリックというアクションがあった際に実行されるものです。

 右クリック禁止にもイベントハンドラが利用されています。右クリック禁止には、oncontextmenuというイベントハンドラを利用します。oncontextmenuは、右クリックというアクションがあった際に呼び出されます。

記述例1

 次の二つの例はBODY要素にoncontextmenu属性を追加するタイプのもので、一番よく見かけます。下の例は、アラートによるメッセージの表示を付加したものですが、実質的に同じです。

<body oncontextmenu="return false">
<body oncontextmenu="alert('右クリック禁止');return false">

 この記述が意味するものは、BODY要素に対して、右クリックというイベントがあった際に、「return false」を実行するということです。「return false」は、「false(偽)」を返すという意味です。つまり、「右クリックでメニューを表示させることに対して偽を返し、表示させなくする」という仕組みだと考えるといいでしょう。

 右クリック禁止とは直接関係ありませんが、他のイベントハンドラでもreturn falseと記述することで、本来の動作を中止させられるものがあります。例えば「onclick="return false"」をA要素に追加すれば、クリックによる動作を妨げ、リンク先に移動できなくなります。

 ちなみに画像の無断転載防止で紹介しているスクリプトでは、BODY要素ではなくIMG要素に「oncontextmenu="return false"」を記述したものです。これにより、画像を右クリックした場合にだけメニューが表示されないという現象が起こります。またさらに、ondragstart(ドラッグの開始)onselectstart(選択の開始)という二つのイベントハンドラでfalseを返すことで、画像のドラッグや選択を妨害します。

記述例2

 次の例は、SCRIPT要素のみで記述したものです。ブラウザによって、右クリックの検出方法が異なるため、いくつかの条件分岐があってコードが長くなっています。

 この右クリック禁止の方法を紹介しているサイトによって、記述が若干異なるようですが、内容的にはほぼ同じです(ただ、警告メッセージを表示させるサンプルが多いようです)。

 これを利用する場合、<head>〜</head>の位置に貼り付けるようにしてください。BODY要素内に記述した場合と比べ、先にこの部分が読み込まれるため、ページの読み込みが遅い場合でも右クリックによるメニュー表示を妨害することができます。

<script type="text/javascript">
<!--
function antiDispMenu(evnt) {
    if (document.all) {
        return false;
    }
    else if (document.layers || document.getElementById && evnt.which == 3) {
        return false;
    }
}
if (document.layers) {
    document.captureEvents(Event.MOUSEDOWN);
    document.onmousedown=antiDispMenu;
}
else {
    document.onmouseup=antiDispMenu;
    document.oncontextmenu=antiDispMenu;
}
//--> 
</SCRIPT>

 もう一つ例を紹介します。一つ前のものとほとんど変わらないように見えますが、欠点があります。document.oncontextmenuという部分が記述されていないのです。

<script type="text/javascript">
<!--
function antiDispMenu(evnt) {
    if (document.all && event.button == 2) {
        alert("右クリック禁止!");
        return false;
    }
    else if (document.layers || document.getElementById && evnt.which == 3) {
        alert("右クリック禁止!");
        return false;
    }
}
if (document.layers) {
    document.captureEvents(Event.MOUSEDOWN);
    document.onmousedown=antiDispMenu;
}
else {
    document.onmouseup=antiDispMenu;
}
//--> 
</SCRIPT>

 この例では、Internet Explorerで普通に右クリックすれば、警告が表示されて確かに右クリックメニューは表示されません。

 しかしながら、マウスの右ボタンを押さえたままの状態で、表示された警告をクリックして消し、右ボタンを放すと、右クリックのメニューが表示されてしまいます

 この違いは右クリックが検出されるタイミングの違いによるものです。onmousedownはマウスのボタンを押した瞬間であるのに対し、oncontextmenuはマウスの右クリックボタンを離し、メニューが表示される瞬間を検出しているようです。

欠点

 基本的に右クリック禁止は、ソースを隠す方法としては最も弱いものだと思います。理由として、次のようなものが挙げられます。

  1. 右クリックメニュー以外にもソースを表示する方法がある
  2. JavaScriptを無効にすることで、右クリックメニューが表示できる
  3. Internet Explorer以外では、効果がないことが多い
  4. ブラウザ本来の右クリックの機能を損なわせてしまう

 右クリックを禁止にしても、次のような簡単な方法でソースを表示されてしまいます。

メニューバーから表示

 Internet Explorerのメニューバー(ファイル、編集、表示などがある部分)にもソースを表示させるメニューがあります。

 [表示]→[ソース]とクリックすればそのページのソース(フレームを使ったページならば、最上位の親フレームのページ)が表示されます。

JavaScriptを無効にする

 右クリック禁止はJavaScriptを利用したものなので、JavaScriptを無効にしてしまえばソースを保護することはできません。

 Internet Explorerの、[ツール]→[インターネットオプション]→[インターネットオプション]で、インターネットオプションのダイアログが表示されます。次に、[セキュリティ]タブをクリックし、インターネットを選択し、「このゾーンのセキュリティのレベル」のつまみをにし、[OK]をクリックすることで、JavaScriptを無効にすることができます。

 ただし、この設定の状態では、セキュリティ制限により、一部の機能が使用できないことがあります。

「view-source:」を使い、ソースを表示

 URLの「http:」の前に「view-source:」を付けてそこへ移動すると、一部のブラウザ(Internet Explorer、Firefox、Netscapeなど)では、ブラウザ上で表示せずにそのURLのソースを表示するという機能があります。

 例えば、下のリンクはGoogleのトップのソースを表示するものです(view-source:http://www.google.co.jp/)。

 Google

 これにより、ソースを見たいページのURLさえわかればアドレスバーに「view-source:」を付けたURLを貼り付けて[Enter]キーを押すだけでソースを表示できます。注意ですが、OSがWindows XP SP2である場合、Internet Explorerでは「view-source:」が使えなくなりました。ただし別のブラウザでは使用できるようです。

 このように、右クリック禁止は、少し知っている程度で誰でも簡単に無効化することができます。無断転載をするような初心者でも、これを知っている可能性は十分あるので注意が必要です。

 HTMLのソース隠しとその解読[0] [1] [2]