Question

I have created a bookmark that extracts all images from a page when clicked and sends the img’s src back to another (remote) server via JSONP.

Problem: The remote server has to check for session authentication cookies to ensure that the user sending the JSONP request is logged in before adding the img src to the database. I am able to check for the session cookies over JSONP, now if the user is not logged in and I want to allow the user to login at this point, how should I present the login screen?

Also, are there any security risks with checking for session cookies over JSONP?

Bookmark’s jQuery

The way I am using .getJSON to do JSONP is probably wrong`

$('.thing').on('click', function() {
    var jsonp_url = 'http://mydomain.com/bookmark.js?callback=?';
    var data = {
        type: 'addToLibrary',
        thingImgSrc: 'http://google.com/someimage.jpg';
    };
    $.getJSON(jsonp_url, data, function(resp) {
        // console.log('done');
    });
});

Server response if logged in

addToLibrary(["1"]) 

Server response if NOT logged in

addToLibrary(["0"])

Callback function

addToLibrary = function(data) {
    if(data == '0') {
        // show login screen
    } else {
        // show OK screen
    }
}

Ideas for User to Login

1. On receiving ["0"] indicating an error, popup a window showing login form, login will be done normally since the popup window contains a page from the remote server.
2. On receiving ["0"] indicating an error, popup an AJAX-style modal box on current page containing the login form, login will be done via JSONP.

Answer 1

Why not send back an object?

addToLibrary( { "result" : ["[e-mail]"] } );
addToLibrary( { "error" : true, message : "must log in"  } ); 

In your function you check for the error or result and handle it that way. No wondering what Zero is.

function addToLibrary(resp) {
    if (resp.error) {
        showLoginPrompt();
    } else {
        addItems(resp.result);
    }
}