javascript - 使用 jQuery 拉取 JSON 对象以避免 XSS

Question

我需要从 JSON Facebook feed 中提取数据。我能够这样做:

$.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" );
  });
});

这是一个工作 fiddle http://jsfiddle.net/7qu9xns2/

但是，我发现这并不安全 - 容易受到 XSS 攻击。

所以我尝试了以下方法:

$.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 );
    });
});

上面按原样返回“[object object]”。如果我使用点表示法，它不会返回任何内容。

正如您在第一个选项中看到的，我能够使用点表示法来访问 JSON 数组的必要部分。在第二个选项中，我需要执行相同的操作，访问“消息” - 但是，点符号似乎不起作用。

我做错了什么？我怎样才能确保我不允许 XSS？

提前致谢!

Answer 1

您需要使用 javascript 单独创建各种元素并将它们附加到 DOM 中。确保您不会将 JSON 响应中的文本连接到创建元素的 jQuery 调用中。

$.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);
    });
});