E-Mail-Adresse mit Plug-in schützen

Function Reference/antispambot

• Achtung, bei dieser Variante des Anti-Spambot-Plugins ist die E-Mail-Adresse dennoch auslesbar. Weitere Informationen unterhalb.

Dennoch kann ich bestätigen, dass das Plugin seit geraumer Zeit zuverlässig seinen Dienst verrichtet(e) und uns erfolgreich vor Spam geschützt hat. Ich zögere jedoch, anstelle von 'verrichtet' 'verrichtete' zu verwenden, da sich die Verschlüsselung von Base64 zunächst bewähren muss.

Das Plug-in Anti-Spambot bedient sich der Verschleierung von E-Mails über die Shortcode-Syntax mithilfe der integrierten WordPress Codex-Funktionalität.

Anti-Spambot

Um Spambots zu blockieren, werden ausgewählte E-Mail-Adressen in HTML-Entitäten konvertiert. Dabei werden nicht alle Zeichen der E-Mail-Adresse konvertiert. Die Auswahl ist zufällig und ändert sich somit bei jedem Aufruf der Funktion.

Verwende den Shortcode mit der E-Mail-Adresse in deinem Beitrag oder auf deiner Seite:

[email]deine@email.de[/email]

Varianten:

Erstellt einen Mailto: -Link mit vorab ausgefülltem Betreff und Text:

• [email]deine@email.de?subject=Je nach Betreff&body=Hallo,[/email]

deine@email.de

Folgendes zeigt die E-Mail nur an, ohne dass ein Link sie umschließt:

• [email nolink=1]deine@email.de[/email]

deine@email.de

Zeigt den Text "E-Mail" mit einem Link zur E-Mail-Adresse an:

• [email linktext = "E-Mail"]deine@email.de[/email]

E-Mail

Das mag alles recht gut und schön sein, jedoch ist die Adresse in dieser Variante immer noch nachvollziehbar, wie auf https://migano.de/webanalyse.php ersichtlich ist. Dieser Test simuliert die Vorgehensweise von Spam-Bots beim Auslesen von E-Mail-Adressen.

Aus diesem Grund haben wir eine Lösung entwickelt, die sowohl PHP als auch JavaScript verwendet.

E-Mail-Adresse mit 'Base64' verschlüsseln

Der folgende Code verwendet Base64, um die E-Mail-Adresse zu verschlüsseln. Obwohl dies keine besonders ausgefeilte Verschlüsselung ist, bietet sie dennoch einen gewissen Schutz vor Spam-Bots.

Es ist zu beachten, dass die E-Mail-Adresse nur einmal pro Seite funktioniert. Die Verschlüsselung der E-Mail-Adresse ist insbesondere auf den Seiten Impressum und Datenschutz von Bedeutung. Daher wird hier die Möglichkeit geboten, IDs festzulegen, damit das Skript nicht unnötig geladen wird.

/* --- E-Mail base64 verschlüsselt --- */

function encrypt_email($email) {
    // Verschlüssle die E-Mail-Adresse
    $encrypted_email = base64_encode($email);
    return $encrypted_email;
}

