How to do email obfuscation in website?

[nurfatimaj]

Description

Hi!

I am using Quarto to build my website. I see there is an option to tell quarto to use various ways of obfuscating email address in html documents. But for some reason it's not working. Since I couldn't find any example in quarto guides, I am not sure if maybe I am doing it wrong.

Here is an example yaml of a page

---
title: My website
about: 
  template: trestles
  links:
    - text: Email
      href: mailto:example@mail.com
email-obfuscation: javascript
---

the source code of the rendered page still shows

<a href="mailto:example@mail.com" class="about-link" rel="" target="">
     <span class="about-link-text">Email</span>
  </a>

How do I make the obfuscation work?

Thank you!

[cscheid]

I believe email-obfuscation needs to be a project format option, not a document option.

[nurfatimaj]

Thanks for a reply!

I tried adding to _quarto.yml document and almost nothing happened.

To be precise, this is how index.qmd looks like

---
title: My website
about:
  template: trestles
  links:
    - text: Email
      href: mailto:example@mail.com
---
Here is an email [example@mail.com](mailto:example@mail.com)

and this is the _quarto.yml file

project:
  type: website

website:
  title: "check"
  navbar:
    left:
      - href: index.qmd
        text: Home

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true
    email-obfuscation: javascript

editor: visual

The email in the about links still looks the same

<div class="about-links">
  <a href="mailto:example@mail.com" class="about-link" rel="" target="">
     <span class="about-link-text">Email</span>
  </a>
</div>

The email in the page content now looks like this

<p>Here is an email <script type="text/javascript">
<!--
h='&#x6d;&#x61;&#x69;&#108;&#46;&#x63;&#x6f;&#x6d;';a='&#64;';n='&#x65;&#120;&#x61;&#x6d;&#112;&#108;&#x65;';e=n+a+h;
document.write('<a h'+'ref'+'="ma'+'ilto'+':'+e+'" clas'+'s="em' + 'ail">'+e+'<\/'+'a'+'>');
// -->
</script><a href="mailto:example@mail.com" class="email">example@mail.com</a><noscript>example at mail dot com</noscript></p>

So, I now have two questions

1. It seems like the obfuscation does not touch about links. Is this true?
2. I see there is this gibberish part for the email in the page content. But it is enclosed in html comment tags. On top of it, I still see regular <a href="mailto:example@mail.com" class="email">example@mail.com</a> in between script and nosciprt tags. Is this an expected behaviour? Doesn't it mean that algorithms would still be able to grab the email from the usual a tag even though there is the seemingly obfuscated part? Am I missing something?

Thank you!

[mcanouil]

It is a format option (https://quarto.org/docs/reference/formats/html.html#format-options), thus should be under the format.

format:
  html:
    email-obfuscation: XXXX

[cscheid]

Thank you for the correction - I mistyped.

This is a prime candidate for a lint target: we should emit a warning if we see the email-obfuscation key in "suspicious places", like the top level of a document, or project.

[nurfatimaj]

Sorry, I am confused now. If I am not supposed to put it at the top of the index.qmd file or inside _quarto.yml file, where should I provide the above format option?

[mcanouil]

The snippet I showed is a whole piece.
It has to be this.

Now, this snippet can be in _quarto.yml or in the front matter of a Quarto document, but definitely not like in your example which is incorrect:

---
title: My website
about: 
  template: trestles
  links:
    - text: Email
      href: mailto:example@mail.com
email-obfuscation: javascript
---

[nurfatimaj]

ok, thanks! 👍🏽

[clickityKlein]

Hi,

To not start a new post, I'm having some trouble with this myself. I am using the pre-release version 1.4.525, so maybe that might be the issue. However, I have my email in two places:

1. In the page footer:

website:

  title: "John Doe"

  page-footer:

    center: |

      <span class="container"><strong>[Contact John Doe](mailto:john.doe@email.com){target="_blank"}</strong></span>

2. On a separate page using the about format:

---
title: "John Doe"
about:
  template: solana
  image-width: 15cm
  image-shape: round
  links: 
  - icon: envelope
    href: mailto:john.doe@email.com
---

On the "_quarto.yml" file, these are my format settings:

format:
  html:
    email-obfuscation: javascript
    grid: 
      body-width: 2000px
      sidebar-width: 200px
      margin-width: 200px
    theme: flatly
    css: styles.css
    citations-hover: true
    code-link: true
    code-fold: show
    code-tools: false
    code-block-border-left: "#2C3E50"
    toc: true

However, the page script doesn't obfuscate, and while hovering above the links, the email still shows. Any ideas?

Thank you!

[nurfatimaj]

Hi!
So, at least in my case, Quarto was working perfectly well but I was looking in a wrong place. I kept checking the email using the "Inspect element" tool of my browser. Therefore, every time I could see the actual email and got frustrated. When I finally checked the source html file by opening it in text editor, I saw that email was in fact obfuscated.

[clickityKlein]

Very interesting! I was using the "Inspect element" tool as well. After viewing the source html file in a text editor, the email in page-footer was obfuscated properly. However, the link on the page with the "about" style was not.

[cderv]

However, the link on the page with the "about" style was not.

@clickityKlein can you open an issue about this specifically ? Please provide a reproducible example as a github repo. This way it will be easier for us to reproduce and fix. It is possible that the pipeline is not applying correctly for some reason - email-obfuscation is a Pandoc feature and we'll make this sure it applies everywhere. Thanks !

[markobracic]

Hi!
I seem to have the same problem as @clickityKlein where email obfuscation works for page content but not for the links in _quarto.yml or index.qmd. I did not find that an issue was open @cderv. Is there a solution?

Here is the relavent part of my "_quarto.yml":

website:
right:
      - icon: envelope
        aria-label: email
        href: "mailto:XXX@gmail.com"
format:
    email-obfuscation: javascript

And my home "index.qmd":

about:
  template: jolla
   links:
    - icon: envelope
      text: Email
      href: "mailto:XXX@gmail.com" 

[cderv]

If you did not found the issue, you can open a new one. email-obfuscation is a Pandoc feature, and probably applies only to URL that goes through Pandoc. For website, what we call the website envelope (navbar, sidebar, etc...) is not handled by Pandoc directly and so it requires some adjustment for it to work.

An issue would be welcome to track this. Thanks.