stripslashes() removes my src after iframe submission

246 views Asked by At

I have this form:

<form action="my_parse_file.php" name="myform" id="myform" method="post">
    <input placeholder="Entry Title" style="height: 25px; text-align: center; font-size: 12px; background-color: #151515; color: #B4B4B4; border: 1px solid #303030;"
        name="title" id="title" type="text" size="80" maxlength="80" />
    <br />
    <p>
        Entry Body:<br />
        <div id="wysiwyg_cp" style="padding: 8px; width: 700px; margin: 0px auto;">
            <input class="BTN2" type="button" onclick="iBold()" value="B" />
            <input class="BTN2" type="button" onclick="iUnderline()" value="U" />
            <input class="BTN2" type="button" onclick="iItalic()" value="I" />
            <input class="BTN2" type="button" onclick="iFontSize()" value="Text Size" />
            <input class="BTN2" type="button" onclick="iForeColor()" value="Text Color" />
            <input class="BTN2" type="button" onclick="iHorizontalRule()" value="HR" />
            <input class="BTN2" type="button" onclick="iUnorderedList()" value="UL" />
            <input class="BTN2" type="button" onclick="iOrderedList()" value="OL" />
            <input class="BTN2" type="button" onclick="iLink()" value="Link" />
            <input class="BTN2" type="button" onclick="iUnLink()" value="UnLink" />
            <input class="BTN2" type="button" onclick="iImage()" value="Image" />
            <input class="BTN2" type="button" onclick="iVideo()" value="Embed Video" />
        </div>
        <!-- Hide (but keep) your normal textarea and place it in the iFrame replacement for it -->
        <textarea style="display: none;" name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea>
        <iframe onload="this.contentWindow.focus()" name="richTextField" id="richTextField" style="border: 1px solid #303030; background-color: #151515; width: 700px; height: 300px;"></iframe>
        <!-- End replacing your normal textarea -->
    </p>
    <br />
    <br />
    <input name="myBtn" type="button" value="Submit Data" onclick="javascript: submit_form();" />
</form>

This is the iVideo() function:

function iVideo(){
    var vidSrc = prompt('Enter video embed code:','');
    var iframe = document.getElementById('richTextField').contentDocument;
    iframe.writeln("<br/>"+vidSrc);
}

The submit_form() function:

function submit_form(){
    var theForm = document.getElementById("myform");
    theForm.elements["myTextArea"].value =  window.frames['richTextField'].document.body.innerHTML;
    theForm.submit();
}

And this is my_parse_file.php:

<?php
    echo '<h2>You posted:</h2><hr/>'.$_POST['title'].'<hr/>'.stripslashes($_POST['myTextArea']);
?>

I go to let's say Vimeo, take the embed code of a video (which is an iframe too) and paste it into the prompt input box which pops up when I press the "Embed video" button. The video appears in my iframe on my index.php page (where I have the "richTextField" iframe) as a result of my iVideo() function, I can play it (no problem till now). Then I press the submit button and the content of my iframe appears in "my_parse_file.php", BUT without my embeded iframe from Vimeo. I looked at the source code of "my_parse_file.php" and I saw that the iframe code of the video is still there, it has all the attributes but the src attribute is empty (src=""). And that's because of the stripslashes() function which should remove the backslashes (from what I know) resulted after form submission, but it seems like this removes the link from my src attribute for some reason.

I tried to remove the stripslashes() function like this:

echo '<h2>You posted:</h2><hr/>'.$_POST['title'].'<hr/>'.$_POST['myTextArea'];

But then the src attribute looks like this:

src="\"//player.vimeo.com/video/15077261\""

And this one isn't good too.

What can I do to get a "clean" src?

Original src:

//player.vimeo.com/video/15077261

Desired output:

<iframe src="//player.vimeo.com/video/15077261" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
1

There are 1 answers

0
Victor On

I figured it out. It Seemed like that \" is the extra character that needs to be removed. So I replaced it whit nothing using str_replace();

echo '<h2>You posted:</h2><hr/>'.$_POST['title'].'<hr/>'.str_replace('\"','',$_POST['myTextArea']);