防止注入页面更改父页面中的样式

Posted 2023-02-19

【中文标题】防止注入页面更改父页面中的样式

【英文标题】：Prevent injected page from changing style in parent page

【发布时间】：2014-01-12 21:47:51

【问题描述】：

我有一个非常简单的测试页面布局：

<div id="nav">Some content here</div>

<div id='siteloader'></div>

通过一些 AJAX，我加载了 http://www.example.com/ 的内容（字面意思是这个页面） 在 #siteloader 中。 我在我的服务器上使用 php 脚本加载此页面，因此同源策略没有问题

http://www.example.com/ 的样式如下所示

div 
    width: 600px;
    margin: 5em auto;
    padding: 50px;
    background-color: #fff;
    border-radius: 1em;
 

现在，当我在#siteloader 中加载http://www.example.com/ 的内容时，上述样式也适用于#nav。

如何防止注入的页面覆盖我的文档样式？加载文档的样式只需要应用到#siteloader的内容上

【问题讨论】：

将其加载到 <ifame> 中？

或者因为你是通过 AJAX 加载，所以修改类/样式？

不能使用<iframe>，因为我需要通过 jQuery 访问页面的代码。动态修改非常困难，因为加载的页面并不总是相同的。可以通过网络上的每个页面。

www.example.com 样式是嵌入还是内联？

@AndrewB 不知道有什么区别。你可以检查一下，因为我的意思是example.com

【参考方案1】：

从 example.com 获取所有数据后，您可以在 siteloader 中尝试类似的操作：

$("#siteloader style").remove();

也只是为了您自己的利益，还有一个名为 nav 的 html5 标签，它与 div id="nav" 相同，但它对网络爬虫在索引您的页面时有好处。

编辑：我将其编辑为“#siteloader 样式”，这意味着仅删除了站点加载器中的样式标记。

~安德鲁

【讨论】：

$("#siteloader style").remove(); 表示从#siteloader 中删除所有样式？这不是我想要的，我需要从远程加载的样式保持不变，但我不希望它干扰我页面上已有的内容

对不起，我误会了。我不相信这是可能的，因为您必须即时确定什么是有用的，什么是无用的。此外，如果从 example.com 获取的样式类似于“div...”，它自然会影响您页面的其余部分并且您无法更改。

除非你使用一些脚本在每条 css 指令前插入“#siteloader”（注意空格），这意味着只有 siteloader 中的内容可以更改为从example.com

【参考方案2】：

除非/直到浏览器广泛支持scoped styles，否则没有简单的解决方案可以解决您的问题。如果您愿意依赖 javascript 库，可以使用 couple 或 plugins 来模拟作用域样式。

【讨论】：

This pluging 似乎做了我想做的事，但我无法绕开它。我猜注入页面中的所有样式都必须限定范围？正如我之前所说，注入的页面可以是互联网上的任何页面，因此它们可以具有内联 css（我猜不用担心）、外部样式表和嵌入式样式。如何处理？

通过 PHP 脚本中的 preg_replace 将scoped=true 属性添加到下载页面的<style> 元素中。并将<script src="js/jquery.scoped.js"></script> 添加到我的 HTML 文件中。没有帮助。

哦，忘了在正文中添加onload="$.scoped(); 。添加了它，但没有任何变化。现在还添加了一个带有onclick="$.scoped(); 的按钮。现在，当我加载页面时，#siteloader 的样式会像以前一样混淆页面其余部分的样式。但是当我单击此按钮时，#siteloader 再次为空，页面的其余部分不再混乱。奇怪.....