【（ほぼ）完全な右クリック・コピペ対策】簡単に実装する方法

ウェブサイトを運営する際、右クリックやコピー＆ペーストを無効化したいと考えることはありませんか？特に、独自のコンテンツや画像を守るためには効果的な対策が求められます。本記事では、HTMLファイルに簡単に追加するだけで、右クリックやコピペ、ドラッグ操作を無効化する方法をご紹介します。

1. CSSで基本的な操作を無効化する

以下のコードを<style>タグ内に記述するだけで、全ての要素で「テキスト選択」や「ドラッグ」を無効化できます。

disableActions.css
<style>
  /* テキスト選択を完全無効化 */
  * {
    user-select: none; /* 標準プロパティ */
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer */

    /* ドラッグ操作を無効化 */
    -webkit-user-drag: none; /* 特定ブラウザ向け */
    user-drag: none;
  }

  /* クリック操作を無効化（オマケ） */
  a, button, input, label, textarea, select, div, span, svg {
    pointer-events: none;
    cursor: not-allowed;
  }
</style>

【上記ソースをダウンロード】

このコードを適用することで、ユーザーがテキストを選択したり、画像やリンクをドラッグする操作を抑制できます。ただし、右クリックやコピー操作を完全に制御するには、JavaScriptを追加する必要があります。

2. JavaScriptでさらに強力な制御を実現

以下のJavaScriptコードをHTML内に記述することで、右クリックやコピー＆ペースト、ドラッグ＆ドロップなど、ユーザーが行うほとんどの操作を無効化できます。

disableActions.js
<script>
  // 右クリック（コンテキストメニュー）を無効化
  document.addEventListener('contextmenu', function(event) {
    event.preventDefault(); // デフォルトの右クリックメニューを表示しない
  });

  // ドラッグ開始を無効化
  document.addEventListener('dragstart', function(event) {
    event.preventDefault(); // 要素のドラッグ操作を無効化
  });

  // ドロップ操作を無効化
  document.addEventListener('drop', function(event) {
    event.preventDefault(); // 要素をドロップする操作を無効化
  });

  // コピー操作を無効化
  document.addEventListener('copy', function(event) {
    event.preventDefault(); // 選択されたコンテンツのコピーを無効化
  });

  // ペースト操作を無効化
  document.addEventListener('paste', function(event) {
    event.preventDefault(); // 外部からのコンテンツペーストを無効化
  });

  // カット操作を無効化
  document.addEventListener('cut', function(event) {
    event.preventDefault(); // 選択されたコンテンツのカット（切り取り）を無効化
  });
</script>

【上記ソースをダウンロード】

これにより、以下の操作が無効化されます：

右クリック（コンテキストメニュー）の表示
画像やリンクなどのドラッグ＆ドロップ操作
コピー（Ctrl+C）やカット（Ctrl+X）、ペースト（Ctrl+V）

3. CSSとJavaScriptを組み合わせた完全対策

上記のCSSとJavaScriptを組み合わせることで、右クリックやコピー＆ペースト、ドラッグ＆ドロップの完全対策を実現できます。コード全体は以下のようになります：

html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>操作無効化デモ</title>
  <style>
    /* テキスト選択とドラッグを無効化 */
    * {
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-user-drag: none;
      user-drag: none;
    }
  </style>
</head>
<body>
  <h1>操作無効化のデモ</h1>
  <p>このページでは右クリックやコピー、ドラッグ＆ドロップが無効化されています。</p>
  <script>
    document.addEventListener('contextmenu', function(event) {
      event.preventDefault();
    });
    document.addEventListener('dragstart', function(event) {
      event.preventDefault();
    });
    document.addEventListener('drop', function(event) {
      event.preventDefault();
    });
    document.addEventListener('copy', function(event) {
      event.preventDefault();
    });
    document.addEventListener('paste', function(event) {
      event.preventDefault();
    });
    document.addEventListener('cut', function(event) {
      event.preventDefault();
    });
  </script>
</body>
</html>

注意点

万能ではない:
これらの対策は、通常のブラウザ操作を制御するものです。しかし、ユーザーが開発者ツールを使用すれば、対策を回避される可能性があります。
ユーザーフレンドリーの配慮:
操作を制限しすぎると、ユーザー体験を損なう場合があります。本当に必要な場合のみ、このような対策を導入しましょう。

以上の方法を使えば、右クリックやコピペ対策を（ほぼ）完璧に実現できますw

【（ほぼ）完全な右クリック・コピペ対策】簡単に実装する方法

Bywomb

1. CSSで基本的な操作を無効化する

2. JavaScriptでさらに強力な制御を実現

3. CSSとJavaScriptを組み合わせた完全対策

注意点

By womb

Related Post

WP REST APIのmshotsで簡単にスクリーンショットを自動生成する方法

数値文字参照の一覧や

iframe内のキャッシュが粘っこくてﾑｶﾂｸ件

見逃しています

mixi2どうぞ。

【（ほぼ）完全な右クリック・コピペ対策】簡単に実装する方法

WP REST APIのmshotsで簡単にスクリーンショットを自動生成する方法

2023夏季休暇のご案内