I am able to get the following JS to create IFRAME and add it to the page.

The issue is if I create JS method on the page and ivoke it on a button click it works. But when I try to inject the same JS into the page url via setting the location.href it does not work the right way , rather it replaces the existing page with a new iframe.

Here is my code:

location.href = "javascript:ifrm = document.createElement('IFRAME');ifrm.style.width = 60+'px';ifrm.style.height = 40+'px';document.body.appendChild(ifrm);";

I am able to get the following JS to create IFRAME and add it to the page.

The issue is if I create JS method on the page and ivoke it on a button click it works. But when I try to inject the same JS into the page url via setting the location.href it does not work the right way , rather it replaces the existing page with a new iframe.

Here is my code:

location.href = "javascript:ifrm = document.createElement('IFRAME');ifrm.style.width = 60+'px';ifrm.style.height = 40+'px';document.body.appendChild(ifrm);";

• javascript

• 3 Why are you trying to do this with location.href? Some background on what you are trying to achieve would help - it doesn't make a lot of sense to use "javascript:" in location.href, but maybe I'm missing something - so elaborating would be useful... – Graza Commented Apr 19, 2010 at 17:34
• Why not just execute that code directly? There's no need (based on what we can see) that you can't just add the frame w/o using the javascript: directive – Christopher Tarquini Commented Apr 26, 2010 at 3:42
• This pletely screams of a malicious code injection. – austin cheney Commented Apr 26, 2010 at 13:34
• 1 @austin cheney it also screams bookmarklet to me. Often developers want to allow a user to do something on someone else's page, a bookmarklet is a good way to do this. Just because you are mucking around in someone else's page, doesn't necessarily mean your doing something malicious. Granted your statement is also very valid. – aepheus Commented Apr 26, 2010 at 17:05
• @aepheus I would rather have security than the possibility of a bookmarklet that lets somebody inject malicious code across a webpage to steal and beacon personal data out. – austin cheney Commented Apr 26, 2010 at 18:23

3 Answers 3

You have to wrap it in a function...

location.href = "javascript:(function () {ifrm = document.createElement('IFRAME');ifrm.style.width = 60+'px';ifrm.style.height = 40+'px';document.body.appendChild(ifrm);})()";

...although you can simply replace the location.href change with the actual code:

ifrm = document.createElement('IFRAME');
ifrm.style.width = 60+'px';
ifrm.style.height = 40+'px';
document.body.appendChild(ifrm);

What Casey said... Or you could put a "void 0;" at the end of the script...

location.href = "javascript:ifrm = document.createElement('IFRAME');ifrm.style.width = 60+'px';ifrm.style.height = 40+'px';document.body.appendChild(ifrm); void 0;";

(I assume you're not actually doing this with location.href, but actually by typing/pasting into the url bar, or creating a bookmarklet... I used to get hit with this a lot when typing javascript into the url bar...)

Anyway, the key thing to note is that if you set the location (by any of those three methods) to a javascript url, and the last statement returns something, the document body is set to that object. In your code, the last line is document.body.appendChild(ifrm) and appendChild() returns the ifrm object. In my suggested answer, the last statement is a void, so the document body isn't replaced. In Casey's suggestion, the function doesn't have a return statement, so it's a void function, and the document body is also not replaced.

To get an idea of what's happening, try this instead:

location.href = "javascript:ifrm = document.createElement('IFRAME');ifrm.style.width = 60+'px';ifrm.style.height = 40+'px';document.body.appendChild(ifrm); 'Hello world';";

or for some variability in the oute

location.href = "javascript:ifrm = document.createElement('IFRAME');ifrm.style.width = 60+'px';ifrm.style.height = 40+'px';document.body.appendChild(ifrm); confirm('Pick one');";

Assuming the string is saved in the variable mystring:

Method 1:

eval( mystring.replace("javascript:", "") );

Method 2 (if you want to keep the "javascript:"):

function clickLink(link) {
    var cancelled = false;

    if (document.createEvent) {
        var event = document.createEvent("MouseEvents");
        event.initMouseEvent("click", true, true, window,
            0, 0, 0, 0, 0,
            false, false, false, false,
            0, null);
        cancelled = !link.dispatchEvent(event);
    }
    else if (link.fireEvent) {
        cancelled = !link.fireEvent("onclick");
    }

    if (!cancelled) {
        window.location = link.href;
    }
}

var link = document.createElement("a");
link.src = mystring;

clickLink(link);