While looking into why BrowserID logins on Libravatar didn't work on Firefox, I remembered that I had recently added Content Security Policy headers. Here's what I had to do to make BrowserID work on a CSP-enabled site.
Create a hidden form and a login link
This is what the login button looked like before CSP:
The hidden form is there because the assertion needs to be sent to the application via
POST to avoid leaking it out, but otherwise the code is pretty straightforward.
Now of course, with CSP turned ON, there are two problems:
So we can start by converting the login link to:
then moving the
try_browserid() function to a separate file to be served from the same domain and finally hooking it up to the
var link = document.getElementById('browserid-link'); link.onclick = try_browserid; link.addEventListener('click', try_browserid, false);
Exposing the right X-Content-Security-Policy header
browserid.org, we need the following as part of the policy:
but that's not enough since the BrowserID login form seems to use some sort of
<iframe> trick and so we need to add this extra permission as well:
Here is the final policy I ended up setting (using Apache mod_headers) for the Libravatar login page:
<Location /account/login> Header set X-Content-Security-Policy: "default-src 'self'; frame-src 'self' https://browserid.org ; script-src 'self' https://browserid.org" </Location>