function add_custom_email_to_page() {
    // Definiere ein Array von Seiten- und Beitrag-IDs
    $page_post_ids = array(123, 456, 789); // Beispiel-IDs, ersetze diese mit den tatsächlichen IDs

    // Hole die aktuelle Seite oder den aktuellen Beitrag
    $current_id = get_queried_object_id();

    // Überprüfe, ob die aktuelle Seite oder der aktuelle Beitrag in der Liste der erlaubten IDs enthalten ist
    if (in_array($current_id, $page_post_ids)) {
        // Individuelle E-Mail-Adresse direkt im Code festlegen
        $custom_email = 'deine@email.de';

        // Verschlüssele die E-Mail-Adresse
        $encrypted_email = encrypt_email($custom_email);

        // Erstelle das Skript, um die E-Mail-Adresse zu entschlüsseln und im Frontend anzuzeigen
        ob_start(); // Starte den Puffer
        ?>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                // Funktion zum Entschlüsseln der E-Mail-Adresse
                function decryptEmail(encodedString) {
                    return decodeURIComponent(atob(encodedString));
                }

                // Entschlüssele die E-Mail-Adresse
                var email = decryptEmail("<?php echo esc_js($encrypted_email); ?>");

                // Füge die E-Mail-Adresse im Frontend ein
                var emailLink = document.createElement("a");
                emailLink.href = "mailto:" + email;
                emailLink.textContent = email;
                document.querySelector(".email-container").appendChild(emailLink);
            });
        </script>
        <?php
        $script = ob_get_clean(); // Hole den Inhalt des Puffers und beende den Puffer

        echo $script; // Gib das Skript aus
    }
}

add_action('wp_footer', 'add_custom_email_to_page');

/* Ende E-Mail base64 verschlüsselt */

• Bei $page_post_ids = array(123, 456, 789); die Beitrags- oder Seiten ID eingeben, wo das Script geladen werden sollte.
• Bei $custom_email = 'deine@email.at';, deine E-Mail-Adresse eingeben.

Im HTML:

<div class="email-container"></div>
<noscript>Bitte aktivieren Sie Javascript, um diese Adresse sehen zu können</noscript>

Hier ist die E-Mail-Adresse:

Zur Überprüfung bitte ich dich, mit Rechtsklick und "Seitenquelltext anzeigen" im Quelltext unter email-container zu sehen und auch im Test zu "Webseiten Analyse" ist das okay. Natürlich ist die Adresse im Entwicklertool oder Browser-Konsole unter Elemente sichtbar.

Wer lieber statt der E-Mail-Adresse einen beliebigen Text visualisieren möchte, dann ist folgender Code zu verwenden:

/* --- E-Mail base64 verschlüsselt; als Text --- */

function encrypt_email($email) {
    // Verschlüssle die E-Mail-Adresse
    $encrypted_email = base64_encode($email);
    return $encrypted_email;
}

function add_custom_email_to_page() {
    // Definiere ein Array von Seiten- und Beitrag-IDs
    $page_post_ids = array(123, 456, 789); // Beispiel-IDs, ersetze diese mit den tatsächlichen IDs

    // Hole die aktuelle Seite oder den aktuellen Beitrag
    $current_id = get_queried_object_id();

    // Überprüfe, ob die aktuelle Seite oder der aktuelle Beitrag in der Liste der erlaubten IDs enthalten ist
    if (in_array($current_id, $page_post_ids)) {
        // Individuelle E-Mail-Adresse direkt im Code festlegen
        $custom_email = 'deine@email.at';

        // Verschlüssele die E-Mail-Adresse
        $encrypted_email = encrypt_email($custom_email);

        // Erstelle das Skript, um die E-Mail-Adresse zu entschlüsseln und im Frontend anzuzeigen
        ob_start(); // Starte den Puffer
        ?>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                // Funktion zum Entschlüsseln der E-Mail-Adresse
                function decryptEmail(encodedString) {
                    return decodeURIComponent(atob(encodedString));
                }

                // Entschlüssele die E-Mail-Adresse
                var email = decryptEmail("<?php echo esc_js($encrypted_email); ?>");

                // Füge die E-Mail-Adresse im Frontend ein
                var emailLink = document.createElement("a");
                emailLink.href = "mailto:" + email;
                emailLink.textContent = "E-Mail scheiben"; // Text anpassen
                document.querySelector(".email-container").appendChild(emailLink);
            });
        </script>
        <?php
        $script = ob_get_clean(); // Hole den Inhalt des Puffers und beende den Puffer

        echo $script; // Gib das Skript aus
    }
}

add_action('wp_footer', 'add_custom_email_to_page');


/* Ende E-Mail base64 verschlüsselt; als Text */

