CSSコンテンツに保存されているJSコードを参照Contentプロパティ

Question

更新：しばらくの間、コードを外に出した後、CitrixとiOS Safariで2つの問題が見つかりました。どちらもEvalの使用の周りにあるようです。 Citrix社の問題がにCSSを更新することで解決されている可能性：

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

のiOSのSafariの問題は、私が解決するために管理ものではありませんでした。私はCSS要素を完全に切り捨てました。

EDIT：私のソリューションが一般的に悪いプログラミングとみなされる理由と、他の誰かがCSS、HTML、JSの組み合わせで電子メールを難読化する良い方法を持っている理由について、この質問を推奨します。私は自分の発見の答えを追加しましたが、他の誰かがこのテクニックのより良い見識を持っているかもしれない場合に答えとしてマークしていません。

私はいくつかのWebページで電子メールアドレスを難読化するように任されており、答えがsuggesting use of CSS and data attributesになった後、私はそれを自分自身で実装しようとしましたが、JavaScriptがなければ生成された電子メールアドレスをmailto要素に戻すことは不可能でした。次の問題は、レンダリングされた電子メールアドレスを取得するために使用したJavaScriptが、実際の値ではなく一部のブラウザで「attr（data-xx）」を取得するため、クロスブラウザではありませんでした。しかし、私はまだ複雑さを最大限にするために、HTML、JS、およびCSSにまたがるソリューションを作るというアイデアが気に入っています。最後の手段は、JSの行をCSSコンテンツプロパティに格納し、evalを使用して最終的な電子メールアドレスを生成することでした。

難読化は面白くないはずですが、私がしたことが、eval（）を導入したり、JSをCSSに格納したりすることによってセキュリティやパフォーマンスを損なう可能性があるかどうかを知りたいと思います。私は似たようなことをしている人の別の例を見つけられませんでした。

私のHTMLは

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

私のCSSは

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

私のJavaScriptは、私がこれまで使用してからの唯一の本当の欠点を行ってきた調査に基づき

$('.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

であるですこの難読化の方法は、明確な役割の分離があるチームでは、CSSファイルのJavascriptがlを混乱させる可能性がありますデザイナーになることができます（プログラマーはCSSファイルを編集する必要はありません）。

パフォーマンス面では、3つのテクノロジ間で電子メールアドレスを処理する際に、常にオーバーヘッドが発生します。私はパフォーマンステストの専門家だとは言えませんが、前と後のページリフレッシュタイミングを行い、難読化せずに.956sと.766sのDOMContentLoaded時間を得ました。読み込み時間は1.22秒で、難読化されずに1.17秒でした。自分の状況には関係ありませんが、より集中的なアプリケーションでは問題になるかもしれません。これは一時的なテストであり、管理された環境では複数回の平均実行ではありませんでした。