How to protect your website content by disabling copy and right-click with JavaScript

How to protect your website content by disabling copy and right-click with JavaScript

Introduction

As a website owner, you might want to protect your content from being easily copied or accessed via right-click menus. While no method is foolproof, a simple JavaScript solution can deter casual copying by disabling text selection, right-click context menus, and common copy shortcuts (like Ctrl+C or Cmd+C).
In this article, we will share a concise JavaScript script that does exactly that, with an option to bypass restrictions for specific users via a query parameter (edit=true). We will also cover when to use this script, its limitations, and how to implement it on your site.

Why protect your website content?

Content theft is a common concern for bloggers, course creators, and businesses sharing valuable information online. Disabling copy and right-click functionality can:
  1. Protect Original Content: Discourage users from copying text, images, or other elements directly from your site.
  2. Enhance User Experience Control: Prevent unintended interactions, like right-clicking on sensitive elements.
  3. Secure Premium Content: For platforms like e-learning sites, restrict access to course materials for non-authorized users.
However, you might want to allow certain users (e.g., editors or admins) to bypass these restrictions for testing or content management. That’s where the edit=true query parameter comes in handy.

The JavaScript code

Here’s the JavaScript code that disables text selection, right-click, and copy shortcuts, with a check for edit=true in the URL to bypass restrictions.
  1. <script>
  2.     if (!window.disableCopyScriptLoaded) {
  3.         window.disableCopyScriptLoaded = true;
  4.         const isEditMode = new URLSearchParams(window.location.search).get('edit')?.trim().toLowerCase() === 'true' ||
  5.                         (window.self !== window.top && new URLSearchParams(window.top.location.search).get('edit')?.trim().toLowerCase() === 'true');
  6.         if (!isEditMode) {
  7.             document.addEventListener('selectstart', e => e.preventDefault());
  8.             document.addEventListener('contextmenu', e => e.preventDefault());
  9.             document.addEventListener('keydown', e => {
  10.                 if ((e.ctrlKey || e.metaKey) && e.key === 'c') e.preventDefault();
  11.             });
  12.         }
  13.     }
  14. </script>

How to use the code

  1. Add on your page header code directly to apply it only for the page
  2. To apply this for all pages, blogs, use above code on Custom Code > Header Code

Limitations and Considerations

  1. Not Foolproof: Users can bypass these restrictions by disabling JavaScript, using developer tools, or viewing the page source. Consider this a deterrent, not a security measure.
  2. User Experience: Disabling copy and right-click can frustrate users, especially if they want to copy small portions for legitimate reasons (e.g., quoting your content).
  3. Platform Compatibility: On your Knorish site, ensure query parameters like ?edit=true are preserved.
  4. SEO Impact: Search engines are unaffected by this script, as it’s client-side, but overly restrictive measures might deter user engagement.

Conclusion

This JavaScript solution is a lightweight way to protect your website content while offering flexibility for authorized users. By adding a simple edit=true query parameter, you can bypass restrictions for editing or testing, making it ideal for blogs, e-learning platforms, or any site with premium content.

    • Related Articles

    • Website Mobile Responsiveness

      The Website Builder and all existing themes available on Knorish have been carefully designed to ensure that your website is mobile-responsive. The platform automatically adjusts the elements and their content on a page according to the size of the ...

    • How to copy a page and create a duplicate?

      There could be instances when you may need to duplicate a page. This article will show you how to easily duplicate any page on your Knorish site. Duplicate a page using the My Pages option The fastest way to duplicate a page is by accessing the ...

    • How to add custom HTML, CSS or JavaScript codes on specific pages or across your site?

      This article will show you how to add custom codes such as adding custom event tracking codes for Google Analytics, adding social sharing buttons, or any other custom codes to specific site pages or across the site. Caution: This is an advanced ...

    • How to copy the footer from one page to another

      Customizing a section on your site theme gives a uniform look to your site& saves you time& effort as well. All knorish theme pages come with a default footer. Once you install a theme, all the pages get replicated. In this process, update the footer ...

    • How do I create a knowledge base or the FAQ section for my website?

      With Knorish you can create a knowledge base or an FAQ section for your website on Knorish. To do this, there are 2 ways: Add the FAQ as snippets on a page on your site If you wish to add a FAQ snippet to a page, you can follow the steps highlighted ...