• Bei $page_post_ids = array(123, 456, 789); die Beitrags- oder Seiten ID eingeben, wo das Script geladen werden sollte.
• Bei $custom_email = 'deine@email.at';, deine E-Mail-Adresse eingeben.
• Bei emailLink.textContent = "E-Mail scheiben"; // Text anpassen ist beliebiger Text einzugeben.

Im HTML ist dasselbe:

<div class="email-container"></div>
<noscript>Bitte aktivieren Sie Javascript, um diese Adresse sehen zu können</noscript>

Und wenn man nun diese beiden Variationen in einem haben möchte? 🙂

/* --- E-Mail base64 verschlüsselt; als E-Mail-Adresse oder mit Text --- */

function encrypt_email($email) {
    // Verschlüssle die E-Mail-Adresse
    $encrypted_email = base64_encode($email);
    return $encrypted_email;
}

function add_custom_email_to_page($show_email = true, $custom_text = "E-Mail schreiben") {
    // Definiere ein Array von Seiten- und Beitrag-IDs
    $page_post_ids = array(123, 456, 789); // Beispiel-IDs, ersetze diese mit den tatsächlichen IDs

    // Hole die aktuelle Seite oder den aktuellen Beitrag
    $current_id = get_queried_object_id();

    // Überprüfe, ob die aktuelle Seite oder der aktuelle Beitrag in der Liste der erlaubten IDs enthalten ist
    if (in_array($current_id, $page_post_ids)) {
        // Individuelle E-Mail-Adresse direkt im Code festlegen
        $custom_email = 'deine@email.ch';

        // Verschlüssele die E-Mail-Adresse
        $encrypted_email = encrypt_email($custom_email);

        // Erstelle das Skript, um die E-Mail-Adresse zu entschlüsseln und im Frontend anzuzeigen
        ob_start(); // Starte den Puffer
        ?>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                // Funktion zum Entschlüsseln der E-Mail-Adresse
                function decryptEmail(encodedString) {
                    return decodeURIComponent(atob(encodedString));
                }

                // Entschlüssele die E-Mail-Adresse
                var email = decryptEmail("<?php echo esc_js($encrypted_email); ?>");

                // Füge die E-Mail-Adresse oder den benutzerdefinierten Text im Frontend ein
                var emailElement = document.createElement("a");
                if (<?php echo ($show_email ? 'true' : 'false'); ?>) {
                    emailElement.href = "mailto:" + email;
                    emailElement.textContent = email;
                } else {
                    emailElement.href = "mailto:" + email;
                    emailElement.textContent = "<?php echo esc_js($custom_text); ?>";
                }
                document.querySelector(".email-container").appendChild(emailElement);
            });
        </script>
        <?php
        $script = ob_get_clean(); // Hole den Inhalt des Puffers und beende den Puffer

        echo $script; // Gib das Skript aus
    }
}

// Verwende die Funktion, um die E-Mail-Adresse anzuzeigen
// Füge 'false' als erstes Argument hinzu, um den benutzerdefinierten Text anzuzeigen, z.B.:
// add_custom_email_to_page(false, "E-Mail schreiben");
add_action('wp_footer', 'add_custom_email_to_page');


/* Ende E-Mail base64 verschlüsselt; als E-Mail-Adresse oder mit Text */

• Bei $page_post_ids = array(123, 456, 789); die Beitrags- oder Seiten ID eingeben, wo das Script geladen werden sollte.
• Bei $custom_email = 'deine@email.at';, deine E-Mail-Adresse eingeben.
• Bei emailLink.textContent = "E-Mail scheiben"; // Text anpassen ist beliebiger Text einzugeben.

