External Links

DSGVO konforme Lösung beim Absprung (Verlinken) auf fremde Domains in vanilla JS!

Beispiel:
HTML:
externalLinks.htm HTML (999 bytes) 13.02.2022 20:23
<!DOCTYPE html >
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>leave Domain Example</title>
    <link rel="stylesheet" type="text/css" href="externalLinks.css" />
  </head>
  <body>
    <ul>
      <li><a href="https://www.ssllabs.com/ssltest/" rel="nofollow noopener noreferrer" target="_blank">www.ssllabs.com</a></li>
      <li><a href="https://securityheaders.com/" rel="nofollow noopener noreferrer" target="_blank">securityheaders.com</a></li>
      <li><a href="https://pagespeed.web.dev/" rel="nofollow noopener noreferrer" target="_blank">Google PageSpeed Insights</a></li>
      <li><a href="https://ipv6-test.com/" rel="nofollow noopener noreferrer" target="_blank">IPv6 test</a></li>
      <li><a href="https://wave.webaim.org/" rel="nofollow noopener noreferrer" target="_blank">wave.webaim.org</a></li>
      <li><a href="https://validator.w3.org/" rel="nofollow noopener noreferrer" target="_blank">W3C - Markup Validation Service</a></li>
    </ul>
  </body>
</html>
JavaScript:
externalLinks.js JavaScript (2,42 kByte) 13.02.2022 22:04
// coding: utf-8
/*! Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
  function externalLink(event) {
    event.preventDefault();
    let href = this.href;
    let domain = /https?:\/\/([^\/]*)/i.exec(href)[1];
    var overlay = document.createElement('div');
    overlay.className = 'overlay';
    document.body.appendChild(overlay);

    let dialog = document.createElement('div');
    dialog.classList.add('dialog');
    dialog.classList.add('external-link');
    overlay.appendChild(dialog);

    let header = document.createElement('div');
    header.classList.add('header');
    let h = document.createElement('h3');
    h.appendChild(document.createTextNode('Inhalt auf exterener Seite'));
    header.appendChild(h);
    let close = document.createElement('button');
    close.classList.add('close');
    close.appendChild(document.createTextNode('×'));
    header.appendChild(close);
    dialog.appendChild(header);

    let content = document.createElement('div');
    content.classList.add('content');
    let p = document.createElement('p');
    p.appendChild(document.createTextNode('Sie werden weitergeleitet zu:'));
    p.appendChild(document.createElement('br'));
    p.appendChild(document.createTextNode(domain));
    content.appendChild(p);
    dialog.appendChild(content);

    let footer = document.createElement('div');
    footer.classList.add('footer');
    let no =  document.createElement('button');
    no.classList.add('no');
    no.appendChild(document.createTextNode('Abbrechen'));
    footer.appendChild(no);
    let yes = document.createElement('button');
    yes.classList.add('yes');
    yes.appendChild(document.createTextNode('Weiter'));
    footer.appendChild(yes);
    dialog.appendChild(footer);

    function closeDialog() {
      document.body.removeChild(overlay);
    }
    close.addEventListener('click', closeDialog);
    no.addEventListener('click', closeDialog);
    yes.addEventListener('click', function () { closeDialog(); window.open(href, '_blank').focus();});
  }

  let refs = document.querySelectorAll("a[href]");
  if (refs.length > 0) {
    let host = window.location.host;
    for (let i = 0; i < refs.length; i++) {
      let href = refs[i].getAttribute('href');
      let hit = /https?:\/\/([^\/]*)/i.exec(href);
      if (hit && hit[1]) {
        if (host != hit[1]) {
          // console.log(href, hit[1]);
          refs[i].addEventListener('click', externalLink);
        }
      }
    }
  }

})();
Stylesheet:
externalLinks.css StyleSheet (1,17 kByte) 22.02.2022 15:03
/* coding: utf-8 */
/*! Created by: Udo Schmal | https://www.gocher.me/ */
.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(0,0,0,.8);
}

.dialog.external-link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 480px;
  max-width: 90%;
  background-color: #fff;
  border-radius: 10px;
}

.dialog.external-link .header {
  border-bottom: 1px solid #e9ecef;
  padding: 0px 20px;
}
.dialog.external-link h3 {
  display: inline-block;
}
.dialog.external-link button.close {
  float: right;
  font-size: xx-large;
  border: none;
  background: none;
  cursor: pointer;
  color: #6c757d;
}

.dialog.external-link .content {
  padding: 20px;
}
.dialog.external-link .footer {
  border-top: 1px solid #e9ecef;
  padding: 5px 20px;
  text-align: right;
}
.dialog.external-link .footer button {
  border-radius: 5px;
  border: 1px solid transparent;
  padding: 10px 20px;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  margin-right: 10px;
}
.dialog.external-link .footer button.no {
  background-color: #6c757d;
}
.dialog.external-link .footer button.yes {
  background-color: #832025;
}

Author: , published: , last modified:

Kontakt

Udo Schmal

Udo Schmal
Softwareentwickler
Olvengraben 41
47608 Geldern
Nordrhein-Westfalen
Germany




+49 4621 9785538
+49 1575 0663676
+49 4621 9785539
SMS
WhatsApp

Google Maps Profile
Instagram Profile
vCard 3.0

Service Infos

CMS Info

Product Name:
UDOs Webserver
Version:
0.5.0.167
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Sat, 25. Jun 2022 14:46:24

Development Info

Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64

System Info

OS:
Ubuntu 20.04.5 LTS (Focal Fossa)

Hardware Info

Model:
Hewlett-Packard HP Pavilion dm4 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2430M CPU @ 2.40GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s), 900.000 MHz