current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 3 down vote favorite

I want to use a white list of tags, attributes and values to sanitize a html string, before I place it in the dom. Can safely I construct a dom element, and traverse over that to implement the white list filter, assuming that no malicious javascript could execute until I append the dom element to the document? Are there pitfalls to this approach?

share|improve this question
    
I haven't used the library in the accepted answer myself, but you might check out stackoverflow.com/questions/5575559/… , with the help pages of perhaps most relevance: owasp.org/index.php/… and code.google.com/p/owasp-esapi-js/wiki/MitigatingDOMBasedXSS –  Brett Zamir Feb 13 '14 at 0:52
    
The advantage of this over HTMLPurifier, etc. would be that it can run dynamically on the client-side without round-tripping to the server. –  Brett Zamir Feb 13 '14 at 0:54
    
As far as the whitelist that you need, while owasp.org/index.php/… does make mention of one JS library, github.com/ecto/bleach and perhaps it could be adapted for client-side usage, it appears to rely on regular expressions which I would not trust to do the job very well (e.g., it doesn't currently match newlines within tags). –  Brett Zamir Feb 13 '14 at 1:10
    
I also found: github.com/gbirke/Sanitize.js. I like both answers here - what is the protocol about choosing the correct answer? –  Piwakawaka Feb 13 '14 at 17:45
    
Haven't examined it, but its approach definitely sounds like the way to go. As far as liking both answers, do you mean liking both libraries or liking both of our Stack Overflow answers? If the latter, no worries. Normally, it's whatever you liked the best (I like to pick the first poster if the answers were similar.). Once you have enough reputation, you can also up-vote other answers. –  Brett Zamir Feb 13 '14 at 22:55

2 Answers 2

up vote 1 down vote accepted

No script embedded in the HTML can execute until it is put in the document. Try running this code on any page:

var html = "<script>document.body.innerHTML = '';</script>";
var div = document.createElement('div');
div.innerHTML = html;

You will notice nothing change. If the "malicious" script in the HTML was run, then the document should have vanished. So, you can use the DOM to sanitize HTML without worrying about bad JS being in the HTML. As long as you snip out the script in your sanitizer of course.

By the way, your approach is pretty safe and smarter than what most people try (parse it with regex, the poor fools). However, it's best to rely on good, trusted HTML sanitizing libraries for this, like HTML Purifier. Or, if you want to do it client-side, you can use ESAPI-JS (recommended by @Brett Zamir)

share|improve this answer
    
Thanks. I guess I am looking for confirmation that there are absolutely no pitfalls to this approach. For example if the string contained 'eval', or some css... etc. –  Piwakawaka Feb 13 '14 at 1:02
up vote 1 down vote

It doesn't appear that anything will execute until you insert into the document, as per @rvighne's answer, but there are at least these (unusual) exceptions (tested in FF 27.0):

var userInput = '<a href="http://example.com" onclick="alert(\'boo!\')">Link<\/a>';
var el = document.createElement('div');
el.innerHTML = userInput;
el.addEventListener("click", function(e) {
    if (e.target.nodeName.toLowerCase() === 'a') {
        alert("I will also cause side effects; I shouldn't run on the wrong link!");
    }
});
el.getElementsByTagName('a')[0].click(); // Alerts "boo!" and "I will also cause side effects; I shouldn't run on the wrong link!"

...or...

var userInput = '<a href="http://example.com" onclick="alert(\'boo!\')">Link<\/a>';
var el = document.createElement('div');
el.innerHTML = userInput;
el.addEventListener("cat", function(e) { this.getElementsByTagName('a')[0].click(); });
var event = new CustomEvent("cat", {"detail":{}});
el.dispatchEvent(event); // Alerts "boo!"

...or... (though setUserData is deprecated, it is still working):

var userInput = '<a href="http://example.com" onclick="alert(\'boo!\')">Link<\/a>';
var span = document.createElement('span');
span.innerHTML = userInput;
span.setUserData('key', 10, {handle: function (n1, n2, n3, src) {
    src.getElementsByTagName('a')[0].click();
}});
var div = document.createElement('div');
div.appendChild(span);
span.cloneNode(); // Alerts "Boo!"    
var imprt = document.importNode(span, true); // Alerts "Boo!"
var adopt = document.adoptNode(span, true); // Alerts "Boo!"

...or duration iteration...

var userInput = '<a href="http://example.com" onclick="alert(\'Boo!\');">Link</a>';
var span = document.createElement('span');
span.innerHTML = userInput;
var treeWalker = document.createTreeWalker(
  span,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) { node.click(); } },
  false
);
var nodeList = [];
while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode); // Alerts 'Boo!'

But without these kind of (unusual) event interactions, the fact of building into the DOM alone would not, as far as I have been able to detect, cause any side effects (and of course the examples above are contrived and one wouldn't expect to encounter them very often if at all!).

share|improve this answer
    
Um... how would any of this code actually be executed? I mean, that if an attacker put this in a <script> tag, then how would it get run if that script wasn't put into the DOM? You're getting lost in the DOM-ception... –  rvighne Feb 13 '14 at 1:06
    
I just mean that there could be some pitfalls if you are executing events which may interact with user content (at least if you are not careful filtering). I've updated the answer to give some examples...Admittedly, these cases would be quite unusual, but I just wanted to challenge the notion that "what happens in the DOM stays in the DOM". –  Brett Zamir Feb 13 '14 at 4:14
    
If it's not put into the DOM memory at all, then of course there won't be a problem if you filter it while still a string or if you are merely traversing (and your traverser itself isn't performing interactions which could be harmful). I just mean something doesn't need to be appended to the document to cause bad interactions. –  Brett Zamir Feb 13 '14 at 4:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.