最速で右クリックを禁止するにはどうすればいいですか

ある、Wordpressで制作されたマンガコンテンツがあり、
著作権の兼ね合いで右クリックを禁止して画像保存ができないようにしてあります。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<?php if( is_search() || is_page('keyword') ){ ?>
<meta name="robots" content="noindex,follow">
<?php } ?>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?>" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css?ver=<?php echo date( 'YmdHis', filemtime( get_template_directory() . '/style.css' ) ); ?>">
<?php wp_enqueue_script( 'jquery' ); ?>
<?php wp_enqueue_script( 'general', get_template_directory_uri().'/js/functions.js', array( 'jquery' ), date( 'YmdHis', filemtime( get_template_directory() . '/js/functions.js' ) ), true ); ?>
<?php wp_head(); ?>
</head>
<body id="body">
<div class="main">
...(中略)...
</div>
</body>
</html>

js/functions.js

$(function(){
    $('.main').on('contextmenu', function(event){
        event.preventDefault();
    })
});

ここで一点、改修要望がありまして。
ページを読み込んで、DOMコンテンツの読み込みが完了するまでの刹那の時間(0.2秒くらい?)、
右クリックが可能な瞬間が存在します。

つまり、ページが読み込まれたら直ちにマウスカーソルをマンガ画像の上に持っていき、
最速で右クリックをすれば、画像の保存が出来る、というわけです。
この、刹那の時間を、限界まで短くしたい、と言われています。

正直なところ、JavaScriptの仕様上、仕方のないことなので
これ以上の速度改善は見込めない気がしているのですが、
ページの読み込みが開始されたら、光よりも早く右クリックを禁止するには、
どのような改修を行えば良いのでしょうか。

私が考えている改修案は以下の内容です。

右クリック禁止の部分だけ抜き出したライブラリを用意し、headタグで呼び出す

linkタグの下に disableContextMenu.js を追加する
wp_enqueue_script 関数を使うとbodyタグの下にscriptが移動するので使用しない
jqueryの読み込みも時間がかかる要因になるので、バニラJSで記述する
既存ライブラリ js/functions.js の記述は競合するのでコメントアウトしておく

/wp-content/themes/{theme_name}/header.php

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<?php if( is_search() || is_page('keyword') ){ ?>
<meta name="robots" content="noindex,follow">
<?php } ?>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?>" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css?ver=<?php echo date( 'YmdHis', filemtime( get_template_directory() . '/style.css' ) ); ?>">
<script src="<?php echo get_template_directory_uri() ?>/js/disableContextMenu.js?ver=<?php echo date( 'YmdHis', filemtime( get_template_directory() . '/js/disableContextMenu.js' ) )"></script>
<?php wp_enqueue_script( 'jquery' ); ?>
<?php wp_enqueue_script( 'general', get_template_directory_uri().'/js/functions.js', array( 'jquery' ), date( 'YmdHis', filemtime( get_template_directory() . '/js/functions.js' ) ), true ); ?>
<?php wp_head(); ?>
</head>
<body id="body">
<div class="main"> ★←この要素 div.main が読み込まれた瞬間に右クリック禁止にしたい
...(中略)...
</div>
</body>
</html>

/wp-content/themes/{theme_name}/js/disableContextMenu.js

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsByClassName('main').addEventListener('contextmenu', function(){
        return false;
    });
});

懸念点

上記のコードは、正直、速度改善が見込めないどころか速度悪化をもたらしそうな気がしています。

headタグにscriptを持って行ったところで、
DOM要素が読み込まれるまではscriptが動きませんし、
むしろDOMツリーの構築を邪魔するので、
ページ読み込み速度を悪化させる懸念さえもあるのですが、
このコンマ何秒の世界でさえも切り詰めたいというオーダーに
どう対処したら良いのかわかりません。

そもそも、右クリック禁止なんて簡単に解除できるし、
この作業に意味があるのか見出せていない状況ではありますが。。
ただ、何も作業をしないと納得してもらえないので、
何とかして速度改善したいです。
これ以上の速度改善が出来ないのであれば、その理由を説明したいです。

右クリック禁止を、極限まで素早く適用する方法はありますか？

m.ts10806

2023/01/12 08:12

そもそもスクリーンショット機能を使えばとれてしまいますが、それは？

qwe001

2023/01/12 08:14

全くもってその通りですし、指摘してありますが、それの対策をする予算はないので不問とのことでした。

m.ts10806

2023/01/12 08:25

予算と時間があっても完全に対策は難しいかと。現状の要件でおさめるとしても、抜け道は必ずあって、いたちごっこのような形で保守に全ての時間と労力を費やすことになると思います。「ログインユーザのみに公開する」程度に落ちつけた方が良いのではと。あ

yambejp

2023/01/12 08:41

右クリックで保存できるということは画像が画像として保存されているということですから右クリックしなくてもHTML情報から直接imgファイルを指定して開いて保存できてしまうということですよね？

qwe001

2023/01/12 08:56

はい。漫画と言いつつも、普通に縦長の画像が連続して表示されているだけです。漫画ビューアライブラリを導入したり画像をバイナリで取得してcanvasで描写するといったことも提言しましたが、予算の関係で難しいとのことですので、オーダーは右クリック禁止の速度改善のみです

行動規範の内容に同意します

回答3件

jsの実行が完了するまでコンテンツがdisplay:noneになるようにheadにcssを追加して、jsの実行完了後にそれを解除するというのがまあ簡単な方法であるかと思います。

まあ、右クリックされれば取れるってならそもそも普通に画像ソースが落ちてきてるってことなんで、スクリーンショットとかするまでもなく、ブラウザのコンソールから画像一覧でダウンロードできちゃうと思いますけども。

投稿2023/01/12 08:28

KazuhiroHatano

総合スコア7804

<head>内の<script>で以下のようなコードを実行すればよいでしょう。main がパーズされるのを待つ必要はありません。

js
1document.addEventListener('contextmenu', e => {
2  if (e.target.closest('.main'))
3    e.preventDefault();
4});

投稿2023/01/12 08:23

int32_t

総合スコア20884

自己解決

自己解決しました。解決というか、以下の内容で右クリック禁止がすぐに適用されるので、ご満足頂けました。

<div class="main">
  <img src="/images/1.jpg" alt="" oncontextmenu="return false;" />
</div>

.main img {
  pointer-events: none; 
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
}

開発者ツールで画像URLを開けば普通に画像が開きますので、ダウンロードできますし、
スクショもできるので、画像の保存は禁止できてませんが、あくまでオーダーは「右クリックを禁止すること」ですので、
それは達成できてるし、クライアントに満足してもらえたのでまあ…良しとします。
皆様貴重なご意見ありがとうございました。今後の開発の参考とさせていただきます。

投稿2023/01/12 09:10

編集2023/01/12 09:14

qwe001

総合スコア133