Disable text copy

How can i disable the user to copy the text from the frontend as well as from the developer mode of the browser?

1 Like

anything that arrives to the browser can be inspected with the browser’s tools. there is no way to stop that.

Is there any way to hide the response from developer mode or encrypt the response? Btw I am using strapi as a CMS.

if something is displayed in the browser anybody can access it, this is how browsers work. Of course you can encrypt the data sent to the browser, but if you then decrypt it to display it (not sure if it makes sense for you to show encrypted data) it will be available to inspect.
Again, this is how browsers work: if you see it on screen somehow it is accessible.

You’ve probably never had to copy content in a google protected document :sweat_smile:
Even the developer console won’t help

For example: Try to copy me 🙂 - Google Docs

You can still 100% copy stuff from a Google Doc from the dev console :wink:

It looks like they play around with creatively embedding the content if the dev console is detected. For the copy thing though, you could do something like disable right click and and a key down even when CTRL+C is pushed to run an action that overrides copying.

you may want to have a better look at the browser dev tools :upside_down_face:

you can annoy users by breaking default behaviour of right click and keyboard shortcuts, but it’s pointless because the data is still fully accessible.

You’d have to go great lengths, such as using a canvas, or an image or something, but canvas would probably the hardest to crack :smiley:

not really. just look at the network panel, the data will be there (a direct request to the backend or a variable in a js bundle etc).
the only thing that you get with the canvas is a bad experience for user accessibility.

I mean, it’s harder for normies to copy from a canvas tho.

it’s hard for screen readers to read from a canvas too.

as for preventing copying of text there is plenty of tutorials in the internet explaining how to use dev tools so it’s safe to assume that if a non-tech person wants to copy the text they will copy the text eventually.

if you really want to make it harder for the majority of people then I suppose you need to go for a native mobile app but you still have to break all the accessibility for people using screen readers and you can still sniff network traffic and get the data (but it should be harder than using browser dev tools)

in the end is just putting a lot of effort to go against the default platform behaviour breaking a lot of important user experience without even being sure to get the expected result.

You can always send your API requests in Binary or some other non human readable format :smiley:

and you will always have some client code that decodes that to show it. in a browser you will have access to that, in a mobile app I suppose you can have access to an encrypted storage where to put some encryption key, but still the key needs to be transmitted to the app at least once :upside_down_face: