Running a script within and iframe

[DigitalHelix]

Okay, I am probably missing something totally obvious here, but I have been fiddling with this all day and can't seem to turn up a solution... and I'm getting tired!

I have a page where I want pupils to edit (HTML/JavaScript) code from a form 'textarea' and the submit to preview it in an iframe embedded on the same page, in the same way the W3C Schools website does.

Works great... until you try to do something simple like run a script from an event.

I am reasonably sure that it is something to do with the browser sandboxing it, does anyone have experience with this and how to work round it?

Simple example;
1) Pupil writes an 'hello world alert' function triggered by onClick from a form button (Click me);
2) Pupil clicks 'preview code';
3) iframe grabs the incoming POST variable (the students code) and displays the form with the 'Click me' button;
4) Pupil clicks the 'Click me' but the script fails to produce the expected alert (does nothing).

I have tried everything I can think of including trying the experimental HTML5 sandbox flags to allow forms and scripts, but no joy.

UPDATE: The code runs fine in IE and FF, but fails in Chrome, Opera and Safari.

'Parent' Code (Simplified):
[CODE]
<form action="result.php" method="post" target="codeView" id="codeForm">
<textarea id="codeInput" name="codeInput">
<?php include("lessoncode.php"); // pulls in and displays the sample lesson code ?>
</textarea>
<input name="submit" type="submit" value="Run your code">
</form>
[CODE]

iframe Code (Simplified):
[CODE]
<iframe frameborder="0" name="codeView" src="result.php"></iframe>
[CODE]

Result.php (Simplified):
[CODE]
<?php
if(isset($_POST["codeInput"])){
$outputcode = $_POST["codeInput"];
print_r ($outputcode);
}
else {echo "Your code will execute in this window";}
?>
[CODE]

[DaveyErwin]

<form action="php.php" method="post" target="codeView" id="codeForm">
<textarea cols=40 name="codeInput"> 
<button onclick="alert('x')"></button>
</textarea>
<input name="submit" type="submit" value="Run your code">
</form>

<iframe frameborder="0" name="codeView" src="php.php"></iframe>

PHP Code:

<?php
if(isset($_POST["codeInput"])){
echo $_POST["codeInput"];
}
else {echo "Your code will execute in this window";}
?>

This works on my server.

[DigitalHelix]

Hi Davey,
Thanks, but I am still getting the same results...
It works fine in FF & IE but not joy in Safari, Chrome or Opera.
I have been staring at this problem for many hours now; I am off to get some sleep and come at it fresh tomorrow.

I need this to be cross-browser but I just can't find any references about how to do it. I have a dreadful feeling that the solution is going to be obvious but I am just not seeing it....

Any further input welcomed!
Jason

[DaveyErwin]

this is how I made it work with chrome browser

PHP Code:

<?php
if(isset($_POST["codeInput"])){
header('X-XSS-Protection: 0');
echo $_POST["codeInput"];
}
else {echo "Your code will execute in this window";}
?>

[DigitalHelix]

This solution works perfectly in all browsers now.


However, I was looking for a solution that didn't leave the page open to an XSS attack.

That being said, I can lock down the pages ability to inherit or interact with anything on another server.

I am kind of stumped at the moment for any other ideas that would work (other than using an iframe).

Any further thoughts that might help?

[DigitalHelix]

I have decided to go with this solution.

I have written a stack of functions to strip unsafe code from the form input (which I needed to do anyway!) and a bunch of functions to prevent the result.php attempting to talk to anything else other than the incoming string.

I have also locked down trying to pass bad variables.
I tried injecting SQL, XSS and malicious script and it stopped the lot.