How to Stop Users from Copying Web Content: CSS, JS, and Clipboard Tricks

In certain business scenarios you may want to prevent users from copying page content, for example:

Paid content protection : online novels, paid courses, etc., to stop easy copying and distribution.

Exam or quiz systems : prevent candidates from copying questions for external help.

Sensitive information display : hide bank card numbers, personal IDs, reducing accidental leakage.

Although it is technically impossible to stop a determined user completely (they can screenshot or photograph), front‑end developers have several methods to make copying much harder.

Method 1: CSS Magic — user-select: none

This is the simplest and most common approach. The CSS user-select property controls whether text can be selected.

.no-copy {
  user-select: none;
  /* Compatibility for older browsers */
  -webkit-user-select: none; /* Safari, Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+ */
}

/* Or apply to the whole page */
body {
  user-select: none;
}

Effect : When the mouse hovers over an element with this style, the cursor does not become an I‑beam and text cannot be selected, thus copying is impossible.

Advantages :

Extremely easy to implement—one line of CSS.

No JavaScript performance overhead.

Disadvantages :

Only stops honest users : anyone familiar with developer tools can re‑enable the property and copy.

Poor user experience : disabling text selection may break normal interaction expectations.

Method 2: JavaScript Event Listening — copy and contextmenu

For a stricter approach, you can listen to and block copy‑related events with JavaScript.

1. Disable the copy event ( copy )

When the user triggers a copy action (Ctrl+C or right‑click menu), the copy event fires and can be intercepted.

2. Disable the right‑click menu ( contextmenu )

Prevent the default context menu from appearing.

document.addEventListener('contextmenu', function (e) {
  // Prevent the default right‑click menu
  e.preventDefault();
});

3. Disable keyboard shortcuts ( keydown )

Monitor keyboard events and block the Ctrl+C shortcut.

Combination : By combining the above JavaScript with the CSS user-select rule, you can build a stronger “defense system”.

Advantages :

Harder to bypass than pure CSS because disabling JavaScript is more involved.

Allows custom feedback, such as alert dialogs.

Disadvantages :

Still breakable : Users can disable JavaScript in dev tools, nullifying all restrictions.

Very poor experience : Blocking right‑click and shortcuts interferes with normal browser habits (e.g., right‑click refresh, open new tab) and may anger users.

Method 3: “Gentle” Magic — Adding Content to the Clipboard

Instead of outright blocking copy, you can append your own information (e.g., copyright notice or source link) to the copied text, offering a more user‑friendly solution.

Listen to the copy event and use the Clipboard API to modify the clipboard content.

document.addEventListener('copy', function (e) {
  // Get the selected text
  const selection = window.getSelection().toString();
  // Your additional copyright info
  const copyright = `

----------------
Source: FedJavaScript`;
  // Prevent the default copy behavior
  e.preventDefault();
  // Write "selected text + copyright" to the clipboard
  e.clipboardData.setData('text/plain', selection + copyright);
});

Effect : Users can copy normally, but when they paste, the content ends with your copyright notice.

Advantages :

Good user experience : Does not hinder the core copy action, only adds information.

Gentle agreement : Encourages proper attribution without forcing restrictions.

Reflection: Do We Really Need to Block Copying?

Before applying these techniques, ask yourself: Is prohibiting copy really the best choice?

Technical futility : Front‑end restrictions are “paper tigers” for determined users who can disable JS, view source, use crawlers, or simply screenshot and OCR the content.

User‑experience disaster : Forcing users to change their habits, especially disabling right‑click, creates a terrible design, harms accessibility, and can drive users away.

Alternative solutions :

Watermarking : Add visible or invisible watermarks to images or important documents for better copyright tracking.

Content segmentation / lazy loading : Make it harder for crawlers to retrieve the full content.

As front‑end developers, we have the “copy‑blocking sword”, but we should consider when and whether to draw it. In most cases, choosing a more open and friendly “modify clipboard” approach—or simply trusting users—may be the wiser path.