Pull in JSON objects using jQuery avoiding XSS

Question

I need to pull in data from a JSON facebook feed. I was able to do it like this:

$.getJSON( "https://graph.facebook.com/jessekiro7/posts?access_token=354581914738002|SlHvFFksutZP9kcYRFobNKjg7WI&limit=1", function(data){
  $.each( data, function( index, value ) {
    $( "<a href=" + value[0].link +  " target='_blank' class='fbmsga'> <p><img src=" + value[0].picture + " /> " + value[0].message + "</p></a>" ).appendTo( "div.fbmsg" );
  });
});

Here is a working fiddle http://jsfiddle.net/7qu9xns2/

However, I have come to find out that this is not secure - vulnerable to XSS.

So I tried the following:

$.ajax({
    url: 'https://graph.facebook.com/jessekiro7/posts?access_token=354581914738002|SlHvFFksutZP9kcYRFobNKjg7WI&limit=1',
}).done( function( data ){
    var a = $( '<div></div>' );
    $.each( data, function( index, value ) {
        a.attr( 'class', data );
        a.text( data );

        $( 'div.fbmsg' ).append( a );
    });
});

The above returns "[object object]" as is. If I use dot notation, it returns nothing.

As you can see in the first option, I was able to use dot notation to access the necessary parts of the JSON array. In the second option, I need to do the same, access the "message" - however, the dot notation does not seem to be working.

What am I doing wrong? And how can I make sure I do not allow XSS?

Thanks in advance!

Answer 1

You need to create the various elements separately with javascript and append to them into the DOM. Making sure that you do not concatenate the text from the JSON response into the jQuery call that creates the element.

$.getJSON( "https://graph.facebook.com/jessekiro7/posts?access_token=354581914738002|SlHvFFksutZP9kcYRFobNKjg7WI&limit=1", function(data){
    $.each( data, function( index, value ) {
        var div = $("div.fbmsg");
        var a = $('<a target="_blank" class="fbmsga"></a>');
        a.attr('href', value[0].link);
        var p = $('<p></p>');
        p.text(value[0].message);
        a.append(p);
        var img = $('<img></img>');
        img.attr('src', value[0].picture);
        p.append(img);
        div.append(a);
    });
}); 

Answer 2

Try this. You create each element using the jQuery contruction function, and then build them up from lowest to highest in the hierarchy.

$.ajax({
    url: 'https://graph.facebook.com/jessekiro7/posts?access_token=354581914738002|SlHvFFksutZP9kcYRFobNKjg7WI&limit=1',
}).done( function( data ){
    $.each( data, function( index, value ) {
        var p = $("<p>");
        var img = $("<img>", {
            src: value.picture
        });
        p.append(img);
        var a = $("<a>", {
            href: value.link,
            target: "_blank",
            "class": "fbmsga",
            text: value.message
        }).prepend(p);
        $("div.fbmsg").append(a);
    });
});