Web is a public place and stealing images/videos/text from your website is one of the common issues. There are precautions available to avoid this issue to some extent, but it is not possible to avoid it completely. In this post, I have discussed some tricks to show how to avoid this issue.
Disable Rightclick on a Webpage
jQuery is one of the widely used library. You can use following code to avoid right click on a website. Avoiding a rightclick will prevent user from opening Developers Tools in a browser. Remember, user can still open developers tools from browser’s menu.
$(document).ready(function() {
$("img").on("contextmenu",function(){
return false;
});
});
Disable Copy on your website
Mousetrap is a very good library to prevent specific key or key combinations on your website. Remember, preventing key combination for screenshots are not effective using this technique. Key combinations for screenshots are handled by Operating System and can not be controlled by browser’s javascript.
// Include MouseTrap js file in your HTML file before using following code. //
// Function to prevent Default activities on specific key or key combination
function preventDefaultActivities(e)
{
console.log("Suppressed default activity");
e.preventDefault();
}
//Bind key or key combination to preventDefaultActivities function.
$(document).ready(function(ev){
if(Mousetrap)
{
Mousetrap.bind('command+c', preventDefaultActivities);
Mousetrap.bind('command+v', preventDefaultActivities);
Mousetrap.bind('ctrl+c', preventDefaultActivities);
Mousetrap.bind('ctrl+v', preventDefaultActivities);
}
});
Hotkeys is another good project to achieve the same purpose of preventing default activities of specific key or key combinations.
Disable selection of text on a webpage
You can disable selection of a text on a webpage by simple css trick.
// Disable selecting text via css
html {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
Disable Print of a Content of a webpage
Disable printing content of a webpage by hiding the content through CSS.
@media print {
html, body {
display: none; /* hide whole page */
}
}
Disable Screenshot
Screenshot is a feature from an Operating System. In Mac OS, you can use Command + Shift + 3 and Command + Shift + 4 to take screenshot. In Windows OS, you can use snipping tool or press PrintScrn on keyboard to take screenshot. This commands are controlled by Operating System and can not be blocked by Javascript in the browser.
Add a copyright notice in a footer
Consider adding a copyright notice to the footer a website. This will clearly indicate that the content of the website is a property of the owner and not allowed for reuse by public.
Avoid Hotlinking
Other websites can easily get URL of your image/video and use it on their website. This leads to a bandwidth usage increase on your server from other websites. Consider doing some server tricks to disallow requests from other websites to your server.
Putting a Warning Message in Browsers Console
Consider adding a warning message to the browser console that will indicate user not to steal the content of a web page.
console.log("Content of this website is for public information. Usage of it without owners permission is strictly prohibited.")
Conclusion
We can take preventive measures to protect the content of a website. The web is constantly evolving and it is hard to secure our content 100%. The user can always take a photo on his phone even after implementing 100% copyright protection on your website. I would love you hear from you if you come across a new trick to protect a copyright of a website.
