'Disable right click on pdf inside embed element

I have an embed element in which I provided path to pdf file. I want to prevent it from being download.

<embed src="test.pdf" width="760" height="800" oncontextmenu="return false" />

but when I right click on that t gives me options to save and print pdf. I want to prevent these options.

I tried

<script type="text/javascript">
    document.addEventListener("contextmenu", function (e) {
        e.preventDefault();
    }, false);
</script>

but it disables right click on entire page except for PDF.

javascripthtmlpdf


Solution 1:[1]

One simple and reliable solution, that is not affected by CORS or CSP, is to cover the embed with another element. I'm using an image here because you cannot embed pdfs on stack overflow.

.embed-cover {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  
  /* Just for demonstration, remove this part */
  opacity: 0.25;
  background-color: red;
}

.wrapper {
  position: relative;
  overflow: hidden;
}


/* Not Important*/
img {
  width: 300px
}
<h3>Normal img/embed/object element</h3>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">

<hb/>

<h3>With cover</h3>
<div class="wrapper">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
  <div class="embed-cover"></div>
</div>

The covering element 'catches' any click events and prevents them from reaching the underlying element (the image in this case)

Solution 2:[2]

You should use iframe and inject your javascript code.

To do:

  1. Use iframe tag instead of embed tag and use myFrame as id. ex: 

<iframe id="myFrame" width="760" height="800" />
  1. In your parent document get iframe from DOM.
  2. Call window.eval method of iframe, use 
'document.addEventListener("contextmenu", function (e) {
        e.preventDefault();
    }, false);'

as string parameter.

  1. Now iframe should not effected by right click.

It should look like this at the end:

var myFrame = document.getElementById('myFrame');

myFrame.window.eval('document.addEventListener("contextmenu", function (e) {e.preventDefault();}, false)');

Solution 3:[3]

with Wendelin's answer i was able to achieve what i wanted to achieve.

<html>
<head>
    <style>
        .embed-cover {
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          
          /* Just for demonstration, remove this part */
          opacity: 0.25;
        }

        .wrapper {
          position: relative;
          overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        function disableContextMenu() {
            window.frames["pdfframe"].contentDocument.oncontextmenu = function(){return true;};   
            var myFrame = document.getElementById('pdfframe');
            myFrame.window.eval('document.addEventListener("contextmenu", function (e) {e.preventDefault();}, false)');
        }

    </script>
</head>
<body onload="disableContextMenu();" oncontextmenu="return false">
    <div class="wrapper">
        <embed id="pdfframe" src="<url of myfile.pdf>#toolbar=0" width="100%" height="100%" ></embed>
        <div class="embed-cover"></div>
    </div>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Wendelin
Solution 2 Cahit Karahan
Solution 3 vetal_king

Related Questions