Referenzieren von in CSS gespeichertem JS-Code Inhaltseigenschaft

Question

UPDATE: Nachdem ich den Code eine Weile aus dem Spiel genommen habe, habe ich zwei Probleme bei Citrix und iOS Safari festgestellt. Beide scheinen um den Gebrauch von Eval herum zu sein. Das citrix Problem durch die Aktualisierung der CSS aufgelöst worden sein könnte:

emailerrormessage = 'please enable Javascript'; ahref.attr('data-edomain') + '\0040' + ahref.attr('data-ename'); 

Das iOS Safari Problem war nicht etwas, was ich geschaffen zu lösen. Ich habe das CSS-Element komplett ausgeschnitten.

EDIT: Ich öffne diese Frage für Empfehlungen, warum meine Lösung als schlechte Programmierung im Allgemeinen betrachtet werden kann, und wenn jemand eine bessere Möglichkeit hat, Emails durch eine Kombination von CSS, HTML und JS zu verschleiern. Ich habe eine Antwort auf meine eigenen Ergebnisse hinzugefügt, aber ich habe sie nicht als die Antwort markiert, falls jemand anderes einen besseren Einblick in diese Technik hat.

Ich wurde beauftragt, E-Mail-Adressen auf einigen Webseiten zu verschleiern, und nachdem ich eine Antwort suggesting use of CSS and data attributes gefunden habe, habe ich versucht, es selbst zu implementieren und festgestellt, dass die produzierte E-Mail-Adresse in ein Mailto-Element ohne JavaScript nicht möglich war. Das nächste Problem war, dass das JavaScript, das ich zum Abrufen der gerenderten E-Mail-Adresse verwendete, nicht browserübergreifend war, da einige Browser "attr (data-xx)" anstelle des tatsächlichen Werts abrufen. Dennoch gefällt mir die Idee, eine Lösung zu erstellen, die HTML, JS und CSS für maximale Komplexität umfasst. Der letzte Ausweg bestand darin, eine JS-Zeile in der CSS-Inhaltseigenschaft zu speichern und mithilfe von eval die endgültige E-Mail-Adresse zu erstellen.

Verschleierung soll nicht hübsch sein, aber ich möchte wissen, ob das, was ich gemacht habe, potentiell die Sicherheit oder Leistung gefährdet, indem man eval() einführt und/oder JS in CSS speichert. Ich habe kein anderes Beispiel dafür gefunden, dass jemand etwas Ähnliches macht (vielleicht aus gutem Grund).

Mein HTML ist

<a class="redlinktext ninjemail" data-ename="snoitagitsevni" data-edomain="ua.moc.em" data-elinktext="click me"></a> 

Meine CSS ist

.ninjemail:before { 
    content: "'please enable Javascript'; ahref.attr('data-edomain') + '\0040' + ahref.attr('data-ename');" 
} 

Mein JavaScript

ist

$('.ninjemail').each(function() { 
    var fullLink = "ma"; 
    var ahref = $(this); 
    fullLink += "ilto" + ":"; 
    var codeLine = window.getComputedStyle(this, ':before').content.replace(/\"|\\/g, ''); 
    var emailAddress = eval(codeLine); 
    emailAddress = emailAddress.split('').reverse().join(''); 
    fullLink += emailAddress; 
    ahref.attr('href', fullLink); 
    var linkText = ahref.attr('data-elinktext'); 
    if (linkText && linkText.length > 0) { 
     ahref.text(linkText); 
    } else { 
     ahref.text(emailAddress); 
    } 
    ahref.removeClass('ninjemail'); 
}); 

Answer 1

auf der Forschung Basierend ich bisher die einzige wirkliche Nachteil getan haben mit diese Methode zur Verschleierung ist, dass in Teams, in denen es eine klare Rollentrennung gibt, Javascript in CSS-Dateien verwirren kann viele Designer und umgekehrt (Programmierer wollen CSS-Dateien nicht bearbeiten müssen).

Leistung wird es immer mehr Overhead bei der Verarbeitung der E-Mail-Adresse über die drei Technologien. Ich kann nicht sagen, dass ich ein Experte für Performancetests bin, aber ich habe ein Seitenauffrischungs-Timing von vorher und nachher gemacht und eine DOMContentLoaded-Zeit von .956s vs .766s ohne Verschleierung bekommen. Ladezeit war 1.22s vs 1.17s ohne Verschleierung. Kein Problem für meine eigene Situation, aber möglicherweise ein Problem bei intensiveren Anwendungen. Beachten Sie, dass dies ein einmaliger Test war und nicht ein Durchschnitt von mehreren Läufen in einer kontrollierten Umgebung.