DSGVO konforme Lösung beim Absprung (Verlinken) auf fremde Domains in vanilla JS!
Beispiel:
- www.ssllabs.com
- securityheaders.com
- Google PageSpeed Insights
- IPv6 test
- wave.webaim.org
- W3C - Markup Validation Service
HTML:
<!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:
// 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:
/* 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;
}
