css - 远程内容 - 阻止 CSS 覆盖

Question

我正在开发一个允许用户将内容嵌入到他们有权访问的网页中的系统。

从概念上讲，用户会在他们的页面上创建一个具有特定 ID(我们称之为“myId”)的 div，并包含一个我控制的 JavaScript 文件，该文件基本上会将标记注入(inject)“myId”。

返回的标记将包括带有内联样式的 div。我不能允许将此内容嵌入其页面的用户覆盖 CSS 样式。

我已经阅读了数百篇关于 CSS 特异性、!Important 等的文章和主题。似乎阻止用户覆盖您的样式的唯一真正方法是使用 iFrame。

以下是我和几个同事的三篇文章。 http://weblog.bocoup.com/3pjs-css-defense/ https://speakerdeck.com/antonkovalyov/achieving-harmony-with-third-party-javascript http://weblog.bocoup.com/3pjs-css-delivery/

其中一个担忧是 iOS 将停止支持 iFrame，老实说，多年来我们一直被告知不要使用 iFrame。虽然它看起来是完美且唯一的解决方案，但它确实听起来很“hacky”。​​

是否有人对任何其他解决方案有任何见解？我查看了 linkedIn 如何嵌入他们的“与 linkedIn 按钮连接”，他们只是用 !important 包装每个属性值(a)看起来 super hacky 和 ​​b)不考虑未声明的属性和值)。

Answer 1

您对 !important 的主要担心是他们仍然可以使用 !important 关键字在以后的声明中覆盖它。

关于 iFrame，您是对的。

所以你没有太多选择:

• 一个选择是在您自己的 CSS 声明前添加一个自定义的非通用类包名称，这样用户覆盖它们的机会就会非常小:

  .content h1

会变成

.my-custom-css .content h1

• 另一种选择是修改他们的 css markdown 而不是您的。在他们的每个声明前加上一个特定的 css 类，并将该类用于他们的 div 容器，以便它适用于其所有内容。