CODEWITHSUNDEEP
javascriptdomfirefox-addon
Nadia
Nadia

Reputation: 257

firefox add-on innerHTML not allowed, DOM help needed

I'm writing my first firefox add-on. It was completed, but mozilla rejected it with this answer:

1) Your add-on creates DOM nodes from HTML strings containing potentially unsanitized data, by assigning to innerHTML or through similar means. Aside from being inefficient, this is a major security risk. For more information, see https://developer.mozilla.org/en/XUL_School/DOM_Building_and_HTML_Insertion. Here are some examples where you do this: (cut...)

I wrote: 

var myDiv = content.document.getElementById("myContent");
myDiv.innerHTML = "some html code";

now I'm not a JS programmer and I don't understand how to go on. I tested some code like this:

var NewNode = content.document.createElement("span");
NewNode.appendChild(content.document.createTextNode("Hello World!"));                   

//content.document.body.appendChild(NewNode);//ok, works
content.document.getElementById("myContent").appendChild(NewNode);//doesn't work

but it doesn't work until I append it to .body

Samples working on other pages seems not working here. Moreover I don't understand if it fixes the problem that mozilla indicated.

Could you please help me with the code that should replace the two lines I wrote? If you need the full code, here it is: http://www.maipiusenza.com/LDV/down/ldvgenerator.xpi

Thanks! Nadia

Upvotes: 3

Views: 2197

Answers (2)

Mehran Hatami
Mehran Hatami

Reputation: 12961

OK then, I did some digging and I think I managed to find your problem:

Whenever you want to inject any kind of html to your extension, The browser considers it as a security hole, that's why you have this problem. you have 2 different solution;

first: you can create an iframe and use it to show your html (in javascript whenever we want to show a file we have 2 option, first pass a file path on the server, or use data: to show your data directly):

var htmlStr = "<span>Hello World!</span>";
var frm = content.document.createElement("iframe");
content.document.getElementById("myContent").appendChild(frm); 
frm.src = "data:text/html;charset=utf-8," + encodeURIComponent(htmlStr);

second: this solution would help you out, if you don't want to use an iframe to show your html.

var htmlStr = "<span>Hello World!</span>";
var frm = document.createElement("iframe");
frm.style.display="none";
document.body.appendChild(frm);

var win = frm.contentWindow;
var frmrange = win.document.createRange();
// make the parent of the first div in the document becomes the context node
frmrange.selectNode(win.document.firstChild);
var frg = frmrange.createContextualFragment(htmlStr);
content.document.getElementById("myContent").appendChild(frg);

Old Guess: the problem in your code is different document objects, try this:

var NewNode = content.document.createElement("span");
NewNode.appendChild(content.document.createTextNode("Hello World!"));

content.document.getElementById("myContent").appendChild(NewNode);

this was my first clue to point out.

Upvotes: 0

Chris Rymer
Chris Rymer

Reputation: 713

Just did a quick js fiddle, I was wondering why you have used content.document so I amended it to document and it worked.

http://jsfiddle.net/eDW82/

var NewNode = document.createElement("span");
NewNode.appendChild(document.createTextNode("Hello World"));
document.getElementById("myContent").appendChild(NewNode);

I had a similar problem with unsanitized HTML and as I used it extensively I opted to use jQuery which will pass mozillas rules. It makes life a lot easier to be able to create your nodes that way.

$("<div>", {id:"example"}).text("Hello World")

It just reads so much nicer.

Upvotes: 1

Related Questions