Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I inject javascript to a page on IE 8?

Lets suppose that I have the following markup:

<div id="placeHolder"></div>

and I have a JavaScript variable jsVar that contains some markup and some JavaScript.

By using Mootools 1.1 I can inject the JavaScript content into the placeholder like this:

$('placeHolder').setHTML(jsVar);

This works in Firefox, Opera, and even Safari and the resulting markup looks like this:

<div id="placeHolder">
    <strong>I was injected</strong>
    <script type="text/javascript">
        alert("I was injected too!");
    </script>
</div>

However, on IE 8 I get the following:

<div id="placeHolder">
    <strong>I was injected</strong>
</div>

Is there any way to inject the JavaScript on IE 8 or does it security model forbid me from doing this at all?

I tried Luca Matteis' suggestion of using

document.getElementById("placeHolder").innerHTML = jsVar;

instead of the MooTools code and I get the same result. This is not a MooTools issue.

like image 806
adolfojp Avatar asked Apr 01 '09 01:04

adolfojp


People also ask

Does IE 8 support JavaScript?

Developer tools. For developers, Internet Explorer 8 includes tools that allow debugging HTML, CSS, JavaScript and VBScript within the browser.

How do I enable JavaScript on IE?

Internet ExplorerClick Tools > Internet Options. Click the Security tab > Custom Level. In the Scripting section, click Enable for Active Scripting. In the dialog box that displays, click Yes.

Can we insert JavaScript into any webpage loaded in the browser?

You cannot inject JavaScript into the server side of a target web page without doing something illegal if you don't have consented access to it already.


3 Answers

This MSDN post specifically addresses how to use innerHTML to insert javascript into a page. You are right: IE does consider this a security issue, so requires you to jump through certain hoops to get the script injected... presumably hackers can read this MSDN post as well as we can, so I'm at a loss as to why MS considers this extra layer of indirection "secure", but I digress.

From the MSDN article:

<HTML>
<SCRIPT>
function insertScript(){
    var sHTML="<input type=button onclick=" + "go2()" + " value='Click Me'><BR>";
    var sScript="<SCRIPT DEFER>";
    sScript = sScript + "function go2(){ alert('Hello from inserted script.') }";
    sScript = sScript + "</SCRIPT" + ">";
    ScriptDiv.innerHTML = sHTML + sScript;
}    
</SCRIPT>
<BODY onload="insertScript();">
    <DIV ID="ScriptDiv"></DIV>
</BODY>
</HTML>

If at all possible, you may wish to consider using a document.write injected script loading tag to increase security and reduce cross-browser incompatibility. I understand this may not be possible, but it's worth considering.

like image 118
Jarret Hardie Avatar answered Dec 03 '22 15:12

Jarret Hardie


This is how we did it on our site about a year ago to get it working in IE. Here are the steps:

  • add the HTML to an orphan DOM element
  • search the orphan node for script tags (orphan.getElementsByTagName)
  • get the code from those script nodes (save for later), and then remove them from the orphan
  • add the html leftover that is in the orphan and add it to the placeholder (placeholder.innerHTML = orphan.innerHTML)
  • create a script element and add the stored code to it (scriptElem.text = 'alert("my code");')
  • then add the script element to the DOM (preferably the head), then remove it
function set_html( id, html ) {
    // create orphan element set HTML to
    var orphNode = document.createElement('div');
    orphNode.innerHTML = html;

    // get the script nodes, add them into an arrary, and remove them from orphan node
    var scriptNodes = orphNode.getElementsByTagName('script');
    var scripts = [];
    while(scriptNodes.length) {
        // push into script array
        var node = scriptNodes[0];
        scripts.push(node.text);

        // then remove it
        node.parentNode.removeChild(node);
    }

    // add html to place holder element (note: we are adding the html before we execute the scripts)
    document.getElementById(id).innerHTML = orphNode.innerHTML;

    // execute stored scripts
    var head = document.getElementsByTagName('head')[0];
    while(scripts.length) {
        // create script node
        var scriptNode = document.createElement('script');
        scriptNode.type = 'text/javascript';
        scriptNode.text = scripts.shift(); // add the code to the script node
        head.appendChild(scriptNode); // add it to the page
        head.removeChild(scriptNode); // then remove it
    }   
}

set_html('ph', 'this is my html.  alert("alert");');
like image 21
howardr Avatar answered Dec 03 '22 14:12

howardr


I have encountered the same issues with IE8 (and IE7) The only way I could dynamically inject a script (with an src) is by using a timer:

source = "bla.js";

setTimeout(function () {
            // run main code
            var s = document.createElement('script');
            s.setAttribute('src', source);
            document.getElementsByTagName('body')[0].appendChild(s);
        }, 50);

If you have inline code you would like to inject, you can drop the timer and use the "text" method for the script element:

s.text = "alert('hello world');";

I know my answer has come pretty late; however, better late than never :-)

like image 30
Abdo Avatar answered Dec 03 '22 15:12

Abdo