Spam-Schutz für E-Mail Adressen mit Javascript

Dieser Javascript Code wird ausgeführt nach dem die Seite geladen wurde. Wartet 1,5 Sekunden und wandelt dann jeden HTML-Link in einen E-Mail-Adressen Link um. So fern dieser Link das Attribute data-mail-b64 hat und eine Base65 enkodierte E-Mail-Adresse enthält. Ziel ist es, dass Spam-Bots, die nach E-Mail Adressen suchen, weder Javascript ausführen, noch 1,5 Sekunden auf einer Seite warten.

Der HTML Code fürs Frontend

<a href="" data-mail-b64="aW5mb0A0c29mdC5kZQ==">Spam Protection</a>

Der Javascript code der alle HTML Blöcke manipuliert

(function(){
	/* Timeout, bis Mail Links gerendert werden */
	const timeout = 1500; /* in ms */
	const mail_b64_attr_name = 'data-mail-b64'; /* Attribut, das jeder E-Mail Link haben muss */
 
	on_ready( wait_to_build_mail_links );
 
	/* Timer ausführen, wenn Seite geladen ist */
	function wait_to_build_mail_links(){
		window.setTimeout( build_mail_links, timeout );
	}
 
 
	/* Ändern der Links zu Mail-Links */
	function build_mail_links(){
		const mail_node_selector = 'a['+mail_b64_attr_name+']';
		const mail_anchor_nodes  = document.querySelectorAll(mail_node_selector);
 
		mail_anchor_nodes.forEach( ( a_node ) => {
			const mail_adress_encoded = a_node.getAttribute( mail_b64_attr_name );
			const mail_adress_decoded = atob( mail_adress_encoded );
			const mail_href           = 'mailto:'+mail_adress_decoded;
			a_node.setAttribute( 'href', mail_href );
			a_node.textContent = mail_adress_decoded;
		})
	}
 
 
	function on_ready( callback ) {
		// Falls die Seite bereits geladen ist
		if ( document.readyState!='loading' ) callback();
		// Falls die Seite noch lädt
		else document.addEventListener( 'DOMContentLoaded', callback );
	}
}())

Alternative Version

Mit diesem Code-Schnipsel wird kein <a>-Tag benötigt. es wird hinter dem Script einfach neu eingefügt. Der Code ist ein bisschen kürzer, dafür nicht ganz so breit anwendbar, da immer ein komplettes Script platziert werden müsste.

<script type="text/javascript">
/*
 Fügt ein <a href="mailto:...">...</a> hinter diesem Script direkt ein, nach der Ausführung.
*/
(function(){
	const node_this_script = document.currentScript;
	const new_mail_node    = document.createElement('a');
	const mail_as_b64      = 'aW5mb0A0c29mdC5kZQ=='; // encoded E-Mail Adressen mit btoa('email adresse')
	const mail_href        = 'mailto:' + atob(mail_as_b64);
	const mail_label       = atob(mail_as_b64);
 
	new_mail_node.textContent  = mail_label;
	new_mail_node.setAttribute( 'href', mail_href );
	node_this_script.after( new_mail_node );
}())
</script>

Page Tools