Onion Information
Using BrowserID and Content Security Policy together
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 ...
Onion Details
Page Clicks: 0
First Seen: 03/11/2024
Last Indexed: 10/21/2024
Onion Content
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: Login with BrowserID function try_browserid() { navigator.id.getVerifiedEmail(function(assertion) { if (assertion) { document.getElementById('browserid-assertion').setAttribute('value', assertion); document.getElementById('browserid-form').submit(); } }); } 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: links cannot use javascript: URIs inline Javascript is forbidden So we can start by converting the login link to: Login with BrowserID 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 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: Header set X-Content-Security-Policy: "default-src 'self'; frame-src 'self' https://browserid.org ; script-src 'self' https://browserid.org" Add a comment