Content-Security-Policy and Visual Studio Browser Link

Visual Studio contains an excellent feature called Browser Link. It keeps things like style-sheets linked from your browser to your development studio. When you make a change to your CSS file, your browser immediately reflects the changes without having to refresh the page.

I thought it was a little bit of a gimmick to start off with, but to my horror, it stopped working on a web-site I've been working on recently just as I was about to add some features. The thought of having to go back to writing a load of CSS, alt-tabbing and then hoping it was largely doing the expected thing filled me with a mild panic.

I noticed that the "Refresh Linked Browsers" command was greyed out, and no browsers were being listed in the Browser Link Dashboard.

After much turning things off and on, hunting through menus and restarting programs I resorted to frantic Googling of the subject, to not much avail.

The Browser Link feature works through some javascript that is injected into your development code and uses a web-socket to keep the data flowing. And this is the where the problem was, my browser was blocking the javascript as I had recently introduced a Content-Security-Policy, which naturally didn't cover this injected code.

The fix is to allow the code in your CSP. It seems allowing default-src unsafe-inline http://localhost:* ws://localhost:*; script-src unsafe-inline http://localhost:* covers it off. But it's important that you remove these before publishing your site to a production environment.

Visual Studio has a handy feature for replacing Web.Config entries at publishing time, but the CSP header is a single line of text, so it's a bit fiddly to do and you have to replace the whole string with a live one. Not very good for testing out what you're pushing.