Question

I have a form with fields and a text-area that allows any characters to be entered. I can’t just submit the form, because the form is being recycled many times over, so the form values are being stored in associative arrays:

<form name='Theform'>

    <input type="text" id="VISITOR_DETAILS_NAME" value="Joe">
    <input type="text" id="VISITOR_DETAILS_SIZE" value="Large">
    <textarea id='VISITOR_DETAILS_INFO'>
       User can enter anything here including double " and single ' quotes
    </textarea>
<input type="hidden" name="package" id="package" value="" />

</form>

The text-area value are stored in a JavaScript array along with the other form values:

myArray[0]['VISITOR_DETAILS_NAME'] = document.getElementById('VISITOR_DETAILS_NAME').value;
myArray[0]['VISITOR_DETAILS_SIZE'] = document.getElementById('VISITOR_DETAILS_SIZE').value;
myArray[0]['VISITOR_DETAILS_INFO'] = document.getElementById('VISITOR_DETAILS_INFO').value;

I end up with an array something like this:

{
VISITOR_DETAILS_NAME : "Joe",
VISITOR_DETAILS_SIZE : "Large",
VISITOR_DETAILS_INFO : "User can enter anything here including double " and single ' quotes"
};

I then pass this JavaScript array to the hidden form field using JSON.stringify and then POST this to PHP:

document.getElementById('package').value = JSON.stringify(myArray[0]);
Theform.submit();

(For now I’m just posting to an iframe to test that the JSON is passing the JavaScript arrays properly through POST).

When I get it on the PHP side – it seems good to go. It looks like the JSON.stringify has added the backslash to the double quote (\” ) – and now I want to store the values in MySQL. But I want to first test that I can send/reconstruct the JSON back to the javascript as an array – so I try this:

parent.myArray[0] = JSON.parse('<?php echo $_POST['package']; ?>');

I get an ERROR: SyntaxError: Expected token ‘)’ OR SyntaxError: missing ) after argument list

---

This is strange to me – because when I try it without POSTING – It seems to work fine like this:

document.getElementById('package').value = JSON.stringify(myArray[0]);

now if I try to just pass back the stringified value back to the array

myArray[0] =  JSON.parse(document.getElementById('package').value);

– it seems to work fine – no errors

---

QUESTIONS:

• Why am I getting this error when trying to reconstruct the ARRAY from the
  POSTED JSON.stringify() value?
• Do I save this JSON.stringify() value in MySQL as is?
• Or do I PHP json_decode() it first?

I want to grab the form data – handle it properly – store it in MySQL and then read it back into the form when I need it.

Thanks All 🙂

Answer 1

parent.myArray[0] = JSON.parse('<?php echo $_POST['package']; ?>');

Here you are are trying to convert a JSON text into an HTML representation of a JavaScript string representation of a JSON text, but you aren’t doing anything to escape it for either.

If you have any ' characters in the JSON data, then they will terminate the JavaScript string.

If you have any " characters in the JSON data, then they will be represented as \", but \" is a JavaScript string representation of ". Since you don’t do anything to escape the text you put in the JS string, the slash character will be consumed by the JavaScript parser and will be gone before it reached the JSON parser.

If you want to convert data for placing in a JavaScript string then you need to escape it.

However, JSON is a subset (almost) of JavaScript. So the process of converting a JSON text to a JavaScript string so it can be parsed into a JavaScript object is over-complicated. You can skip that can just go straight to:

<script>
var foo = <?php echo $json; ?>
</script>

However, since you are taking in the JSON from the client, echoing out directly will expose you to XSS attacks. In order to deal with this you should filter the data on the server.

This will:

• Fail to parse any invalid JSON and so not output bad JSON (but it might output nothing, giving you a JSON syntax error, you should apply tests to see if the parse was successful and output a sensible default case if it fails).
• Convert any </script> in the data to <\/script> making it safe to place in a script element (because that is how PHP’s json_encode works

Such:

<!-- I don't do PHP, this is untested -->
<script>
var foo = <?php
    $unsafe_json = $_POST['package'];
    $data_structure = json_parse($unsafe_json);
    $safe_json = json_encode($data_structure);
    echo $safe_json;
?>;
</script>

---

Do I save this JSON.stringify() value in MySQL as is? Or do I PHP json_decode() it first?

That depends on what you intend to do with the data. In general when putting things into a database it is a good idea to extra the data from the data format and normalize it. That way you can run queries over it.

If you are only going to store the data and then retrieve it, you might be able to get away with not doing that and storing strings of JSON in the database. That loses you a lot of flexibility though and might bite you in the future.