feat(general): Support content security policy in the local serving of the demo page

[farrago]

Summary

Many of the directives and directive demos do not work with CSP enabled. This revision adds support for local testing of the directives with CSP enabled to help resolve that problem.

• Adds --csp flag to gulp to send CSP headers via the browsersync server
• Adds ng-csp and related css for Angular's internal csp support.
• Updates the demo page generation to write the demo js to an index.js file rather than inline in the demo page to avoid inline script issues

⚠️ WARNING: most directives and/or demos DO NOT currently work with CSP enabled! ⚠️ WARNING: the new index.js must also be copied to gh_pages. Looks like gulp publish will do that, but worth checking!

Details

Content security policy is a useful security layer to protect applications against XSS and other attacks.

It usually prevents use of inline scripts and inline styles, which up to now have been used in a number of places. So its important to test with CSP enabled to ensure the directives are usable in CSP secured pages.

This revision makes it easy to test by providing a --csp flag that will send a minimal set of content-security-policy headers to the browser as part of serving the demo page. Ideally CSP would be enabled by default, but too many of the directives and demos would break at this time.

The configured policy does not include unsafe-inline (for obvious reasons) so this change also had to remove the inlining of scripts into the demo page. This is replaced by generating an index.js file and sourcing that in the index.html instead (which is secure as it comes from 'self').

The csp support comes from helmet-csp, a well regarded security middleware.

Test Plan

• Run gulp

  • Check all unit test still run and pass
  • Check the demo page is generated and shows in the browser
  • Check the response headers DO NOT include content-security-policy
  • Check all directives continue to work as before
  • Check no errors are shown in the console

• Run gulp --csp

  • Check all unit test still run and pass
  • Check the demo page is generated and shows in the browser
  • Check the response headers DO include content-security-policy
  • Check at least some directives continue to work
  • Check all fonts and external scripts are allowed to be loaded
  • Check the console shows CSP-related errors for the directives or demos that don't work.

[circlingthesun]

It might be worth making --csp default when everything passes. I also probably need to deal with those pesky github throttling errors so travis stops complaining Anyway, looks good 👍

[farrago]

Definitely agree with --csp being the future default. I did start out to with that intention, but pretty much everything breaks right now so it would look pretty bad to anyone who just followed the default steps!