How can I send a 403 Authentication header, as a cross domain request (CORS) , using a bookmarklet with JQuery?

Question

So I've got a bookmarklet which executes javascript on other websites, which I want to trigger an 403 Authentication Required header, once the Cache button on it, is clicked. That way, a prompt will come up asking them to login.

The problem is that I'm not meant to provide an authentication header with the ajax request I am making, whilst having Access-Control-Allow-Origin: set to any domain with the * value. I'm supposed to explicitly define which domain I want to allow an 403 Authentication header to appear on, but I can't.

Here's my code.

.htaccess

header set Access-Control-Allow-Origin: *
#header set Access-Control-Allow-Methods: GET, POST, PUT, DELETE
header set Access-Control-Allow-Headers: Authorization

JQuery

$.ajax({
            headers : {
                "Authorization" : "Basic TVNF3TQtU1BGMjAx6C12bVxzbW4ydHBvaW50OlF3Z5J0eSEyM6Q1"
            },
            type: "GET",
            url: 'http://desbest.uk.to/clickrobot/favicon.png', //image for testing
            crossDomain:true,
            xhrFields: {
                withCredentials: true
            }, 
            //contentType: "application/json; charset=utf-8",
            //dataType: "json",
            success: function(data) {
                alert('ok!');
                //formatData(format_type,data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert(textStatus + ' / ' + errorThrown);
            }
        }); 

The error I get

Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.

I've seen the Diigo bookmarklet do it, so it is possible, but how? Is it possible at all?

Answer 1

Let us take a look at the documentation. There are two things that should be noted:

...the browser will reject any response that does not have the Access-Control-Allow-Credentials: true header...

and

Important note: when responding to a credentialed request, server must specify a domain, and cannot use wild carding.

The headers that you should return are:

Access-Control-Allow-Origin: [some_origin]
Access-Control-Allow-Credentials: true 

You can return the first header by obtaining the Referer using your server script, retrieve the origin from the Referer and then returning the header with your script. In PHP we can do that as follows:

$urllist = parse_url($_SERVER['HTTP_REFERER']);
$origin = $urllist['scheme'] . '://' . $urllist['host'];
header("Access-Control-Allow-Origin: " . $origin);

Update: You should read Access-Control-Allow-Origin Multiple Origin Domains, in particular this answer. You might not need a PHP file if you can access your httpd.conf

Anyways, your url should not be the image, but the url to your PHP script.

url: 'http://desbest.uk.to/clickrobot/somescript.php'

In your php script you retrieve the origin of the request (which will be the page on which the bookmarklet appeared. And then you can output the header with the origin. Regardless, of where the bookmarklet appears, it should always about the correct header.

I'm not entirely sure, if the authorization dialog will popup using Ajax, even though you specified the correct headers. So, that is why we will have a look at Diigo below.

---

Diigo uses a different approach, namely: Once 'Sign in' has been clicked, JSONP is uses to request a javascript file which is generated by a server-side script (PHP for example) on their servers. JSONP is an alternative to CORS. JavaScript files from a different can be included in the page's header, with no problems at all, unlike Ajax requests.

If the user is not logged in, the request javascript file sends a 401 header on which the Authentication dialog is shown (this is coded in a server-side script!). The user enters his/her details and based on the entered information return the contents of the javascript file. If the user was successfully logged on it could return something like callback({ signedin : 1}), but otherwise callback({ signedin : 0}).

Now the javascript function callback with certain parameters are called. If the user is signed in, we display the bookmarklet's content.

---

What to put in your htaccess: Untested, but you would like to allow all origins and set the 'Access-Control-Allow-Origin' header to the value of the origin. I believe this should do the trick:

SetEnvIf Origin "^(.*)$" ORIGIN_DOMAIN=$1
Header set Access-Control-Allow-Origin "%{ORIGIN_DOMAIN}e" env=ORIGIN_DOMAIN