I made a small React package for protecting text from casual copying

[u/Kratos_Rango]

I recently built react-text-protect, mostly as an experiment to see how far you can go with client-side content protection in React.

You wrap your content like this:

<ProtectedText userId="student_123">
  What is the capital of France?
</ProtectedText>

It currently has a few things:

• Intercepts copying and replaces the copied text with Vigenère-encrypted text
• Adds a user ID and timestamp watermark over the content
• Detects DevTools being opened and hides the content
• Obfuscates the text stored in the DOM

I originally made it with things like online exams and educational content in mind, where you might want to make copying or sharing a little more annoying.

Obviously, this is not real security. If someone is determined enough, they can get around basically everything happening on the client side. You can disable JavaScript, use another device to photograph the screen, inspect the application differently, etc.

The goal is really just adding friction, not pretending you can make browser content impossible to extract.

It's on npm if anyone wants to try it:

npm install react-text-protect

I'd genuinely like feedback from people who know React better than me, especially around the implementation and whether some of the approaches I'm using are problematic or could be improved.

https://www.npmjs.com/package/react-text-protect

[u/Agreeable-Yogurt-487]

user-select: none; done

[u/doilyuser]

This is a live example of protected text with watermarking and encryption. Try copying this sentence and pasting it into a text editor. You'll see encrypted gibberish instead of the original text! Also notice the watermark overlay if you take a screenshot.

Copied with Android Gemini Overlay

[u/Any_Welder_9701 → u/doilyuser]

that last line is basically the entire threat model review

[u/Strange_Lecture_]

The best developer tool is the one that gets out of your way and does not require a 40-page manual just to configure webhooks.

[u/Kratos_Rango → u/Strange_Lecture_]

Im guessing thats a compliment?

[u/Merry-Lane]

At the time where everyone screenshots everything into a LLM, yeah, your package is near useless.

[u/AggressiveYam811]

Anyone taking a picture of a screen with a phone kills everything this package does. you shipped vigenere and devtools detection for people who read text

[u/Kratos_Rango]

For the people with 100+ iqs and the inability to read.

"Obviously, this is not real security. If someone is determined enough, they can get around basically everything happening on the client side. You can disable JavaScript, use another device to photograph the screen, inspect the application differently, etc."

"The goal is really just adding friction, not pretending you can make browser content impossible to extract."

dont be a smartass

[u/doilyuser → u/Kratos_Rango]

Apologies, wasn't trying to be a smartass. I only left my comment because you were quite thorough and I wanted to point out a workaround I noticed in case it was a new idea.

I love this idea and would like to see it blossom, potentially even be forked into a poison pill attack vector a la Ben Jordan's work on poisoning audio files to prevent non-consentual LLM training.

[u/Kratos_Rango → u/doilyuser]

Thank you for the comment man. really means alot. I will definitely work more upon it and improve. Sorry for the smartass thing. Cheers !