Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Running a script within and iframe

    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]
    Last edited by DigitalHelix; 03-10-2012 at 09:17 PM.

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Code:
    <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.

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Tried, but same results

    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

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    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";}
    ?>

  • Users who have thanked DaveyErwin for this post:

    DigitalHelix (03-13-2012)

  • #5
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile Excellent!

    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?

  • #6
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up Solved

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •