当前位置：文江博客话题详情

防止现有 CSS 对注入的 HTML/CSS 进行样式化

发布于 2024-07-16 22:06:39 字数 325 浏览 7 评论 0原文

我正在开发一个项目，该项目在我无法控制的网页上注入 JS+CSS+HTML。

我担心主机页面对我注入的代码进行样式设置——我希望我的注入代码只遵循我的样式，而不是他们的样式。

目前，我能想到的唯一方法是显式指定容器

类的每个可能的标签（使用预定义的、已知的浏览器默认值）并依赖继承让这些规则传播到我注入的 HTML 的其余部分。此 CSS 需要出现在页面标记的底部。

不过，我认为这不是最好的解决方案，而且我也不期待实施它。当然还有更好的方法。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沧桑㈠ 2024-07-23 22:06:39

其他人提出了非常好的方法来防止您的 CSS 影响页面，并确保您的 CSS 优先，但您似乎最关心的是页面的 CSS 影响您 - 也就是说，添加一种时髦的、意想不到的样式（例如所有 div 都有粉红色背景）。

我认为防止它们的样式影响您注入的代码的唯一方法是对您注入的内容进行沙箱处理，就像在 iframe 中一样。否则，您必须定义太多的东西 - 您必须定义每一个样式（padding、border、margin 、背景...列表不断）在“*”选择器（或者更好的是“#yourid *”）上，所以你只需覆盖你自己的内容），这样你就可以保证对你的 CSS 的绝对控制。

编辑：我意识到，如果您使用全向选择器将所有内容重置为基线，后一种解决方案不一定会太痛苦：

#myid * {
    somestyle1: default;
    somestyle2: default;
    ... 
}

我发现有人写过这样的解决方案。如果您在页面上向下滚动足够远，您就会看到它（来自 SuzyUK）。它看起来并不完整，但肯定是一个好的开始。

（我也有兴趣知道是否有一个好的方法来防止这种情况。在将代码注入到页面之前，我已经编写了 Greasemonkey 脚本，并且必须编写 CSS 来覆盖页面的 CSS，但在这些情况下，我知道我的目标是谁，并且可以直接针对页面定制 CSS。）

Others have suggested very good ways to prevent your CSS from affecting the page's, as well as making sure that your CSS takes precedence, but you seem most concerned with the page's CSS affecting you - that is, adding a funky, unexpected style (like making all divs have a pink background).

The only way I can think for you to prevent their styling from affecting your injected code would be for you to sandbox what you've injected, like in an iframe. Otherwise there's simply too many things that you'd have to define - you'd have to define every single style (padding, border, margin, background... the list goes on and on) on the "*" selector (or better yet, "#yourid *", so you just override your own content), just so that you can guarantee absolute control over your CSS.

Edit: I realize that the latter solution wouldn't necessarily be too painful, if you're using the omni-selector to reset everything to a baseline:

#myid * {
    somestyle1: default;
    somestyle2: default;
    ... 
}

I've found someone who has written up such a solution. If you scroll down far enough on the page, you'll see it (from SuzyUK). It doesn't look complete, but is a good start for sure.

(I, too, would be interested to know if there's a good way to prevent this. I've written Greasemonkey scripts before that injects code onto the page, and have had to write CSS to override the page's CSS, but in those cases I knew who my target was and could tailor my CSS directly towards the page.)

回复收藏 0 原文

泪痕残 2024-07-23 22:06:39

使用专门分类的

包装注入的 HTML，例如

<div class="my-super-specialized-unique-wrapper"><!--contents--></div>

然后在 CSS 中，为所有规则添加 .my-super-specialized-unique-wrapper 前缀，并使用 !important规则。这将指示客户端浏览器将您的规则视为任何匹配元素的最高规则，而不管可能针对它们的任何其他样式 - 即使您无法控制的其他规则更加具体。

Wrap your injected HTML with a specifically-classed <div>, such as

<div class="my-super-specialized-unique-wrapper"><!--contents--></div>

Then in your CSS, prefix all rules with .my-super-specialized-unique-wrapper and use !important on every rule. That will instruct the client browser to treat your rule as supreme for any elements which match, regardless of any other styles that might target them - even if other rules outside your control are more-specific.

回复收藏 0 原文

萌︼了一个春 2024-07-23 22:06:39

为什么不注入具有内联格式的 html 元素，如下所示：

<p style="color:red">This to be injected</p>

内联样式优先于任何其他规则，并且您已经创建了标记以便插入它。

其他解决方案是在元素上使用非常具体 DOM id，然后在添加的 CSS 上设置它们的样式

Why not injecting html elements with inline formatting like this:

<p style="color:red">This to be injected</p>

inline styling takes precedence over any other rule, and you're already creating the markup in order to insert it.

Other solution would be to use very specific DOM id's on your elements and then styling them on your added CSS

回复收藏 0 原文

書生途 2024-07-23 22:06:39

您只需使用 CSS 选择器具体即可。也就是说，比主页的 CSS 规则具体得多。您可能还想添加一种全局 CSS 重置，修改为仅重置您的 HTML。我的意思是，将所有颜色、背景、字体、填充等重置回单一标准。从那里您可以建立自己的风格。

回复收藏 0 原文

零度℉ 2024-07-23 22:06:39

如果您使用的是 Mozilla 浏览器，您实际上可以（如果非法）将可见的 DOM 内容添加到中。之外的元素元素。这将避免任何与正文匹配并被您的内容继承的样式。某些样式可能会在 html 上匹配，这会破坏该技术，但我发现它很有用。

例如。使用jquery： $('html').append('

blah blah blah

');

当您不希望库的实例干扰由您正在修改的页面定义的库的使用时，使用流行的库本身就是一个挑战。 Greasemonkey 的“@require”对我不起作用。我发现有必要（但可能！）保存 jquery 脚本分配的两个或三个全局名称的任何现有值，将我的库实例插入到 DOM 中，等待它被加载（必须使用计时器，这很烦人，但我找不到解决方法），将分配给全局变量的值缓存在我自己的命名空间中供我自己使用，并恢复保存的值。

回复收藏 0 原文