External Links 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: 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: Udo Schmal, published: 12.02.2022, last modified: 06.09.2023