DEV Community

jmau111
jmau111

Posted on • Originally published at blog.julien-maury.dev

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.

Disclaimer

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

External links cannot be 100% safe

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:

  • the pages could disappear resulting in 404 errors for readers
  • the page could be redirected
  • the website could be compromised by hackers

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

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.

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

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();
    }
  })
})
Enter fullscreen mode Exit fullscreen mode

Pros and cons

To me, the technique is not perfect at all:

  • some users might freak out
  • it does not prevent them from opening links in other tabs
  • it can harm their experience if you have plenty of external links in the same post

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:

  • it informs users and encourages them to stay vigilant
  • you can use it for additional legal aspects
  • it can prevent users from clicking right away and leaving your website (e.g, a link at the very top of the post)
  • it's easy to implement, as you can apply some patterns, specific classes or attributes to external links and listening click events with JavaScript

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.

Discussion (0)