javascript - 引用存储在 CSS Content 属性中的 JS 代码

Question

更新:在将代码公开一段时间后，我在 Citrix 和 iOS Safari 上发现了两个问题。两者似乎都围绕 Eval 的使用。 Citrix 问题可以通过将 CSS 更新为来解决:

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

我未能解决 iOS Safari 问题。我最终完全删除了 CSS 元素。

编辑:我打开这个问题寻求建议，了解为什么我的解决方案通常被认为是糟糕的编程，以及是否有其他人有更好的方法通过 CSS、HTML 和 JS 的组合来混淆电子邮件。我添加了我自己的发现的答案，但没有将其标记为答案，以防其他人可能对这项技术有更好的了解。

我的任务是混淆某些网页上的电子邮件地址，并在遇到答案 suggesting use of CSS and data attributes 后我尝试自己实现它，发现如果没有一些 JavaScript，将生成的电子邮件地址返回到 mailto 元素是不可能的。遇到的下一个问题是，我最终用来获取呈现的电子邮件地址的 JavaScript 不是跨浏览器的，因为某些浏览器检索的是“attr(data-xx)”而不是实际值。不过，我仍然喜欢生成一个涵盖 HTML、JS 和 CSS 的解决方案以实现最大复杂性的想法。最后的办法是在 CSS content 属性中存储一行 JS，并使用 eval 生成最终的电子邮件地址。

混淆不应该是漂亮的，但我想知道我所做的是否可能通过引入 eval() 和/或在 CSS 中存储 JS 来损害安全性或性能。我还没有找到其他人做类似事情的例子(也许有充分的理由)。

我的 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

根据我迄今为止所做的研究，使用这种混淆方法的唯一真正缺点是，在 Angular 色明确分离的团队中，CSS 文件中的 Javascript 可能会让布局设计者感到困惑，反之亦然(程序员不想编辑 CSS 文件)。

就性能而言，这三种技术在处理电子邮件地址时总会产生更多开销。我不能说我是性能测试方面的专家，但我在之前和之后做了页面刷新计时，并在没有混淆的情况下得到了 0.956 秒和 0.766 秒的 DOMContentLoaded 时间。加载时间为 1.22 秒，而没有混淆时为 1.17 秒。不关心我自己的情况，但可能是更密集的应用程序的问题。请注意，这是一次一次性测试，而不是受控环境中多次运行的平均值。