Browser parse HTML for jQuery without loading resources

Question

Is it possible to pass HTML to a browser through JavaScript and parse it with jQuery, but not load external resources? (scripts, images, flash, anything)

I will do with the XML parser if that is the best I can do, but I would like to allow loose HTML if possible.

It must be compatible with Chrome, Firefox, the latest IE.

I solved the issue.. you can adapt this into replacing the src for any tags http://stackoverflow.com/questions/6671461/replace-img-elements-src-attribute-in-regex — samccone, Jul 12 '11 at 22:48
Since I do not control the source HTML, and there are too many tricky hacks, I cannot accept a regex answer. Sorry. Additionally, it makes sense that scripts should not be executed since they may decide to load external resources on their own. — 700 Software, Jul 13 '11 at 00:43
2021 - ten years later I'm acing the same problem. Using document.createElement will load resources like images in the background.. I use a temporary DOMParser to avoid this (https://developer.mozilla.org/en-US/docs/Web/API/DOMParser). — A.J.Bauer, Jul 12 '21 at 06:09

Kyle Macey · Accepted Answer · 2012-02-02T00:03:16.993

1

var html = someHTML; //passed in html, maybe $('textarea#id').val();? I don't understand what you mean by 'passed in html'
var container = document.createElement('div');
container.innerHTML = html;
$(container).find('img,embed,head,script,style').remove();
//or
$(container).find('[src]').remove();

var target = someTarget; //place to put parsed html
$(container).appendTo($(target));

EDIT

Tested working

removeExt = function(cleanMe) {
    var toScrutinize = $(cleanMe).find('*'); //get ALL elements
    $.each(toScrutinize, function() {
      var attr = $(this)[0].attributes; //get all the attributes
      var that = $(this); 
      $.each(attr, function(){
          if ($(that).attr(this.nodeName).match(/^http/)) {//if the attribute value links externally
           $(that).remove(); //...take it out  
          } 
      })
    })
    $('script').remove(); //also take out any inline scripts
}

var html = someHTML;
var container = document.createElement('div');
container.innerHTML = html;
removeExt($(container));
var target = someTarget;
$(container).appendTo($(target));

This will match src, href, link, data-foo, whatever... No way to link externally. http and https are both matched. inline scripts are killed. If it's still a security concern, then maybe this should be done server side, or obfuscate your JS.

edited Feb 02 '12 at 00:03

answered Feb 01 '12 at 23:16

Kyle Macey

8,074
2
38
78

Interesting solution, but not particularly good for security. Sorry, it looks like the answer is "it can't be done without a blacklist". – 700 Software Feb 01 '12 at 23:17
By external, do you mean always hosted on a domain other than the domain of that of the script? Or do you mean any element that could not be depicted in a single HTML file? – Kyle Macey Feb 01 '12 at 23:25
I don't want any network activity to be performed when the parse occurs, and I don't want any scripts to run. – 700 Software Feb 01 '12 at 23:32
Edited. I hope this matches what you're looking for – Kyle Macey Feb 02 '12 at 00:03
Looks like the best bet, though I would use a whitelist instead of a blacklist. – 700 Software Feb 02 '12 at 14:32
This solution is not secure e.g. pass in jQuery selector / parseHTML method wont stop image loads and certain scriptable attacks. – ZeroGravityChimp Mar 03 '15 at 22:26

Browser parse HTML for jQuery without loading resources

1 Answers1

Linked