HTML.innerHTML vs Jquery.html() - Javascript execution

Question

Ref: html() vs innerHTML jquery/javascript & XSS attacks

From this, I can infer that, Jquery extracts the <script> tags and execute separately in DOM, it doesn't appear in DOM.

Consider the following HTML code:

a = <iframe><iframe //><script>alert(1)</script>

b = <iframe><iframe> //<script>alert(1)</script>

As of the code in a, body.innerHTML = a; doesn't execute the script, but $("body").html(a); does.

Why? Jquery's .html() execute the content after // but .innerHTML = doesn't?

If it is so, why b inside either .innerHTML = or .html() doesn't get executed?

Update: For a demo, open up console, and execute this:

document.body.innerHTML = "<iframe><iframe //><script>alert(1)</script>"
$("body").html("<iframe><iframe //><script>alert(1)</script>");

1 will not execute alert(), but 2 will. Replace the HTML values with b. Neither will get executed.

Update 2: From what I can determine that the HTML code will get executed in Jquery's body() but not in .innerHTML=?

@BharatPatidar I know it's wrong. But, for this malformed HTML code, why this difference between .innerHTML() and Jquery's .html()? — verstappen_doodle, Nov 14 '16 at 07:44
[Difference between innerHTML and .html() from jQuery](http://stackoverflow.com/questions/5390542/difference-between-innerhtml-and-html-from-jquery) — prasanth, Nov 14 '16 at 07:46
@prasad That doesn't answer the second part. Why `b` and `c` doesn't execute with .html()? — verstappen_doodle, Nov 14 '16 at 07:51
yes..i don't give any answer for you.just comment with related topics of your question. — prasanth, Nov 14 '16 at 07:54
@mrid I meant to ask, why `b` and `c` doesn't execute when `a` executes with `.html()`? — verstappen_doodle, Nov 14 '16 at 07:59
you still should fix your markup. even if the behavior doesn't change by fixing it. a valid markup is important. — Tommy Schmidt, Nov 14 '16 at 08:24
In case b) <iframe> //<script>alert(1)</script> , the // are outside any tag, try putting them inside a tag like <div><iframe><iframe> //<script>alert(1)</script>
@TommySchmidt I get that. I understand this markup is invalid. I just want to know why this different behaviour with `.html()`. — verstappen_doodle, Nov 14 '16 at 08:36
this could be the reason why the behavior is different. i dont know exactly how jquerry handles that string. maybe it is parsing it when it is inserted and the markup error is causing your issue. normally i would test it before posting such a comment but i am on my phone right now. so maybe you should try that out. i could be totally wrong tho. — Tommy Schmidt, Nov 14 '16 at 08:40
@Netham I have removed `c` now. Some error in my console due to XSS filters I use, seems `c` executes in .html(). And, `b` **doesn't** seem to execute when put inside `
`. — verstappen_doodle, Nov 14 '16 at 08:46

Grundy · Accepted Answer · 2016-11-14T10:03:29.863

If go a bit deeper in jQuery source code, we can find html method.

In this method exist next line

this.empty().append( value );

If now go to append, we can find next

append: function() {
    return domManip( this, arguments, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            var target = manipulationTarget( this, elem );
            target.appendChild( elem );
        }
    } );
}

So, now find domManip. Inside this function from html-string builded fragmen, and if fragment have script tag execute next code

DOMEval( node.textContent.replace( rcleanScript, "" ), doc );

Where DOMEval

function DOMEval( code, doc ) {
    doc = doc || document;

    var script = doc.createElement( "script" );

    script.text = code;
    doc.head.appendChild( script ).parentNode.removeChild( script );
}

So, at least, we find place where execute scripts.

So, why in some case html run script and otherwise not?

This depends on input string and what return buildFragment function.

Inside buildFragment we can found next line

tmp.innerHTML = wrap[ 1 ] + jQuery.htmlPrefilter( elem ) + wrap[ 2 ];

where elem is input string, and jQuery.htmlPrefilter is next function

htmlPrefilter: function( html ) {
    return html.replace( rxhtmlTag, "<$1></$2>" );
}

so, input string just replaced with some regular exporession rxhtmlTag.

rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^\/\0>\x20\t\r\n\f]*)[^>]*)\/>/gi,

So, just try this for checking string:

console.log(jQuery.htmlPrefilter("<iframe><iframe //><script>alert(1)</" + "script>"));
console.log(jQuery.htmlPrefilter("<iframe><iframe> // <script>alert(1)</" + "script>"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>

So, in first case as result was

<iframe><iframe /></iframe><script>alert(1)</script>

And after insert it as innerHTML in tmp div, inside div create two elements: iframe and script. So after this script available for finding and executing

In second case:

<iframe><iframe> // <script>alert(1)</script>

String not changed, and after insert it as innerHTML in tmp div, inside div create just one iframe element with encoded content. That's why in this case script not execute.

Although interesting, this is also stated in the documentation quite clearly: _By design, any jQuery constructor or method that accepts an HTML string — jQuery(), .append(), .after(), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, )_ — Mackan, Nov 14 '16 at 09:02
it answers why it executes the a, but still hasn't answer the OP's real question, why `$("body").html("<iframe><script>alert(1)</script>");` doesn't execute the alert? — elfan, Nov 14 '16 at 09:06
@elfan, i get next error for this code _Uncaught SyntaxError: Invalid or unexpected token_ — Grundy, Nov 14 '16 at 09:08
@Grundy, me too, I don't know why, but when I retyped it, it doesn't have syntax error anymore — elfan, Nov 14 '16 at 09:11
I cannot edit my comment the second time. The OP's real question is, why `$("body").html("<iframe>//<script>alert(1)</script>");` doesn't execute the script? — elfan, Nov 14 '16 at 09:25
@elfan, i found answer in this line: `tmp.innerHTML = wrap[ 1 ] + elem.replace( rxhtmlTag, "<$1>$2>" ) + wrap[ 2 ];` in one case replace wrap all in `iframe` tag, and script and other tags inside iframe encoded, and in other case, in iframe just `` and script append as is, so it available next for finding and executing — Grundy, Nov 14 '16 at 09:38
@elfan, i'm update answer. In you answer you quite right but not think about preprocess input html string — Grundy, Nov 14 '16 at 10:20
yes, you're right, and it made me more sure about my answer. In `rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:-]+)[^>]*)\/>/gi,` it says that any other tag with `` will be considered as `` just like `
`, ``, etc. — elfan, Nov 14 '16 at 10:40

elfan · Answer 2 · 2016-11-14T09:46:47.333

2

I think here what's happened

<iframe>//<script>alert(1)</script>

is not executed because //<script>alert(1)</script> is considered as the contents of <iframe> tag (that is not closed yet). As we know, the contents of the iframe gets ignored (it is only processed by browsers that don't support iframe).

While

<iframe//><script>alert(1)</script>

is executed because <iframe//> is considered as <iframe /> which may be interpreted as finished/closed tag just like <br /> (at least in Chrome, FF, Edge, and IE). Now that the iframe element is finished/completed, the next element (<script>alert(1)</alert>) gets processed.

edited Nov 14 '16 at 09:46

answered Nov 14 '16 at 09:21

elfan

1,131
6
11

I am more sure of my answer, after seeing the inner working of jquery code as shown in the asnwer by @Grundy, see my comment below it. – elfan Nov 14 '16 at 10:42

Netham · Answer 3 · 2016-11-14T09:27:40.937

Let's see first what gets executed, apart from what you mentioned

$("body").html("<iframe//> <script>alert(1)</script>");
$("body").html("<iframe//> // <script>alert(1)</script>");
$("body").html("<iframe><iframe//> <script>alert(1)</script>");
 $("body").html("<iframe><iframe><iframe><iframe//> <script>alert(1)</script>");

Then what doesn't gets executed

$("body").html("<iframe> <script>alert(1)</script>");
$("body").html("<iframe><iframe><iframe> <script>alert(1)</script>");

In the second example from what works you can see it's not the // which is causing the issue. So it can be clearly observed in cases which iframe tag is left opened the script doesn't execute.

As I mentioned in the comments before ( I forgot to include it here ), if iframe tag is closed then the script gets executed as it is in the reference of the current page.

Update:

If you run this

$("body").html("<iframe> <script>alert(1)</script> ");

and check the innerHTML of the iframe, it shows

&lt;div&gt;Hi&lt;/div&gt; '&lt;script&gt;alert(1)&lt;/script&gt;'

which explains why the script is not getting executed.

HTML.innerHTML vs Jquery.html() - Javascript execution

3 Answers3