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.
Developer tools. For developers, Internet Explorer 8 includes tools that allow debugging HTML, CSS, JavaScript and VBScript within the browser.
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.
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.
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.
This is how we did it on our site about a year ago to get it working in IE. Here are the steps:
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");');
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 :-)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With