How to create an alert window for links pointing to external resources

Throughout this little article, we shall cover how to create, with a pinch of jQuery, an alert window for links pointing to external resources. This may come in handy for letting users know that the link they clicked points to an external resource that might not be reliable.

Today you can find a lot of sites on the Internet where a large part of the content is posted by users and visitors to the page. One of the major risks that these types of sites pose is that malicious users can take advantage to trick readers with fake links.

In order to let users know that the link they clicked points to an external resource that might not be reliable, we are going to create an alert window with the help of jQuery.

JavaScript is needed to be enabled in the user’s browser for this to work. JavaScript is enabled by default in all browsers and is unlikely to be turned off by users.

OK, let's look carefully at the following HTML document:

<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- saved from url=(0014)about:internet -->
<meta charset="utf-8" />
<title>How to create an alert window for links pointing to external resources</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/alert_window.js"></script>
<!-- Patch to make semantic element work in IE8 and below -->
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<div class="container">
  <header class="header">
    <h1>This is the site name</h1>
  <!-- end .header --></header>
  <aside class="sidebar1">
    <nav>
      <ul class="nav">
        <li><a href="http://www.thisismydomain.com/home.html">Home</a></li>
        <li><a href="http://www.thisismydomain.com/categories.html">Categories</a></li>
        <li><a href="http://www.thisismydomain.com/about.html">About Us</a></li>
        <li><a href="http://www.thisismydomain.com/contact.html">Contact</a></li>
      </ul>
    </nav>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia vehicula venenatis. Donec dignissim consectetur odio, sed consectetur mi luctus et. Phasellus pharetra eu tellus sit amet pretium. Curabitur fermentum tortor a est tincidunt adipiscing.</p>
    <p>Curabitur adipiscing lacus eu nibh molestie fermentum. Phasellus et enim et lacus consectetur lobortis. Fusce sed feugiat neque. In hac habitasse platea dictumst. Suspendisse potenti. Maecenas nec vehicula purus, lacinia posuere sapien. Ut ac semper mi.</p>
  <!-- end .sidebar1 --></aside>
  <article id="post-10" class="post">
    <header>
      <h2>This is the post title</h2>
      <p><time>3 days ago</time></p>
    </header>
    <p>Curabitur adipiscing lacus eu nibh molestie fermentum. Phasellus et enim et lacus consectetur lobortis. Fusce sed feugiat neque. In hac habitasse platea dictumst.<a href="http://www.thisisnotmydomain.com"> Suspendisse potenti</a>. Maecenas nec vehicula purus, lacinia posuere sapien. Ut ac semper mi.</p>
    <p>Ut luctus ullamcorper ligula vel feugiat. Praesent ornare augue mi, tincidunt fermentum nunc condimentum pellentesque. Duis porta pellentesque dui at aliquet. Aliquam erat volutpat. Etiam ac vehicula orci. Donec accumsan, nunc sed viverra fringilla, lorem ligula tristique ante, quis dapibus magna velit feugiat ipsum. Ut sed elementum urna. Fusce quis tellus sit amet ante ultrices dapibus. Fusce viverra auctor aliquam. Mauris faucibus, justo non vulputate blandit, justo lorem cursus ante, eu placerat dui neque ut tellus. Pellentesque ante leo, venenatis id erat vel, tempor dictum lacus.</p>
    <p>...</p>
  <!-- end .post --></article>
  <section id="comments" class="comments">
    <h2>2 comments</h2>
    <article id="comment-1" class="comment">
      <p>Great article! If you want to go further on this subject, visit <a href="http://www.thisisnotmydomain.com">this page.</p>
    </article>
    <article id="comment-2" class="comment">
      <p>This is the comment number two.</p>
    </article>
  <!-- end .comments --></section>
  <footer class="footer">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia vehicula venenatis. Donec dignissim consectetur odio, sed consectetur mi luctus et.<p>
  <!-- end .footer --></footer>
<!-- end .container --></div>
</body>
</html>

As you can see, this HTML5 document (2 columns with a header, footer and sidebar). has several hyperlinks. While those in the sidebar are pointing to our own domain, the others are pointing outside of the site. Because we can not guarantee the reliability of external resources that are referenced by users and visitors to the site, it comes in handy to show a pop-up alert every time they click on these types of links.

// alert_window.js

// Once the DOM is ready.
$(document).ready(function() {

  // We store every single link pointing to external resources.
  var $external_resources = $('a:not([href*="thisismydomain.com"])');

  // Every time one of that type of links is clicked.
  $external_resources.click(function() {

    // We store the value of this href attribute.
    var external_resource = $(this).attr('href');

    // We create the custom message to be showed.
    var custom_message = 'Since the link you just clicked, ' + external_resource + ', is pointing to an external resource, we can not guarantee its reliability. Please, be careful.';

    // Lastly, we show the alert message.
    alert(custom_message);

  });

});

Let's explain a little more in depth how you can store only the links pointing to external resources.

var $external_resources = $('a:not([href*="thisismydomain.com"])');

This can be done by using a combination of advanced selectors and filters. You can use [attribute*="value"], an attribute selector, to match elements whose attribute contains a specific value anywhere in the attribute. So if you use a[href*="thisismydomain.com"], then you will select every link pointing to your website.

Now, if you use the jQuery filter :not, you will find the elements that don't match a particular selector type. This means that you would be selecting not every link pointing to your website, but every link pointing away from your website.

JavaScript

HTML