如何在注入体内之前清理脚本答案

【问题标题】：How to sanitize script before injecting into body如何在注入体内之前清理脚本
【发布时间】：2013-12-02 11:24:04
【问题描述】：

我正在创建一个 Firefox jetpack 插件，它从 API 获取标签中打开的 URL 的数据。 API 以 JSON 格式返回数据。然后，我使用该数据创建 HTML 标记，以便很好地显示它。然后我将该 HTML 从内容脚本文件注入到打开的站点的正文中。这工作得很好，但是当我将应用程序提交给 Firefox 商店进行审查时，由于数据未经处理而被拒绝。

如果我对其进行清理，它会在注入中显示纯 HTML。我在创建的文档中没有标记，但我对注入脚本中的一些链接使用 onclick 函数。这是一个示例代码，可以让您了解我想要实现的目标。

Main.js

// It gets data in JSON format
// I share this data with content script in an object
tab = tab.attach({
            contentScriptFile:  [require("sdk/self").data.url("jquery.min.js"),
                                require("sdk/self").data.url("contentscript.js")]
                    });
tab.port.emit('data', JSON.parse(JSON_STRING));

contentscript.js

// I get data from main.js and then make an html 
// then I inject it to the opened document
self.port.on('data', function(obj) {
 content = '<div id="test"><a href="http://www.example.com/'+obj.page+'" onclick="javascript: document.getElementById(\'test\').style.display="none">Visit</a></div>';
 $('body').append(content);

});

我还在扩展中使用 css 样式。

有什么解决方案可以在不破坏功能的情况下对其进行消毒？谢谢

【问题讨论】：

标签： javascript firefox sanitize

【解决方案1】：

我使用了 Mozilla 网站上的 escapeHTML() 函数，它解决了我的问题。这是代码及其用法：

var url = 'http://www.example.com'; // any internal/external variable
var content = '<div id="main_extension"><a href="'+escapeHTML(url)+'">Click Me</a></div>';

function escapeHTML(str) str.replace(/[&"<>]/g, function (m) escapeHTML.replacements[m]);
escapeHTML.replacements = { "&": "&amp;", '"': "&quot;", "<": "&lt;", ">": "&gt;" };

我的扩展使用这种方法获得了批准。但是，如果您使用 jQuery DOM 或任何其他方法进行数据注入，您也可以使用其他方法。来源：https://developer.mozilla.org/en/XUL_School/DOM_Building_and_HTML_Insertion

【讨论】：