Question

I am learning JQuery with a MVC3 book. I find that Json data is really easy to use, but it may not be safe.

Consider the scenario, say, I got a CRM with senstive customer infomation. Ajax returns Json array as search results. The search textbox ajax autocomplete also return Json array of senstive keywords from database. etc…They all use GET method.

However, it is said that GET method has vulnerabilities when passing around Json array data:

http://haacked.com/archive/2009/06/25/json-hijacking.aspx

http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx

How do you JQuery experts out there go about fixing this issue? Please help.

— EDIT: —

@Gren. Awesome. Thank you. Based on your tips, here is what I figured out.

1. The normal autocomplete returning json array
2. and a mod one with a json object wrapping the array

Here is the code, assuming we got a global List named txtlst in the controller.cs…

    // normal one
    public JsonResult AutoCompleteHelper1(string term) {
        //if (!Request.IsAjaxRequest()) return null;
        var lst = txtlst.Where(s => s.StartsWith(term)).ToList();
        var res = lst.Select(x => new { value = x }).ToList();
        return Json(res, JsonRequestBehavior.AllowGet);
    }
    //mod one
    public JsonResult AutoCompleteHelper2(string term) {
        //if (!Request.IsAjaxRequest()) return null;
        var lst = txtlst.Where(s => s.StartsWith(term)).ToList();
        var res = lst.Select(x => new { value = x }).ToList();
        return Json(new { wrapper= res, name="wrapper" }, JsonRequestBehavior.AllowGet);
    }
}

and then in the .cshtml file…

<p>Auto Complete Example</p>
<input type="text" name="q" id="MyInput1" data-autocomplete-source="@Url.Action("AutoCompleteHelper1", "Home")"/>
<input type="text" name="q" id="MyInput2" data-autocomplete-source="@Url.Action("AutoCompleteHelper2", "Home")" />

and then in the .js file…

$(document).ready(function () {

    // normal autocomplete
    $("#MyInput1").autocomplete({ source: $("#MyInput1").attr("data-autocomplete-source") });

    // mod autocomplete with a wrap
    $("#MyInput2").autocomplete({
        source: function (req, add) {
            $.getJSON($("#MyInput2").attr("data-autocomplete-source"), req, function (data) {
                var suggestions = [];
                $.each(data.wrapper, function (i, o) {
                    suggestions.push(o.value);
                });
                add(suggestions);
            });
        }
    });
});

— EDIT 2: —

Please ignore those comments that are telling me to use POST. They
are not reading the blog links or do not understand the issue.

Answer 1

The other option is to wrap your JSON Arrays within JSON objects. The article and comments in it answered this question.

Edit:
From the article:

The fact that this is a JSON array is important. It turns out that a script that contains a JSON array is a valid JavaScript script and can thus be executed. A script that just contains a JSON object is not a valid JavaScript file.

If you wrap your json array in an object {“myJsonArray”:[{“name”:”sensitive”},{“name”:”data”}]} the HTML script tag would not be able to execute.