User input to a hidden tag, how to encode?

[csdude55]

This feels like it should be common sense to me, but it's been awhile since I've been here so I can't quite remember.

First, when someone is entering in a contenteditable, I'm saving it to a cookie every 30 seconds for a backup. I might change that to use Ajax and save to MySQL later, but for now it's a cookie.

Then when they load the page, I read whatever they had typed to a variable. It can be full of HTML tags, quotes, etc. So:

if (!$comment && $_COOKIE[$saveName])
 $comment = $_COOKIE[$saveName];

Then later in the PHP, I set this as the value to a hidden tag, and each time the user blurs their contenteditable it updates that hidden tag (via Javascript) so that I can send it to the processing script when the user submits. Eg:

<input type="hidden" name="commentVal" value="$comment">

But the question is, how should I encode $comment before using it in the hidden tag? addslashes(), urlencode(), htmlentities()... other?

[Dimitri]

I think the proper function to use is "htmlspecialchars" : [php.net...]

Be careful while using cookie to store user input, cookie length is limited to 4096 bytes (including the time stamp, domain and parameters). Usually, with contenteditable, when the user click on the submit button, a piece of javascript will retrieve the input, and store it into a hidden field.

[csdude55]

I think the proper function to use is "htmlspecialchars" : [php.net...]

Haha, of course it was a 4th one I hadn't considered! lol Thanks :-)

Be careful while using cookie to store user input, cookie length is limited to 4096 bytes (including the time stamp, domain and parameters). Usually, with contenteditable, when the user click on the submit button, a piece of javascript will retrieve the input, and store it into a hidden field.

Yeah, that size limit was my concern, too. I'm auto-saving the data so that if they leave and come back for whatever reason then they won't lose everything they've tied... it's not a common issue, but even I've accidentally closed the tab, had a browser just close for no apparent reason. And remember a few years ago when Adsense banners were causing unexpected redirects?

Saving it to a cookie is quick and easy, but I'm probably going to have to build a more complex system that can save it to MySQL.

[robzilla]

that size limit was my concern, too

Maybe use LocalStorage when the client supports it.

[csdude55]

That's awesome, Rob, thanks! I didn't even know that existed. It looks like it's supported by IE8+ and virtually all versions of Chrome and FF, but with no real limit on the data that can be stored.

Here's the autosave code that I'm using now; it uses LocalStorage if it can, or sets a cookie if the browser doesn't support LocalStorage:

// Get data if it's already been saved
// variable "saveName" is created on the parent page
var comment;
if (typeof(Storage) !== 'undefined')
 comment = localStorage.getItem(saveName);

else
 // getCookie is a function I wrote several years ago
 comment = getCookie(saveName);

if (comment) {
 // #comment is the contenteditable; if the browser doesn't support it then
 // #commentText is a textarea backup
 if ($('#comment').length)
  $('#comment').html(comment);

 else
  $('#commentText').val(comment);
}

setInterval(function() {
 var commentVal;

 if ($('#comment').html())
  commentVal = $('#comment').html();

 else if ($('#commentText').val())
  commentVal = $('#commentText').val();

 if (commentVal) {
  if (typeof(Storage) !== 'undefined')
   localStorage.setItem(saveName, commentVal);

  else
   // setCookie is another function that I wrote a long time ago;
   // the "1" sets it for 1 day
   setCookie(saveName, commentVal, 1);

  // #saved is on the parent page, just a DIV that says "Saved" and
  // is set to style="display: none" by default
  $('#saved').show()
   .delay(750)
   .fadeOut(1500);
 }
}, 5000);

After the user successfully submits the post, I use this to delete it:

localStorage.removeItem(saveName);

Also, going back to the subject of the thread... I realized that I didn't need to use a hidden input for the contenteditable, after all. Instead, I'm using the textarea #commentText.

It was simple, really; I set the display of the textarea to block and the contenteditable to hidden, then I test to see if the browser supports contenteditable. If so then I hide the textarea and show the contenteditable instead. Then, when I blur the contenteditable then I just set $('#commentText').val($('#comment').html())... no need to encode anything :-)

[Dimitri]

I also didn't know about LocalStorage , thank you robzilla. And thank you csdude55 for idea of storing a copy of what a user is typing, that's good idea, I'll work on this too.