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.

This is what the login button looked like before CSP:

<form id="browserid-form" action="/account/login_browserid" method="post">  
<input id="browserid-assertion" type="hidden" name="assertion" value="">  
<input style="display: none" type="submit">  
</form>  

<a href="javascript:try_browserid()">Login with BrowserID</a>  

<script type="text/javascript">  
function try_browserid() {  
navigator.id.getVerifiedEmail(function(assertion) {  
    if (assertion) {  
        document.getElementById('browserid-assertion').setAttribute('value', assertion);  
        document.getElementById('browserid-form').submit();  
    }  
});  
}  
</script>

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:

<a id="browserid-link" href="#">Login with BrowserID</a>  

<script src="browserid_stuff.js" type="text/javascript">

then moving the try_browserid() function to a separate file to be served from the same domain and finally hooking it up to the try_browserid() function using Javascript (in that same browserid_stuff.js file):

var link = document.getElementById('browserid-link');  
link.onclick = try_browserid;  
link.addEventListener('click', try_browserid, false);

Exposing the right X-Content-Security-Policy header

In order to load the Javascript code from browserid.org, we need the following as part of the policy:

script-src https://browserid.org

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:

frame-src https://browserid.org

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>