4 ms·

usign css attr() for getting html data- attributes is also very interesting. i use this for simple e-mail spam protection: https://stackoverflow.com/a/41566570

by cyptus 7y ago

usign css attr() for getting html data- attributes is also very interesting. i use this for simple e-mail spam protection: https://stackoverflow.com/a/41566570/1216595 https://stackoverflow.com/a/41566570/1216595

GrumpyNl 7y ago
You can not copy the email address, it will be copied backwards. Then you might as well show a image with the address because you already lost the ability to copy and paste.
- true_religion 7y ago
  You can intercept copy and paste using JavaScript.
wolfgang42 7y ago
As others have noted, this is a neat-looking solution but breaks a lot of things. In addition to copy/paste: * Middle-clicking to open my webmail in a new window * “Right-click > Copy link address” because my browser doesn't know about my email client * Possibly screen readers (I don’t know this one for certain) * Keyboard accessibility: I can tab onto the link, but Enter doesn’t activate it * Probably some other things I haven’t thought of Since you’re requiring JavaScript anyway, here's a better solution that doesn't decrease resistance to scrapers¹ and fixes the above problems by turning all of your .cryptedmail tags into proper links that work the way users expect them to.: document.querySelectorAll('.cryptedmail').forEach(a => { const email = `${a.dataset.name}@${a.dataset.domain}.${a.dataset.tld}` a.href = `mailto:${email}` a.innerText = email }) ¹If they’re running JS, they can also just tell Selenium to intercept navigation and then click every link on the page.
- cyptus 7y ago
  sure this breaks the copy and right-click implementation, but most of the users dont need it and will just do a normal click to get in touch. If this is the pain i need to go to receive zero spam mails from page-crawlers, i go for it. Advantage to img-solution is full use of css fonts and text aligns. Also any js-solution which would render the plain email into the DOM will receive spam, as crawlers do already execute js before parsing (also think of SPA).

by cyptus 7y ago

GrumpyNl 7y ago

You can not copy the email address, it will be copied backwards. Then you might as well show a image with the address because you already lost the ability to copy and paste.

true_religion 7y ago
You can intercept copy and paste using JavaScript.

wolfgang42 7y ago

As others have noted, this is a neat-looking solution but breaks a lot of things. In addition to copy/paste: * Middle-clicking to open my webmail in a new window * “Right-click > Copy link address” because my browser doesn't know about my email client * Possibly screen readers (I don’t know this one for certain) * Keyboard accessibility: I can tab onto the link, but Enter doesn’t activate it * Probably some other things I haven’t thought of Since you’re requiring JavaScript anyway, here's a better solution that doesn't decrease resistance to scrapers¹ and fixes the above problems by turning all of your .cryptedmail tags into proper links that work the way users expect them to.: document.querySelectorAll('.cryptedmail').forEach(a => { const email = `${a.dataset.name}@${a.dataset.domain}.${a.dataset.tld}` a.href = `mailto:${email}` a.innerText = email }) ¹If they’re running JS, they can also just tell Selenium to intercept navigation and then click every link on the page.

cyptus 7y ago
sure this breaks the copy and right-click implementation, but most of the users dont need it and will just do a normal click to get in touch. If this is the pain i need to go to receive zero spam mails from page-crawlers, i go for it. Advantage to img-solution is full use of css fonts and text aligns. Also any js-solution which would render the plain email into the DOM will receive spam, as crawlers do already execute js before parsing (also think of SPA).