JavaScript

右クリック禁止？テキスト選択禁止？それでも大丈夫！ブラウザでのコピーを可能にするテクニック

  /
Buy Me A CoffeeBuy Me a Coffee at ko-fi.com

はじめに

メモするためにテキストや画像をコピーしようとしたら、うまくコピーできなかったことはありませんか？これはJavaScriptでコピーを防いでいることが多いです。
これらの制限を解除するJavaScriptを作り、サイトを開くたびに実行すれば良いのですが、さすがに面倒です。

FirefoxのアドオンであるGreasemonkeyやChromeのScriptAutoRunnerを用いれば自動的にJavaScriptを実行可能です。これらを使ったコピー禁止を回避するJavaScriptを紹介します。

ブラウザでのコピーを可能にするテクニック

準備

Firefoxをお使いの方は、Greasemonkeyというアドオンをインストールします。
Chromeをお使いの方は、ScriptAutoRunnerというアドオンをインストールします。

Greasemonkeyのスクリプト

Firefoxをお使いの方向けのGreasemonkeyスクリプトを以下に紹介します。

// ==UserScript==
// @name     ImproveUsability
// @version  0.0.1
// @grant    none
// @require  https://code.jquery.com/jquery-3.6.0.slim.min.js
// ==/UserScript==

(function () {
  function improve(number) {
    $("body").css("-moz-user-select", "text");
    $("body").css("-khtml-user-drag", "auto");
    $("body").css("-webkit-user-select", "auto");
    $("body").css("-ms-user-select", "text");
    $("body").css("user-select", "text");
    document.addEventListener("contextmenu", (e) => e.stopPropagation(), true);
    document.addEventListener("copy", (e) => e.stopPropagation(), true);
    document.addEventListener("cut", (e) => e.stopPropagation(), true);
    document.addEventListener("paste", (e) => e.stopPropagation(), true);
    document.addEventListener("selectstart", (e) => e.stopPropagation(), true);
  }
  improve();
})();

ScriptAutoRunnerのスクリプト

Chromeをお使いの方向けのScriptAutoRunnerスクリプトを以下に紹介します。
Greasemonkeyにおける@requireに相当するものが見つからなかったため、JavaScript上でJqueryのCDNを読み込みをしています。

let head = document.getElementsByTagName("head");
let script = document.createElement("script");
script.setAttribute("src", "https://code.jquery.com/jquery-3.6.0.slim.min.js");
script.setAttribute("type", "text/javascript");
script.addEventListener("load", () => {
  $("body").css("-moz-user-select", "text");
  $("body").css("-khtml-user-drag", "auto");
  $("body").css("-webkit-user-select", "auto");
  $("body").css("-ms-user-select", "text");
  $("body").css("user-select", "text");
  document.addEventListener("contextmenu", (e) => e.stopPropagation(), true);
  document.addEventListener("copy", (e) => e.stopPropagation(), true);
  document.addEventListener("cut", (e) => e.stopPropagation(), true);
  document.addEventListener("paste", (e) => e.stopPropagation(), true);
  document.addEventListener("selectstart", (e) => e.stopPropagation(), true);
});
document.head.appendChild(script);

課題

以下メソッドで、右クリック抑制回避に有用なメソッドを使ったかどうかバレるので、しっかり対策されているサイトだと、右クリックできないことがあります😿
良い解決方法をご存知の方、ご連絡いただけます幸いです。スクリプトを改良させて頂きます。

Chrome Firefox Greasemonkey JavaScript ScriptAutoRunner