[phosphor-webui] Enable style-src 'unsafe-inline'

[Henbin Chang]

Hi,
We would like to use angular-ui-grid module to support grid feature.

We found angular-ui-grid used a lot of inline styles.

To make it workable, we had to add "unsafe-inline" to CSP.
So we added the below modification in the phosphor-webui/webpack.config.js
     new CSPWebpackPlugin({
       'base-uri': '\'self\'',
       'object-src': '\'none\'',
   'script-src': ['\'self\''],
-      'style-src': ['\'self\''],
+      'style-src': ['\'self\'', '\'unsafe-inline\'' ],

But the grid could still not work.

Then we tried to modify the content of  CSP in the bmcweb
(include/security_headers_middleware.hpp)

@@ -41,7 +41,7 @@ struct SecurityHeadersMiddleware
       // img-src 'self' data: is used to allow that.
       //
https://stackoverflow.com/questions/18447970/content-security-policy-data-not-working-for-base64-images-in-chrome-28
       res.addHeader("Content-Security-Policy",
-                      "default-src 'self'; img-src 'self' data:");
+                      "default-src 'self'; style-src 'self'
'unsafe-inline'; img-src 'self' data:");
       res.addHeader("X-XSS-Protection", "1; "
                                           "mode=block");
       res.addHeader("X-Content-Type-Options", "nosniff");

The grid could be displayed normally.

Can anyone tell me why the modified CSP in the webpack.config.js had no
effect?

Thanks.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ozlabs.org/pipermail/openbmc/attachments/20190517/36147aca/attachment.htm>