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 on:
| Personal | YouTube | Cyber Prophets | Sharing Your Stories | ||
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
|
Top comments (17)
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?
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.
Or just by taking a screenshot. This is a stupid idea and should not be implemented, as simple as that. It provides no protection from anything that is a threat, all it does is annoy users who for some reason want to print the site.
This already happens on many websites including Udemy. If you don't like them, you can avoid the services and use other platforms. You're free to choose what it's good for you.
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
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.
It's not. In several places it is illegal to have inaccessible websites. Also, as developers, we should not promote user hostile practises like this.
Can you provide the links to know in which countries (not country) this practice is illegal? It will be a useful resource for all of us. One thing is that a practice is not user-friendly and should not be promoted and another is that is illegal based on local or regional laws. At least, I have never heard that any country has prohibited this.
Also, do you have any documentation on how these countries enforced it? If it was the case, many websites would be already banned. It makes little sense. I don't think let's say Liechtenstein will passing this law can force China to make all their websites accessible just because its population will be affected. Chinese developers can easily ignore this law and will be hard to enforce if Liechtenstein could do it. It will be more like if the Chinese government agreed with Liechtenstein's terms. Most likely the Chinese government will ignore them. It's just a matter of power. Additionally, Chinese developers could block Liechtenstein users from accessing their websites and that's all problem solved. How do you enforce it?
Another thing would be that the EU created a law like that and brought it to life, a good example was the GDPR. This had a global impact. However, if only one country or some small countries try to pass laws like this, if you don't live or have businesses with them, it will be nearly impossible to enforce them. You could send an email to them and they will only ignore it, especially.
This is the one of the first results when you search: "accessible website illegal EU"
Is Website Accessibility a Legal Requirement in the EU?
But it seems this is only for public websites, you can still have a shitty blog that no one can use and you will be fine.
More than public websites (which this one must be included, for example), it's related to:
Also, it's pretty specific to EU countries (probably, it's extendable to the EFTA) public sector websites and apps, it cannot be enforced in the UK (Brexit) or India, for instance. Most importantly, it doesn't apply to the private sector which is pretty much the majority of the world.
Accessibility is as difficult to enforce as trying to convince companies that they should make their websites green (sustainable). If there is no significant money behind or a considerable fine, pretty much only the affected ones try to push for it. It will be easier that one day there is an AI in the browser that guesses the missing tags or disable the non-accessible features (this could lead to copyright issues because Generative AI tools using these data to be trained) than convincing developers or companies to invest time in it.
By public, I mean public sector. Sorry for the confusion. You can see this in my comment:
Why I would put this sentence if I would mean all public websites, and how a shitty blog is not public?
I understand. My goal was to avoid any future confusion by potential readers.
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.