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>
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:
| YouTube | Cyber Prophets | Sharing Your Stories | ||
|---|---|---|---|---|
 |
 |
 |
 |
|
Top comments (12)
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 🤣
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
"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...
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?
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:
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:
Cons:
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.
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)
Of course, devs can bypass it ;). If not, why are we here?
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.
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.
Great another advice how to make website inaccessible. Good job. Please don't do this.
Everything comes with a price. It's up to the owner of the site to decide.