Devtools 审计显示不需要/注入的 css 规则答案

【问题标题】：Devtools audit shows unwanted/injected css rulesDevtools 审计显示不需要/注入的 css 规则
【发布时间】：2013-05-30 13:52:40
【问题描述】：

所以，在尝试在 Chrome devtools 中调试网页的性能时，我发现我的页面有很长的 css 规则，我没有放在那里。我查看源代码时看不到规则。但是chrome告诉我规则正在执行。规则也明显是恶意的，

.yahoo 之类的东西赞助到 [onclick^="window.open('http://

我的问题是如何找出什么是，我假设，将它注入到我的 DOM 中？当我查看源代码时，我什么都看不到。

我有点不知道如何进行。

感谢您的帮助。

【问题讨论】：

您能否在完全不同的计算机上重现该问题？至少使用另一个浏览器：Firefox，没有 JS？好像你有一个你不打算安装的恶意软件或工具栏......编辑：它是否发生在其他网站的页面上？您是否正在使用带有插件/扩展的 CMS，这些插件/扩展会通过混淆的 JS 添加这些？
我可以用 IE 重现缓慢，但我不知道有什么工具可以让我配置文件以查看 css（我也看不到 chrome 中的 css）。我也可以在另一台电脑上重现。我没有使用 CMS，它是一个 struts2 应用程序。
在 Chrome 中：检查元素，然后元素和资源选项卡可让您查看加载的 CSS 或 CSS 文件。 IE Developer Toolbar 是旧 IE 的插件；只需在 IE9 中按 F12 或安装 Firebug light。没有 CMS，所以它不是一个来源不明的 WordPress 插件/主题加载混淆 JS，很好。您是否使用 CCleaner 之类的工具清理过您的 PC（关于我 5 年前一直卡在这个问题上的问题 ^^，现在可能有更好的工具）？如果不是从 GG 下载的，也许您安装了一个工具栏，但对 Flash、Java 等或 Chrome 了解不多。主要的 DL 站点安装了他们自己的更新东西，然后 bam！... :(

【解决方案1】：

这些很可能是由类似于 AdBlock 的扩展程序注入的，它注入一个没有 textContent 的内联样式表（在 DevTools 中呈现为 <style></style>），而是通过 CSSOM API 动态添加所需的规则.

为避免在审核结果中看到这些规则，请禁用 AdBlock 或类似的扩展程序，重新加载页面，然后再次运行审核。

【讨论】：