CODEWITHSUNDEEP
phpjavascripthtmlurlencode
Varun Kakumani
Varun Kakumani

Reputation: 117

How to send post data which contains php source with symbols like (+, *, /, -) and writing that data to a file using ajax request?

So the complete scenario is, i am making a web application that looks like w3schools "Try it yourself!" option. But as of now leaving about security and making the core part of the web application.

My logic is :

  1. Taking input from the user with textarea and sending that data using POST method in ajax request.
  2. Now in a PHP file (to which ajax sent the request), i am writing that posted content to another PHP file and using system function executing that PHP code and again writing generated html to a .htm file.
  3. Now in the file where the ajax request sent (first file), i am using iframe of the output of .htm file in the javascript and refreshing it.

Problem is :

Everything worked fine with codes containing echo, system functions. But when we use any symbols like '+' the posted data is converting to html url decoding.

<?php
  echo "Hello, world";
?>

The above code works fine.

<?php
  $a = 10;
  $b = 20;
  echo $a+$b;
?>

Its not working. The above code is when checked in the PHP written file (to which i am writing from POST data), it is written like:

<?php
  $a = 10;
  $b = 20;
  echo $a $b;
?>

'+' symbol is converting to space. I guess that the data is decoded into normal html entity. Is there a better logic for this entire thing and also how to solve this problem. Please help me guys.

File that is sending textarea code using ajax request:

<title>Html Black Box</title>
<style>
    textarea{ 
    font-family: courier; font-size: 15px; height: 100%; width: 100%;}
    input {width: 100%; height: 100%; font-size: 40px;}
    iframe {width: 100%; height: 100%; }
</style>
<script>
function update(){
document.getElementById('tdop').innerHTML = "<img src=ajx_ima.gif>";
var form = document.getElementById('code_text').value;
var xmlhttp;
    if (window.XMLHttpRequest)
      xmlhttp=new XMLHttpRequest();
    else
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

xmlhttp.open("POST", "process_php.php", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.onreadystatechange=function()
  {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var res = xmlhttp.responseText;
    document.getElementById('tdop').innerHTML = "<iframe src=out_php.htm id=out></iframe>";
    }

  }
    xmlhttp.send("code="+form);
}
</script>
<table border=0>
<tr>
<td>
    <textarea id="code_text" style="resize: none;"></textarea>
</td>
<td id="tdop">
    <iframe src="blank.htm" id="out" frameBorder="1"></iframe>
</td>
</tr>
<tr><td colspan="2" align="center"><input type="button" value="Update Page" onclick="update()"></td></tr>
</table>

File that writes the received data

<?php
$stringData = ''.isset($_POST['code']) ? $_POST['code'] : '';
$myFile = "buf_php.php";
$fh = fopen($myFile, 'w+');
file_put_contents($myFile, $stringData);
fclose($fh);
$myFile = "out_php.htm";
system("php buf_php.php > $myFile");
echo $stringData;
?>

Upvotes: 1

Views: 1687

Answers (1)

stUrb
stUrb

Reputation: 6842

You're sending your 'code' from your textarea directly through a post request. Special characters will than be processed as is it a url.

To bypass this, you will have toe encode those special characters in javascript with the encodeURIComponent() function which escapes all characters except the following: alphabetic, decimal digits, - _ . ! ~ * ' ( )

....
 // var form = document.getElementById('code_text').value; //old line
 var form = encodeURIComponent(document.getElementById('code_text').value)
....

That will fix everything but the +-sign. So you'll have to do a replace of + with "%20"

...
 var form = encodeURIComponent(document.getElementById('code_text').value);
 form = form.replace('+','%20');
....

You say you want to replace the * to. The former URL gives you a 'fixed' function which replaces those to:

function fixedEncodeURIComponent (str) {
    return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}

Upvotes: 3

Related Questions