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?

As a website owner, you may want to protect your content from being easily copied or accessed through 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’ll share a concise JavaScript snippet that does exactly that, with an option to bypass restrictions for specific users via a query parameter (edit=true). We’ll 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 by discouraging direct copying of text, images, or other elements
  2. Enhance control over user interactions with sensitive content
  3. Secure premium materials from unauthorized access, especially on e-learning platforms
However, you may still want certain users (like editors or admins) to bypass these restrictions for content management or testing purposes. That’s where the edit=true query parameter becomes useful.

The JavaScript code

Here’s a JavaScript snippet that disables text selection, right-click, and copy shortcuts, with a condition to allow access if edit=true is present in the URL.
  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>
This ensures restrictions apply only to general visitors, while editors with ?edit=true can still interact freely.

How to use the code

Here's how you can apply this JavaScript on a single page or across your entire Knorish site.
  1. Add on the select page's header code directly to apply it only for that page
  2. To apply this for across all pages on your site or blogs, use the above code on Custom Code > Header Code
Learn more about adding custom code to a specific page or entire site here: How to add custom HTML, CSS or JavaScript codes on specific pages or across your site?

Limitations and Considerations

Even though this script helps discourage copying, it's important to be aware of its constraints.
  1. Not Foolproof: Users can bypass these restrictions by disabling JavaScript, using developer tools, or viewing the page source. Consider this as a deterrent, not an actual  security measure.
  2. User experience: Preventing all copying may frustrate genuine users who wish to quote or share your content responsibly
  3. Platform Compatibility: Ensure ?edit=true is preserved and used when previewing or editing within your Knorish site
  4. SEO Impact: The script doesn’t affect search engines, but overly aggressive protections may reduce user engagement, a key factor as per Google's E-E-A-T guidelines.

Conclusion

This JavaScript solution provides a lightweight method to deter casual content copying while offering flexibility for authorized users. With a simple edit=true query parameter, content managers can bypass restrictions when needed, making it ideal for blogs, e-learning platforms, or any website 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 ...