Mit diesem aktualisierten Code kannst du entscheiden, ob du die E-Mail-Adresse selbst anzeigen möchtest oder einen benutzerdefinierten Text anzeigen möchtest, der dann angeklickt werden kann, um das E-Mail-Programm zu öffnen. Wenn du die E-Mail-Adresse anzeigen möchtest, übergebe einfach true als zweites Argument. Wenn du einen benutzerdefinierten Text anzeigen möchtest, übergebe false und den gewünschten Text als zweites Argument anzuzeigen.

• Mit if (<?php echo ($show_email ? 'true' : 'true'); wird dem Besucher die E-Mail-Adresse angezeigt.
• Mit if (<?php echo ($show_email ? 'true' : 'false'); wird dem Besucher der Text angezeigt.

Das erste Argument bleibt konstant, da es für beide Versionen des Codes in einem Dokument erforderlich ist. Es dient als Unterscheidungsmerkmal zwischen den beiden Varianten.

Im HTML ist dasselbe:

<div class="email-container"></div>
<noscript>Bitte aktivieren Sie Javascript, um diese Adresse sehen zu können</noscript>

Hier den obigen Codes erfolgt die Verschlüsselung mittels Base64 uns somit möchten wir auch hervorheben:

Unterschiede zwischen ROT13-Verschlüsselung und Base64-Verschlüsselung

Die ROT13- und die Base64-Verschlüsselung sind zwei gängige Methoden, um sensible Informationen wie E-Mail-Adressen zu schützen.

ROT13-Verschlüsselung:

Die ROT13-Verschlüsselung ist eine einfache Verschiebungschiffre, bei der jeder Buchstabe im Alphabet um 13 Positionen verschoben wird. Diese Methode ist leicht zu implementieren und zu verstehen, da sie nur eine einfache Transformation verwendet.

Base64-Verschlüsselung:

Im Gegensatz dazu verwendet die Base64-Verschlüsselung eine komplexere Kodierungsmethode, die die E-Mail-Adresse in eine Reihe von ASCII-Zeichen umwandelt. Diese Methode bietet eine höhere Sicherheit, da sie schwerer zu entschlüsseln ist als ROT13.

Außerdem kann die verschlüsselte Adresse im HTML-Quellcode möglicherweise nicht korrekt gerendert werden, was zu Problemen mit der Schriftgröße führen kann und diese sollte dann per CSS angepasst werden.

/* --- E-Mail Schriftgröße --- */

.email-container {
	font-size: 24px;
}

/* Ende E-Mail Schriftgröße */

Das folgende begleitete mich den Anfängen von WordPress:

• Schützen Sie die E-Mail-Adresse Ihrer Website vor Spam

Daraus war zu testen:

• Methode 2: Ersetzung der E-Mail-Adresse: "HTML-E-Mail-Verweis per Redirect" ist hier ein Fehler 500.
• Methode 3:
  • Maskierung der E-Mail-Adresse, wandelt sich der Hex-Code mit Umschalten auf "Visuell" in die normale Adresse um.
  • Maskierung durch Ergänzung kann nicht mit einem HTML-E-Mail-Verweis verlinkt werden, siehe bspw.: user@domain.de.
• Methode 4: Verschlüsselung der E-Mail-Adresse:

Der letzteren Methode 4: Verschlüsselung der E-Mail-Adresse hat mich angesprochen und wollte aufgearbeitet werden, auch wenn die vorhergehende Methode mit base64 die Empfehlenswerte ist.

Das, was hinter Fleißarbeiten steckt, ist der Wert!

E-Mail-Adresse mit ROT13 verschlüsseln

Die ROT13-Verschlüsselung ist eine einfache Verschiebungschiffre, bei der jeder Buchstabe im Alphabet um 13 Positionen verschoben wird. Diese Methode ist leicht zu implementieren und zu verstehen, da sie nur eine einfache Transformation verwendet.

Hier das JavaScript der Website:

/* --- Verschlüsselung ROT13 der E-Mail-Adresse --- */

function decode(a) {
  return a.replace(/[a-zA-Z]/g, function(c){
    return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
  })
}; 
function openMailer(element) {
var y = decode("znvygb:orahgmre@qbznva.qr");
element.setAttribute("href", y);
element.setAttribute("onclick", "");
element.firstChild.nodeValue = "E-Mail-Software öffnet sich";
};

/* Ende Verschlüsselung ROT13 der E-Mail-Adresse */

Weiter, haben wir den Code optimiert. Anstatt die Funktionen direkt im JavaScript-Code zu definieren, verwenden wir jetzt die document.addEventListener("DOMContentLoaded", ...)-Methode. Diese Methode stellt sicher, dass der Code nur ausgeführt wird, wenn das DOM (Document Object Model) vollständig geladen ist.

Durch diese Änderung wird sichergestellt, dass nur aufgerufen werden, wenn alle HTML-Elemente, einschließlich des E-Mail-Links, vollständig geladen und gerendert wurden. Dadurch wird vermieden, dass die Funktion auf nicht vorhandene Elemente angewendet wird, was möglicherweise zu Fehlern führen könnte.

/* --- Verschlüsselung ROT13 der E-Mail-Adresse mit DOMContentLoaded ---*/

document.addEventListener("DOMContentLoaded", function() {
    // Hier kommt der JavaScript-Code, der ausgeführt werden soll, wenn das DOM vollständig geladen ist
    function decode(a) {
        return a.replace(/[a-zA-Z]/g, function(c){
            return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
        });
    }
    
    function openMailer(element) {
        var y = decode("znvygb:orahgmre@qbznva.qr");
        element.setAttribute("href", y);
        element.setAttribute("onclick", "");
        element.firstChild.nodeValue = "E-Mail-Software öffnet sich";
    }

    // Hier wird überprüft, ob das Element mit der ID "email" vorhanden ist und falls ja, wird die openMailer-Funktion aufgerufen
    var emailElement = document.getElementById("email");
    if (emailElement) {
        openMailer(emailElement);
    }
});

/* Ende Verschlüsselung ROT13 der E-Mail-Adresse mit DOMContentLoaded */

Um bei var y = decode("znvygb:orahgmre@qbznva.qr"); deine E-Mail-Adresse einzugeben, muss diese erst mal umgewandelt werden.

• Hierzu empfehlen wir https://rot13.com/. Der generierte Code ist dann statt 'orahgmre@qbznva.qr' mit deinem Code zu ersetzen.

Der JavaScript-Code wird nur ausgeführt, wenn im HTML ein Aufruf der Funktion openMailer() vorhanden ist. Wenn die Funktion openMailer() nicht im HTML aufgerufen wird, wird der Code nicht ausgeführt.

Im HTML:

<a id="email" href=" " onclick='openMailer(this);'>E-Mail: bitte klicken</a>

Funktioniert ist aber hier nicht implementiert.

In Bezug auf die Performance kann das Einbetten des Codes über PHP effizienter sein, da nur der erforderliche Code gerendert wird, wenn bestimmte Bedingungen erfüllt sind. Dadurch kann die Ladezeit der Seite verringert und die Serverlast reduziert werden.

Wenn die Effizienz und die Reduzierung von Overhead für deine Website wichtig sind, ist das Einbetten des Codes über PHP und die Verwendung von Bedingungen, um zu steuern, wo und wann der Code geladen wird, eine gute Option. Somit sieht das für die functions.php dann so aus:

/* --- E-Mail-Verschlüsselung JS/ROT13 der E-Mail-Adresse basierend auf Seiten-IDs --- */

function custom_email_js() {
    // Definiere die Seiten- und Beitrag-IDs, auf denen der Code geladen werden soll
    $page_post_ids = array(123, 456, 789); // Beispiel-IDs, ersetze diese mit den tatsächlichen IDs

    // Hole die aktuelle Seite oder den aktuellen Beitrag
    $current_id = get_queried_object_id();

    // Überprüfe, ob die aktuelle Seite oder der aktuelle Beitrag in der Liste der erlaubten IDs enthalten ist
    if (in_array($current_id, $page_post_ids)) {
        // Füge den JavaScript-Code ein
        ?>
        <script type="text/javascript">
            function decode(a) {
                return a.replace(/[a-zA-Z]/g, function(c){
                    return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
                });
            }

            function openMailer(element) {
                var y = decode("znvygb:orahgmre@qbznva.qr");
                element.setAttribute("href", y);
                element.setAttribute("onclick", "");
                element.firstChild.nodeValue = "E-Mail-Software öffnet sich";
            }

            document.addEventListener("DOMContentLoaded", function() {
                // Element auswählen und openMailer-Funktion aufrufen
                var emailElement = document.getElementById("email");
                if (emailElement) {
                    openMailer(emailElement);
                }
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'custom_email_js');

/* Ende E-Mail-Verschlüsselung JS/ROT13 der E-Mail-Adresse basierend auf Seiten-IDs*/

Weiter ist folgend die versprochene Konfiguration zum Quiz von Christian Schenk (hier auf youtube) für Contact Form 7.

Formular mit Contact Form 7

Die Anwendung des Plug-ins geht aus sich selbst hervor. Im Beschrieb ist hier kurz die Herstellung des anschließenden Quiz zum Spamschutz.

Contact Form 7

• "Contact Form 7" über Plug-ins (Dashboard WordPress) hochladen; den generierten Code auf neuer oder anderer Seite in "Text" eingeben und schon ist samt eigene E-Mail-Adresse installiert.
• Ansprechend ist der Artikel Contact Form 7 DSGVO konform einrichten

Code für Quiz! –
super Cooper und DSGVO-konform

A. Mathe-Quiz: Das Ganze ist eine Spielerei, aber nicht im Schwung "geht schnell" – die Mühe für diese Komplexität übernimmt folgender Hinweis:

• Generieren eines Quiz für Contact Form 7

B. Wörtliche Frage und Antwort Quiz:

Dashboard > Formulare. Das entsprechende Formular aufrufen und dort 'Quiz' auswählen:

Danach das Quiz mit den Fragen erstellen:

Nach Eingabe der Fragen|Antworten und klicken in Name (hier "quiz-654") wird ein Code in Wortfolge generiert. Dieser ist dann via "Insert Tag" in "Formular bearbeiten" einzufügen:

Das Formular voreingestellter Vorlage mit Quiz (hier der Ansicht ist auch das Plug-in "Honeypot" mit eingefügt, dazu s. u. Link). Mit Kopie und Paste des generierten Codes (blauer Balken) auf eine Seite, in "Visuell" geeignet, einfügen – und dargestellt: im Kontaktformular.

CSS Anpassungen für das Kontaktformular

/* == Kontaktformular == */
.wpcf7-quiz-label {
    margin-right: 15px;
}

.wpcf7-list-item input[type="checkbox"] {
    min-width: 20px;
    min-height: 20px;
}

.wpcf7-not-valid-tip {
    font-size: 0.8em;
}

/*Cotactform7 Ja Checkbox */
.wpcf7-list-item [type="checkbox"] {
    position: relative;
    left: -2px;
    top: 6px;
    width: 25px;
    height: 25px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.wpcf7-list-item input[type="checkbox"]:checked {
    background: #24890c;
    background-image: url(https: ..haekchen3.svg);
    transition: all 0.2s ease-out 0s;
}

/* Senden-Button */
.wpcf7 .wpcf7-submit {
    font-size: 0.8em;
}

Honeypot für Contact Form 7

Die Alternative zur Abwehr von Spam, da könnte auch genügen oder zusätzlich:

Honeypot for Contact Form 7 — Protect Contact Form 7 spam with ease! [100% FREE Anti-Spam Plugin]

Nachlese:

• CF7 Honeypot: Die Honigfalle für SPAM