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

Tom*_*lis 16 html javascript css internet-explorer code-injection

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

我担心主机页面样式化我注入的代码 - 我希望我注入的代码只服从我的样式,而不是他们的样式.

目前我唯一能做到这一点的方法就是要明确指定容器<div>类的每个可能的标签(使用预定义的,已知的浏览器默认值),并依靠继承将这些规则传播到我的其余部分.注入HTML.这个CSS需要出现在页面<head>标签的底部.

我不认为这是最好的解决方案,我不期待实施它.当然有更好的方法.

Dan*_*Lew 12

其他人提出了很好的方法来防止你的CSS影响页面,并确保你的CSS优先,但你似乎最关心的是影响你的页面的CSS - 也就是说,添加一个时髦,意想不到的风格(如制作所有div都有粉红色的背景).

我能想到的唯一方法是阻止他们的样式影响你注入的代码,这将是你沙盒你注入的东西,比如iframe.否则,有简单的,你不得不定义了太多的东西-你必须确定每一个风格(padding,border,margin,background在"......这样的例子不胜枚举和上)*"选择(或更好,但" #yourid *",所以你只需覆盖自己的内容),这样你就可以保证对CSS的绝对控制.

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

#myid * {
    somestyle1: default;
    somestyle2: default;
    ... 
}
Run Code Online (Sandbox Code Playgroud)

我发现有人写了这样的解决方案.如果你在页面上向下滚动足够远,你会看到它(来自SuzyUK).它看起来并不完整,但肯定是一个好的开始.

(我也有兴趣知道是否有一种防止这种情况的好方法.我在编写Greasemonkey脚本之前将代码注入页面,并且必须编写CSS来覆盖页面的CSS,但在那些情况下我知道我的目标是谁,可以直接在页面上定制我的CSS.)