埋め込みタグの右クリックを無効にする方法は?

Aug 21 2020

実はユーザーがPDFをダウンロードするのは控えたいです。イベントリスナーを追加して無効にしてみました。

useEffect(() => {
    let element = document.getElementById('pdf-div')

    if(element)
      element.addEventListener("contextmenu", (event: any) => event.preventDefault());
  }, [])
  return (
    <>
      {
        file.includes('.png') ? 
          <img src={require(`./../../mocks/${file}`)} alt="" className='pdf-document-img' /> : <object id={'pdf-div'} ref={ref} className='pdf-document' data={`${file}#toolbar=0`} type="application/pdf">
            <embed id={'pdf-div'} ref={ref} src={file} type="application/pdf" />
          </object>
      }
    </>
  );

回答

1 Ryan Aug 21 2020 at 18:30

最終的な目標が、ユーザーがPDFやその他のファイルをダウンロードしないようにすることである場合は、問題が発生します。

悪意のあるユーザーは、提供するファイルを取得する方法を少し知っています。彼らがそれを見ることができるならば、彼らはそれをダウンロードすることができます。Javascriptは、埋め込みの右クリックを妨げる可能性がありますが、ダウンロードを妨げることはありません。

とにかく、あなたの質問に答えるために。私が見ることができることから、ここには2つの即時オプションがあります。ユーザーがPDFだけでなく画像も右クリックするのを防ごうとしているようです。埋め込みは特に機能していません。

では、その時点で、ページの右クリックを完全に無効にしないのはなぜですか?

var message="Function Disabled!";

function clickIE4(){
    if (event.button==2){
        alert(message);
        return false;
    }
}

function clickNS4(e){
    if (document.layers||document.getElementById&&!document.all){
        if (e.which==2||e.which==3){
            alert(message);
            return false;
        }
    }
}

if (document.layers){
    document.captureEvents(Event.MOUSEDOWN);
    document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
    document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")
<img src="https://www.w3schools.com/howto/img_woods_wide.jpg"/>

<h1>Test text</h1>
<p> Pure Javascript option to disable right-click on page entirely, rather than only on certain elements, etc </p>

それでもユーザーが右クリックできるようにしたい場合は、埋め込みPDFの場合は、ユーザーが代わりに右クリックする別の要素でユーザーを覆います。

これを行う方法の優れた例については、この質問を参照してください。Stack OverflowにPDFを埋め込むことはできないため、彼は例として画像を使用していますが、アイデアを得る必要があります。