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.

 fügt ein <a href="mailto:...">...</a> hinter dem Script ein,
*/
(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 );
}())

Page Tools