DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for How to disable printing on a website
Federico Navarrete
Federico Navarrete

Posted on • Updated on • Originally published at supernovaic.blogspot.com

How to disable printing on a website

Sometimes, we have some projects where the content is sensitive or should be protected for privacy reasons or copyrights. A quick solution involves:

  • To prevent the key combination Ctrl + P (for printing) via JS.
  • To prevent text selecting and copying text via JS.
  • To hide the whole page on printing via CSS.
<script>
    //Prevents Ctrl + P
    //From https://stackoverflow.com/a/47848090/1928691
    window.addEventListener('keydown', function(event) {
        if (event.keyCode === 80 && (event.ctrlKey || event.metaKey) && !event.altKey && (!event.shiftKey || window.chrome || window.opera)) {
            event.preventDefault();
            if (event.stopImmediatePropagation) {
                event.stopImmediatePropagation();
            } else {
                event.stopPropagation();
            }
            return;
            }
    }, true);

    //Disables text selection and copying
    //From https://gist.github.com/pbaruns/a24ad79b027956ed5d77fd3e6c201467
    if (typeof document.onselectstart != "undefined") { 
        document.onselectstart = new Function ("return false");
    } 
    else { 
        document.onmousedown = new Function("return false"); 
        document.onmouseup = new Function("return true");
    }
</script>

<style>
    /*From https://stackoverflow.com/a/3359980/1928691*/
    @media print {
        html, body {
            display: none;  /* hide whole page */
        }
    }
</style>
Enter fullscreen mode Exit fullscreen mode

Is it perfect? Of course, is not.

  • You might need to add a paywall to prevent its access.
  • You might need to add a DRM solution to prevent screenshots (that are often followed by OCRs to extract their text). Udemy does this already, you cannot take screenshots from several videos. You can take them if you use Firefox or less common browsers.
  • You will create accessibility issues.
  • The reader mode often bypasses common restrictions.
  • Some people can bypass it using the Dev Console and copy the text from the tags (Devs, RPAs, or geeks mainly?).
  • You might need to encrypt the text using a DRM service for anyone using the Dev Console.

This is just a quick solution that can support you in your journey.

Follow me at:

LinkedIn YouTube Instagram Cyber Prophets Sharing Your Stories
LinkedIn YouTube Instagram RedCircle Podcast RedCircle Podcast

sponsor me

Top comments (12)

Collapse
 
lukeshiru profile image
Luke Shiru

If you're a regular user that wants to print the current page for personal use, you'll just get a bad UX. If you're a person wanting to "maliciously" print a page (if that scenario even exists), then this is extremely easy to bypass. Not to mention that if printing means "vulnerability" in your WebApp, then the problem is the way the app was made, not the fact users can print any page they want.

TL;DR: This is just annoying for regular users, and easy as pie to bypass by anyone that knows about DevTools. So is basically counter productive.

Cheers!

I would laugh so hard if the next post in this series is "how to disable devtools" or something like that 🤣

Collapse
 
fanmixco profile image
Federico Navarrete Author • Edited on

Of course, devs can bypass it ;). That's why we are here. And for sure, there are tools for messing with the dev console:
github.com/theajack/disable-devtool

Collapse
 
lukeshiru profile image
Luke Shiru

"That's why we are here" ... no, we aren't here to deal with stuff that only makes UX worst with no real gains. We are here to create good WebApps. The web is already filled of UX nightmares, so we should avoid adding to that pile with "tricks" like this.

Disabling DevTools is the farthest you can go from a good idea, and that's the politest thing I can say about suggesting that. Not to mention that can also be bypassed...

Thread Thread
 
fanmixco profile image
Federico Navarrete Author • Edited on

The solution is simple, we should not try bypassing anything that we don't own. The "smarter" we try to be, the more DRM solutions we encourage to create. These requirements, you and I know, don't come out of anywhere. If not, why were DRM solutions created for?

Thread Thread
 
lukeshiru profile image
Luke Shiru

I know clients can have really stupid requirements such as "disable copy", or "disable printing", and so on. It's your job to tell them that is a bad idea and should be avoided, explain the reasons why, and suggest actually good solutions. I know some can be stupid enough to keep pushing because they don't understand how bad is it, but is your job to make it clear, maybe even using analogies:

This is like having an alarm in your car. It will make a really annoying sound if people bumps into your car accidentally, or there's a lot of wind, and very rarely if someone stupid tries to steal it. But if you park in a really bad neighbor the car will get stollen either way. So the trick is not to add an alarm that will only be annoying for everyone, and instead just avoid parking on a bad neighborhood.

And then from the analogy, you can explain how blocking basic functionality such as printing doesn't actually avoid content from being stolen, it only makes the site worst for the common user and more fun to "hack" for the actually malicious one. Then you can go and explain how an actually good solutions could look like.

You could even make it into a diagram like:

Pros:

  • Regular users will not be able to print.

Cons:

  • Actually "malicious" users will still be able to print.
  • A11y will be worsen.
  • UX will be worsen.
  • The added "security" looks something like this.
Thread Thread
 
fanmixco profile image
Federico Navarrete Author • Edited on

Indeed, we as devs most likely will bypass it using the console, disabling the JSs, etc. Don't you agree? That's the main problem in the end. We as humans cause our own headaches. We try being smarter. Then, we complain why DRM solutions are created or why something is not user/accessibility friendly.

I'm sure DRM solutions are not exactly accessibility or website friendly. Every time I open or change a page in my ITILv4 e-book, it's a nightmare. It takes ages and is really slow, regardless of the app I use, and I did pay for the copy of my book.

Collapse
 
jonrandy profile image
Jon Randy • Edited on

All of these methods are ultimately bypassable and will generally only serve to annoy users. You really shouldn't be doing any of this unless you have a strong use case (of which privacy and copyright is a poor example)

Collapse
 
fanmixco profile image
Federico Navarrete Author

Of course, devs can bypass it ;). If not, why are we here?

Collapse
 
jonrandy profile image
Jon Randy • Edited on

My point is that anyone who really WANTS to print it, will still be able to print it - trusted, or untrusted people. If it is the untrusted people - they'll get the info through any means (screenshot etc.) and may well be expecting it to be difficult, so may well come armed with technical knowledge. As for the trusted people - these 'prevention' mechanisms will only annoy and frustrate them. Overall, the case for doing this seems pretty weak. A far better solution would be to require authorisation to view the information in the first place.

Thread Thread
 
fanmixco profile image
Federico Navarrete Author • Edited on

Indeed, that's why then you have paywalls. That would be the next step to adding a paywall. And I agree that there will be always smart people who will bypass it. This is the main reason why people require these mechanisms. In the end, paywalls also annoy people, or are you happy when you see them?

And by the way, I am not sure if you have noticed it, but Edge if a website has a DRM like Udemy prevents common screenshots. So, if you want to bypass it, you must use other tools or browsers like Firefox. There will be always workarounds and these workarounds, force people to create these things.

Collapse
 
jcubic profile image
Jakub T. Jankiewicz • Edited on

Great another advice how to make website inaccessible. Good job. Please don't do this.

Collapse
 
fanmixco profile image
Federico Navarrete Author

Everything comes with a price. It's up to the owner of the site to decide.

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post