更改 html 页面内容

Change html page content

本文关键字：html 更改      更新时间：2023-09-26

我正在使用附加SDK创建Firefox插件。我想从远程 url 获取数据并将其注入当前 html。到目前为止，我能够使用 Firefox 插件 sdk 的请求模块获取数据，但无法将其注入当前页面。

例如：我正在从网站"abc.com"获取响应。获取响应后，我将用响应扩充当前页面

// main.js
var widgets = require("sdk/widget");
var tabs = require("sdk/tabs");
var Request = require("sdk/request").Request;
//create addon widget
var widget = widgets.Widget({
    id: "div-show",
    label: "Show divs",
    contentURL: "http://www.mozilla.org/favicon.ico",
    onClick: function() {
    //initializing request module to fetch content
    quijote.get();
    }
});
//fetch content of requested page
var quijote = Request({
    url: "http://localhost/abc/",
    overrideMimeType: "text/plain; charset=latin1",
    onComplete: function (response) {
        //check if content is fetched successfully 
        addContent(response);
    }
});
//try and modify current page
function addContent(response){
    //initialize page modification module
    var pageMod = require("sdk/page-mod");
    tabs.activeTab.attach({
       contentScript: 'document.body.innerHTML = ' + ' "<h1>'+response.text+'</h1>";'
    });
}

他们有什么方式可以让我增加我的当前页面吗???

您的代码将严重失败，例如，当response.text包含双引号时。那么你的代码将是（假设它是<a href="hello">world</a>）：

document.body.innerHTML = "<h1><a href="hello">world</a></h1>";

这显然是无效代码。

您的代码基本上是从未清理的数据构造一个动态脚本，这是一个坏主意，因为（除了上面的转义问题）

  1. 您将运行一个未经净化的内容脚本，如果该代码甚至有效，并且
  2. 如果成功，页面也可能运行未经净化的代码。

这是相当于SQL注入攻击的网络。

首先，让我们解决 1.）带消息（更多）：

var worker = tabs.activeTab.attach({
   contentScript: 'self.port.on("setdom", function(data) { ' +
                    + 'document.body.innerHTML = data; /* still a security issue! */'
                    + '});'
});
worker.port.emit("setdom", response.text);

这保证了内容脚本有效（甚至可以运行）并且不会运行任意代码。

但是 2.）仍然是一个问题。阅读 DOM 构建和 HTML 插入。

相关文章：