谁或什么东西（在晚上）向我的网站注入“数据对比”以及如何阻止它？

Question

我注意到我正在帮助的网站有时会出现注入

span

元素的问题。这些跨度会破坏空格并使文本难以阅读。这些跨度看起来像这样：

<span data-contrast="auto">words</span>
<span data-contrast="auto">,</span>
<span data-contrast="auto">b</span>
<span data-contrast="auto">ut</span>
<span data-contrast="auto">sometimes also only single chars</span>

该网站由 WordPress 运行，但这似乎不是原因，因为受影响的帖子看起来很好，并且在帖子编辑器或数据库中没有显示此标记的迹象。

此外，这些跨度似乎只发生在夜间。我试图确定这一点，但像往常一样，我还无法真正验证它，因为它没有再次发生在我身上，即使是在晚上。现在一切都很好，这些跨度都不存在。

我猜这与浏览器中的夜间模式（尽管 Edge 和 Firefox 中的行为相同）或 Windows 中的夜间模式有关，但另一方面，我在其他任何浏览器上都没有注意到这一点还没有页面。

因此，这有点奇怪且难以确定，但是当您使用搜索引擎并搜索“数据对比范围”时，您会发现包含相同标记的复制文本。所以，至少我不是唯一有这个问题的人。

有什么想法可以解决这个问题并找出原因吗？

Answer 1

浏览器插件通常被授予在运行时修改页面源的权限。我猜罪魁祸首是像

Night Eye或Dark Reader这样的跨浏览器扩展。

一般来说，添加

<span>

 不会扰乱你的布局，除非你的 CSS 改变了浏览器默认的 span 属性。

选项1

您

可能能够通过添加 CSS 来控制布局的外观来解决问题：

span[data-contrast="auto"] {...} 这将选择具有该数据属性的所有范围。然后添加样式来解决您看到的布局问题。

也就是说，由于扩展程序是在页面呈现后添加代码，因此它可能会覆盖您所做的任何操作。

选项2

更好的解决方案是创建自己的黑暗模式。如果您提供自己的主题选项，大多数插件/操作系统夜间模式都不会扰乱您的代码。

“黑暗”主题是移动响应的 2020 版本；您应该在代码中提供它，否则当用户、浏览器制造商和操作系统做出自己的决定时，您将承担后果。

如果您需要帮助创建备用主题，

CSS Tricks 有一篇很好的文章。

Answer 2

由于不清楚他们是从什么软件复制的，所以我个人在从 Microsoft Teams 或 SharePoint 中打开的 Word 文档复制，然后直接粘贴到网站的编辑器中时经历过这种情况（我们的网站使用 TinyMCE 文本编辑器） ，一种常用的免费文本编辑器）。

我的建议：直接从桌面版 Word 复制，然后粘贴到编辑器中，这样可以防止“数据对比”跨度。

我认为非桌面版本的 Word 文档中一定存在一些隐藏的跨度，它们添加这些跨度是为了确保文档的显示方式与桌面版本相同。文本编辑器不知道如何处理它，因此它会删除所有内容，但“数据对比度”部分除外。

希望这对那里的人有帮助，因为原始帖子是前一段时间问过的。

Answer 3

TimesWasting - 如果您使用 TinyMCE，您如何停止粘贴“数据对比度”？