PHP+JS Code Combining

Question

Just wondering if this is okay to do? I have to store some PHP variable values into LocalStorage.

if($res->status == "success"){ echo '<script>alert("alrighty sparky! lets get you in...");</script>'; echo '<script>localStorage.setItem("token", JSON.stringify({"token": "'.$res->token.'" }))</script>'; echo '<script>localStorage.setItem("username", JSON.stringify({"username": "'.$data->username.'" }))</script>'; echo '<script>localStorage.setItem("id", JSON.stringify({"id": "'.$data->id.'" }))</script>'; $boarding_url = base_url() . 'index.php/boarding/teddies'; redirect($boarding_url); } 

Answer 1

No, it doesn't work like that because you're not escaping your PHP strings to be a safe JavaScript string. What you're doing is encoding them as JSON but if - for example - $res->token contains \ then it will produce a broken JavaScript string and JSON.stringify() won't fix it.

Correct code must use json_encode() for this purpose.

echo '<script>localStorage.setItem("id", "'.json_encode($data->id).'")</script>'; 

Also note that you don't need to repeat <script> tag each time:

echo '<script type="text/javascript">'; // Write all lines here, don't forget semicolon at the end of each one echo 'localStorage.setItem("id", "'.json_encode($data->id).'");'; echo '</script>'; 

Answer 2

As noted in the answer by Adriano Repetti, as you are outputing raw data into the javascript source, you could create invalid javascript. For example a quote in $res->token could create the following syntax error:

<script>localStorage.setItem("token", JSON.stringify({"token": "token with a " (quote)" }))</script>'; 

The SO highlighter makes this error quite obvious.

Aslo, as pointed out by Adriano, php's json_encode() takes care of this nicely.

However, whenever i find myself mixing js with a server side language, i endevour to keep the interleaving to an absolute minimum, to reduce confusion.

With that in mind, i would format the data in php, then output it a single place, creating an object that js can process:

if($res->status == "success"): $jsData = [ 'storageData' =>[ 'token' => $res->token, 'username' => $res->username, 'id' => $res->id ], 'redirectUrl' => base_url() . 'index.php/boarding/teddies' ]; ?> <script> var data = <?php echo json_encode($jsData);?>; for(var item in data.storageData){ localStorage.setItem(item, storageData[item]); } //redirect window.location.replace(data.redirectUrl); </script> <?php endif; 

(Unfortunately the SO syntax highlighter is not so clever here..)

With regards to the redirect:

redirect($boarding_url); 

Presumably this function is also outputting javascript (as a regular header redirect would be impossible at this point, as the response body has already been sent), so for clarity i included redirect in the above js block.

Additionaly, this looks like a bit of a code smell - returning a response to the browser just to set some js data then performing another request back to the server.

saving the data in session, redirecting directly to the final destination (index.php/boarding/teddies) and have that page retrieve its data from session would probably make more sense, but thats another question.