react-text-protect

A React component that protects content from casual copying with clipboard encryption, watermarking, and DevTools detection.

Installation

npm install react-text-protect

Usage

import ProtectedText from "react-text-protect";

function ExamQuestion() {
  return (
    <ProtectedText userId="student_123">
      What is the capital of France?
    </ProtectedText>
  );
}

Features

1. Clipboard Encryption

When users copy text, they get Vigenère-encrypted gibberish:

Xibw lv wkh fdsxwdo ri Iudqfh?

2. Screenshot Watermarking

A semi-transparent watermark with user ID and timestamp appears over the text, making screenshots traceable.

3. DevTools Detection

When browser DevTools are opened, content is automatically hidden with a warning message.

4. DOM Obfuscation

Text is stored in reversed base64 in data attributes to make it slightly harder to find in DevTools (not foolproof, just annoying).

API

<ProtectedText 
  userId="user_id"      // Default: "USER" - appears in watermark
  showWatermark={true}  // Default: true - toggle watermark visibility
>
  Your protected content here
</ProtectedText>

How It Works

• Clipboard: Intercepts onCopy events and replaces content with encrypted text
• Watermark: Overlays user ID + timestamp (visible in screenshots)
• DevTools: Detects window size changes to identify when DevTools opens
• DOM: Stores content in obfuscated data attributes

Limitations

This is a deterrent, not foolproof security:

• ❌ Can be bypassed by disabling JavaScript
• ❌ DevTools detection can be fooled with external monitors
• ❌ Watermark can be cropped from screenshots
• ❌ Text is still in DOM (just harder to find)
• ❌ Phone cameras bypass all protections

Good for:

• Timed exams where bypassing takes effort
• Adding friction to casual copying
• Making screenshots traceable via watermarks

Not good for:

• Preventing determined attackers
• Actual security requirements
• Protecting highly sensitive data

Accessibility

✅ Screen readers work normally - they read the original text from the DOM.

⚠️ DevTools detection may interfere with accessibility tools in some cases.

License

MIT

Links

• Demo Site
• GitHub
• npm Package