CSS-based anti-copy method

Yeah, and in the end everything is useless against OCR, so ¯\_(ツ)_/¯

Oh, and 50% of my full-time job is scraping (the other 50% is making sense of that scraped data), so doing this kind of thing helps me to get more familiar with different approaches and sometimes learn new things (for example I didn't know of window.getComputedStyle before this thread; I learned it breaking this).

 

Not sure if you saw my edit:

And yes you discover new things every day, that is how it works with all things... I remember doing things old school, then I found jquery and felt stupid I spent so much time doing everything manually. Saved me a bunch of time. And there is still a million things I probably haven't caught up to.

As for OCR, well, you can probably grieve OCR to some extent too... For example, if someone uses print to create the OCR, you can set css page-break to grieve on that front. Also @media print

 

Unfortunately, IE comes to ruin the fun.
Internet Explorer (probably Edge as well) allows the selection of the pseudo elements text. Meaning a simple copy paste is enough to copy the text (select the text then CTRL+C to copy). No need for OCR to get it

 

Oh, nice catch mate. I'll add this to the "disadvantages" list.

 

The solution for this problem is to add random characters inside the span that are hidden with css. This way, when you copy the text, you slso get the hidden random characters. If you randomize the number of characters in each span, simple bots won't be able to simply drop them since they won't easily know if the char is good or not

 

Here's a quick demo of the method I used to add random chars.

https://jsfiddle.net/ymv567qn/#run

The first 2 blocks of "abc" text have hidden characters added. Internet Explorer will copy all of them and will result in garbage. The other browsers will only copy the hidden characters.

 

The "bad" thing about this is that it has a simple "structure", so if you know everything inside the <i> is useless you can remove it with a single line of JavaScript.

Code:

document.querySelectorAll('.word i').forEach((el) => { el.textContent = '' });

Still, if you sometimes include garbage inside the elements and sometimes include real letters, and sometimes even both (possibly playing with ::first-letter)(EDIT: nvm, ::first-letter conflicts with ::before+content) then it might turn interesting.

 

You can mix them. In some cases, use fakes, in other cases, use the real char (and don't apply anything with css in ::before content, in other case, use ::after.

And if the encoding changes with each refresh, it will make it even more interesting

 

Yea tbh this is how most methods should be done (especially the "custom font" thing).

(Btw using the custom font thing with this could be interesting as well )

 

No, make it better. Multiple custom fonts. And some characters within those fonts will be invisible. If the fonts are generated in svg it could be completely random and almost impossible to process.

 

one question as I'm not against this due to the QI fun but i need to use a screen reader. text to speech sometimes due to the side effects of meds I have to take, i don't use windows but I use this bit of free software DSPEECH http://dimio.altervista.org/eng/ is it going to total screw using this up also, which sites are going to use this , as if it's not something i follow np , but if it is i'd like to know that i will not get a problem

 

Yes, totally.

No idea. At most one or two, but I hope no one does.

 

cool , thanks for replying i hope no one will then