How to warn users about external links

It’s not uncommon to share external links in blog posts, especially for technical purposes or cybersecurity-related topics.

It’s totally fair and even recommended to credit helpful resources that even inspire you when you’re writing. However, it can be a problem too in specific conditions.

Permalink to heading Disclaimer Disclaimer

I don’t highlight best practices here. These are just some thoughts about additional security for hyperlinks. Please read the pros and cons.

By definition, unless you own the external websites, you cannot control what happens to the specific pages you mention in your posts.

Bad situations can happen, for example, after some time:

While some scenarios do not put your readers at risk (e.g., 404 errors), others look pretty dangerous.

Permalink to heading I only use trusted sources I only use trusted sources

Congrats! That’s a good practice, but any website can be attacked, regardless of the security hygiene or the good will.

Actually, it could be interesting for hackers to attack trusted authors, as there’s a chance the victim would be less vigilant.

Permalink to heading What can we do? What can we do?

How could you secure external websites? You cannot even guarantee 100% protection for your own website/blog.

One way is to use libraries and services to monitor your app and set alerts, for example, during the build, or with some CRON jobs for dynamic websites, to track broken links and redirections.

A simpler approach (not incompatible with active monitoring, though) can consist of warning users when they click on external links with prompts like:

You are now leaving our blog. We provide such links for your convenience but we don’t take any responsibility for the content or the safety of these resources. Are you sure you want to go? y/n

Permalink to heading Quick and dirty example Quick and dirty example

Assuming external links have the HTML class .external:

const externals = document.querySelectorAll(".external")
externals && externals.forEach(function(link){
  link.addEventListener("click", function(e) {
    let answer = confirm("YOUR MESSAGE");
    if (answer !== true) {
      e.preventDefault();
    }
  })
})

Permalink to heading Pros and cons Pros and cons

To me, the technique is not perfect at all:

Although, for the last point, you may implement something to store the users’ choice like a local storage, as a way to opt out.

Still, it can have some advantages:

Permalink to heading Wrap up Wrap up

Time to quote the website that inspired me this post: CISA. Official!

Governments and administrations have probably additional constraints and legal duties that can explain such practices, but I wonder if it could be a good idea for blogs too. Anything that prevents users from clicking on external links blindly seems fine.