How to escape a JSON object to feed into a JavaScript function?

Question

Really struggling with this one! I'm building an Android and iPhone application that shows a WebView ( UIWebView on iOS). The WebView has an HTML page loaded in it which contains a simple JavaScript function defined as follows:

function parseJson(input)
{
  alert("start of parseJson(...) JavaScript method");
  var parsedJson = JSON.parse(input);
  alert("end of parseJson(...) JavaScript method");
}

What I want to do is to call my parseJson(input) JavaScript function from the Android/iOS client passing in a string as the input parameter. This is done as follows for Xamarin.Android:

string json = "{}"
myWebView.LoadUrl ("javascript:parseJson(\"" + json + "\")"));

And as follows for Xamarin.iOS:

string json = "{}"
myWebView.EvaluateJavascript ("parseJson(\"" + json + "\")");

Up to here, this works fine. No problem. The JavaScript function is called and executes. Also, I know I have to double-escape the quotation-mark character in my string , as follows:

string json = "{\\\"key\\\":\\\"value\\\"}";

This also works fine. The JavaScript function is called and executes. Double escaping "\\r" and "\\n" (to "\\\\\\r" and "\\\\\\n" ) also works. However, if the JSON string contains a "\\\\" , "\\b" , "\\t" or "\\f" , then the JSON.parse(...) call in my JavaScript function falls over (even if the character is double-escaped).

Any ideas on how I can reliably escape my JSON string from within the client before I feed it into my JavaScript function?

Answer 1

Turns out I have to escape the parameters to be fed into my JavaScript function something as follows:

string EscapeJavaScriptFunctionParameter(string param) {
  char[] chars = param.ToCharArray();

  StringBuilder sb = new StringBuilder ();

  for (int i = 0; i < chars.Length; i++)
  {
    switch (chars [i]) {
    case '\\':
      sb.Append ("\\\\");
      break;
    case '\n':
      sb.Append ("\\n");
      break;
    case '\r':
      sb.Append ("\\r");
      break;
    case '\b':
      sb.Append ("\\b");
      break;
    case '\f':
      sb.Append ("\\f");
      break;
    case '\t':
      sb.Append ("\\t");
      break;
    default:
      sb.Append (chars[i]);
      break;
  }

  return sb.ToString ();
}

This is not a complete escape method but just demonstrates how to escape the most common JavaScript special characters.

Using this method, I call my JavaScript function from my Android project as follows:

string json = "{\"key\":\"value\"}";
string escapedJson = EscapeJavaScriptFunctionParameter(json);
myWebView.LoadUrl ("javascript:parseJson(JSON.stringify(" + escapedJson + "))");

And from my iOS project as follows:

string json = "{\"key\":\"value\"}";
string escapedJson = EscapeJavaScriptFunctionParameter(json);
myWebView.EvaluateJavascript ("parseJson(JSON.stringify(" + escapedJson + "))");

Answer 2

What happens if you try something like: (or for cases that don't work for you)

myWebView.EvaluateJavascript("parseJson('{\"key\":\"value\"}')");

JSON.stringify() looks useful too in your case:

myWebView.EvaluateJavascript("parseJson(JSON.stringify({key:value}))");