Enforce CSP (#551)

Switches our Content Security Policy from report-only mode to enforced mode.

According to our internal dashboard, it looks like CSP violation numbers dropped very sharply on October 1, which is the day #540 landed. There do seem to be a few reports coming in as recently as October 5, but if so it is a very small number. Could be due to caching? Browser extensions injecting scripts/images etc. will also cause ongoing CSP violations, that's expected behavior.

Also adds https://www.googletagmanager.com to the img-src directive, since https://developers.google.com/tag-manager/web/csp documents that this is needed, and in one page load I did actually see a violation here in local dev mode (but not consistently -- I can't reproduce it now). I guess analytics sometimes uses images for some reason.

Fixes #517

Filed #550 to track the most important improvement, which we can't do until https://bugs.chromium.org/p/chromium/issues/detail?id=1253267 is fixed.

Author: aomarks

packages/lit-dev-server/src/middleware/content-security-policy-middleware.ts

@@ -121,8 +121,12 @@ export const contentSecurityPolicyMiddleware = (
 
     // TODO(aomarks) We use some data: URLs for SVGs in docs.css. There's
     // probably a simpler way.
+    //
     // The ytimg.com domain is needed for embedded YouTube videos.
-    `img-src 'self' data: https://i.ytimg.com/`,
+    //
+    // The googletagmanager.com domain is needed for Google Analytics
+    // (https://developers.google.com/tag-manager/web/csp).
+    `img-src 'self' data: https://i.ytimg.com/ https://www.googletagmanager.com/`,
 
     // Disallow any embeds, applets, etc. This would usually be covered by
     // `default-src: 'none'`, but we can't set that for the reason explained
@@ -201,9 +205,7 @@ export const contentSecurityPolicyMiddleware = (
     } else {
       policy = strictFallbackCsp;
     }
-    // TODO(aomarks) Remove -Report-Only suffix when we are confident the
-    // policy is working.
-    ctx.set('Content-Security-Policy-Report-Only', policy);
+    ctx.set('Content-Security-Policy', policy);
     return next();
   };
 };