Tiny External Link Shield — auto-mark & harden outbound links

November 28, 2025 NEW

Tags: javascript seo security external links ui snippet

What this snippet does

This tiny “External Link Shield” walks your page, finds links that go off-site, adds a small ↗ icon, and automatically hardens them with rel="noopener noreferrer". You can also whitelist your own network domains so they’re treated as internal links.

<style>
  /* External link visual hint */
  a.vibe-external {
    position: relative;
    padding-right: 0.3em;
  }

  a.vibe-external::after {
    content: "↗";
    font-size: 0.8em;
    margin-left: 0.15em;
    opacity: 0.8;
  }

  /* Optional: tweak hover state */
  a.vibe-external:hover::after {
    opacity: 1;
  }
</style>

<script>
// Tiny "External Link Shield" — no dependencies
(function () {
  // Your primary domain (no protocol)
  var mainHost = window.location.hostname.replace(/^www\./i, "");

  // Optional: treat these as "internal network" domains
  var whitelistHosts = [
    // "example.com",
    // "another-site.net"
  ];

  function isWhitelisted(host) {
    host = host.replace(/^www\./i, "");
    if (host === mainHost) return true;
    for (var i = 0; i < whitelistHosts.length; i++) {
      if (host === whitelistHosts[i]) return true;
    }
    return false;
  }

  function isSpecialScheme(href) {
    return /^mailto:|^tel:|^javascript:/i.test(href);
  }

  function shieldExternalLinks() {
    var links = document.querySelectorAll("a[href]");
    if (!links.length) return;

    for (var i = 0; i < links.length; i++) {
      var a = links[i];
      var href = a.getAttribute("href");

      if (!href || href.charAt(0) === "#") continue;
      if (isSpecialScheme(href)) continue;

      var url;
      try {
        url = new URL(href, window.location.href);
      } catch (e) {
        continue; // skip invalid URLs
      }

      // Same host or whitelisted? Leave it alone
      if (isWhitelisted(url.hostname)) {
        continue;
      }

      // Mark as external
      a.classList.add("vibe-external");

      // Harden rel="noopener noreferrer" (and optionally "nofollow")
      var relParts = (a.getAttribute("rel") || "")
        .split(/\s+/)
        .filter(Boolean);

      if (relParts.indexOf("noopener") === -1) {
        relParts.push("noopener");
      }
      if (relParts.indexOf("noreferrer") === -1) {
        relParts.push("noreferrer");
      }

      // Optional: also add nofollow
      // if (relParts.indexOf("nofollow") === -1) {
      //   relParts.push("nofollow");
      // }

      a.setAttribute("rel", relParts.join(" "));

      // Optional: force external links into a new tab
      // if (!a.target) {
      //   a.target = "_blank";
      // }
    }
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", shieldExternalLinks);
  } else {
    shieldExternalLinks();
  }
})();
</script>

Usage: drop the <style> block into your main CSS or inside <head>, and put the <script> block near the end of your pages before </body>. Update whitelistHosts with any domains you want to treat as “internal” (your own network, partners, etc.), and optionally uncomment the nofollow / target="_blank" bits if that fits your SEO and UX style.

← Back to all scripts