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

Question

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

<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 的内容

Answer 1

您可以在站点加载器中尝试这样的事情，然后从 example.com 获取所有数据：

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

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

编辑

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

~安德鲁

Answer 2

除非/直到浏览器广泛支持作用域样式，否则没有简单的解决方案来解决您的问题。如果你愿意依赖 JavaScript 库，有几个插件可以模拟作用域样式。