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 stackoverflow.com/questions/6671461/… — samccone
– samccone, Commented Jul 12, 2011 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
– 700 Software, Commented Jul 13, 2011 at 0: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 (developer.mozilla.org/en-US/docs/Web/API/DOMParser). — A-J-Bauer
– A-J-Bauer, Commented Jul 12, 2021 at 6:09

Kyle Macey · Accepted Answer · 2012-02-02 00:03:16Z

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 2, 2012 at 0:03

answered Feb 1, 2012 at 23:16

Kyle Macey

8,1543 gold badges40 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

700 Software Over a year ago

Interesting solution, but not particularly good for security. Sorry, it looks like the answer is "it can't be done without a blacklist".

Kyle Macey Over a year ago

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?

700 Software Over a year ago

I don't want any network activity to be performed when the parse occurs, and I don't want any scripts to run.

Kyle Macey Over a year ago

Edited. I hope this matches what you're looking for

700 Software Over a year ago

Looks like the best bet, though I would use a whitelist instead of a blacklist.

|

Collectives™ on Stack Overflow

Browser parse HTML for jQuery without loading resources

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related