DEV Community

Vincent Kipyegon
Vincent Kipyegon

Posted on • Edited on

Using HTML attribute `inert` to disable copy paste and user events on a web page/elements

#cloud #azure #aws #cloudcomputing

Have you ever tried to choose and copy text from a webpage but it wouldn't go to the clipboard or copy with the right click? Most organizations choose to limit user access to certain web pages on their site; their privacy policies, disclaimer, and terms of use pages are made "read only."

Over time, most web developers use various techniques to mask their content preventing users from copy-pasting, but in 2022, HTML attribute inert was introduced to assist web developers disable copy-paste functionality and user events on web pages or certain elements on the web page. All that is required is the addition of the attribute inert to an HTML element that contains the material. It is compatible will all browsers except Firefox.

<body>
    <section>
        <!-- Insert inert as an attribute to parent div or p themselves -->
      <div inert>
         <h3> Inert HTML attribute is here</h3>
        <p>
         I am not available for copy-paste; i am only meant to be read by you.
        </p>
        <p>
        <p>
         I am not available for copy-paste; i am only meant to be read by you.
        </p>
        </p>
      </div>
</section>
</body>
Enter fullscreen mode Exit fullscreen mode

Read more about inert here on MDN

Let's examine various strategies that developers used to prevent content copy-paste before inert arrived.

1. Using a transparent div over content.

This is done by absolutely position a transparent div over you content. This prevent users from selecting the content.

 <div class="content">
            <div class="cover"></div> 
         <h3> Content is covered</h3>
        <p>
         I am not available for copy-paste; i am only meant to be read by you.
        </p>
        <p>
        <p>
         I am not available for copy-paste; i am only meant to be read by you.
        </p>
        </p>
      </div>
Enter fullscreen mode Exit fullscreen mode

Then add the following css styles

 .content{
position:relative;
padding:1rem;
      }
   .cover{
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        width:100%;
        height:100%;
        background:transparent;
       z-index:100;

      }
Enter fullscreen mode Exit fullscreen mode

2. Using CSS pseudo elements to generate content.

CSS pseudo elements allow us to select alter elements or content that are not directly related to the HTML. ::before and ::after pseudo element are used to add generated content to HTML; the content is only visible,cannot be copied.

<div class="content"></div>
Enter fullscreen mode Exit fullscreen mode

Then add the following styles

.content::before{
        content: "Privacy policies hereein attached";

      }

.content::after{
        content: "These are terms and conditions here in attached";

      }
Enter fullscreen mode Exit fullscreen mode

3. Using JavaScript to disable content menu

Context menu is menu that appears whenever a user clicks right click option. Disabling it is done by add a contextmenu event to the element holding the content then disabling it when the event is fired; calling e.preventDefault() on it.

 const content=document.querySelector(".content");
        if(content){
            content.addEventListener("contextmenu",(e)=>e.preventDefault())
        }
Enter fullscreen mode Exit fullscreen mode

4. Using css property user-select

CSS has a property called user-select which disables user selection of content from an HTML element.It can take one of the following 5 values: none,text,all,auto,contain.
Setting the value of none disables text selection from an HTML element or entire web page.

// disables selection of text from a web page
body{user-select:none;}
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
sadat_hossenhimel_8444 profile image
sadat hossen (Himel) •

To prevent users from copying text on your WordPress website or blog, you can use CopyBlocker Pro, a powerful content protection plugin available at wordpress.org/plugins/copyblocker-pro/. Here’s how to set it up:

Install CopyBlocker Pro:
Log in to your WordPress admin dashboard.
Go to Plugins > Add New, search for CopyBlocker Pro, then click Install Now and Activate.
Configure Protection Settings:
Navigate to the plugin’s settings (typically under Settings > CopyBlocker Pro).
Enable features like:
Disabling right-click to block the context menu.
Preventing text selection and copy-paste (e.g., CTRL+C, CTRL+V).
Protecting images from drag-and-drop or saving.
Customize the alert message (e.g., “Copying is disabled!”) shown when users attempt to copy content.
Optionally, exclude protection for logged-in users or specific pages.
AI-Powered Security:
CopyBlocker Pro uses advanced AI-driven technology to detect and block automated content scraping attempts, ensuring your blog’s text remains secure from bots and casual copiers alike.
Test and Monitor:
Visit your site and try copying text or right-clicking to confirm protection is active.
Check the plugin’s logs (if available) to monitor blocked copy attempts.
Why Choose CopyBlocker Pro?

Easy to Use: Simple setup with no coding required.
Comprehensive Protection: Blocks text copying, image theft, and more.
AI-Enhanced: Leverages AI to combat sophisticated scraping bots, making it ideal for modern websites.
Free and Pro Versions: Start with the free version on WordPress.org or upgrade to Pro for advanced features like watermarking and IP-based blocking.
Note: While CopyBlocker Pro makes it harder to copy content, no solution is 100% foolproof (e.g., users can take screenshots). For added protection, consider watermarking images or using tools like Copyscape to monitor for plagiarism.

Download CopyBlocker Pro today at wordpress.org/plugins/copyblocker-pro/ to safeguard your WordPress content effortlessly!