引用存储在 CSS 内容属性中的 JS 代码

Question

更新：将代码发布一段时间后，我在 Citrix 和 iOS Safari 上发现了两个问题。两者似乎都与 Eval 的使用有关。可以通过将 CSS 更新为 :

来解决 citrix 问题

emailerrormessage = 'please enable Javascript'; ahref.attr('data-edomain') + '[=12=]40' + ahref.attr('data-ename');

iOS Safari 问题不是我设法解决的问题。我最终完全删除了 CSS 元素。

编辑：我打开这个问题是为了就为什么我的解决方案通常被认为是糟糕的编程提出建议，如果其他人有更好的方法通过 CSS、HTML 和 JS。我已经添加了我自己发现的答案，但没有将其标记为答案，以防其他人可能对这项技术有更好的了解。

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

混淆不应该很漂亮，但我想知道我所做的是否通过引入 eval() and/or 将 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') + '[=14=]40' + 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

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

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

引用存储在 CSS 内容属性中的 JS 代码

Referencing JS code stored in CSS Content property

javascript

css

obfuscation

email-address

eval

引用存储在 CSS 内容 属性 中的 JS 代码

Referencing JS code stored in CSS Content property

javascript

css

obfuscation

email-address

eval

引用存储在 CSS 内容属性中的 JS 代码