External Links

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

§19 TTDSG Technische und organisatorische Vorkehrungen,
(3) Die Weitervermittlung zu einem anderen Anbieter von Telemedien ist dem Nutzer anzuzeigen.

Beispiel:
HTML:
externalLinks.htm HTML (1,02 kByte) 13.02.2022 19:54
<!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>
    <script src="externalLinks.js"></script>
  </body>
</html>
JavaScript:
externalLinks.js JavaScript (3,28 kByte) 01.03.2022 09:29
// coding: utf-8
/*! Created by: Udo Schmal | https://www.gocher.me/ */
(function () {

// polyfill Array.prototype.includes for old Internet Explorer 11
if (!Array.prototype.includes) {
  Object.defineProperty(Array.prototype, 'includes', {
    value: function(searchElement, fromIndex) {
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }
      var o = Object(this);
      var len = o.length >>> 0;
      if (len === 0) {
        return false;
      }
      var n = fromIndex | 0;
      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
      function sameValueZero(x, y) {
        return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
      }
      while (k < len) {
        if (sameValueZero(o[k], searchElement)) {
          return true;
        }
        k++;
      }
      return false;
    }
  });
}

  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?:\/\/(www\.)?([^\/]*)/i.exec(href);
      if (hit && hit[2]) {
        if ((host != hit[1]+hit[2]) || (local_domains && !local_domains.includes(hit[2]))) {
          // 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 2831 9776557
+49 1575 0663676
+49 2831 1328709
SMS
WhatsApp

Google Maps Profile
Instagram Profile
vCard 3.0

Service Infos

CMS Info

Product Name:
UDOs Webserver
Version:
0.5.0.162
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Thu, 14. Apr 2022 20:04:40

Development Info

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

System Info

OS:
Ubuntu 20.04.4 LTS (Focal Fossa)

Hardware Info

Model:
Hewlett-Packard HP Pavilion dv7 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2450M CPU @ 2.50GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s), 2200.000 MHz