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

Sat May 18 03:45:15 AEST 2019

On 5/17/19 12:05 AM, Henbin Chang wrote:
> Hi,
> We would like to use angular-ui-grid module to support grid feature.

For what feature/page/use case?  Adding a little more detail on what
you're trying to accomplish might allow someone to suggest an
alternative that gets what you want easier.

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

For reference, I found an open issue from 2017 on this.
https://github.com/angular-ui/ui-grid/issues/6031

> 
> To make it workable, we had to add "unsafe-inline" to CSP.

I'm going to be pretty adamantly against that ever making it to master.
"unsafe" is literally in the name of the header, and it's going to cause
us to get flagged in security scanners.

If that package is something you _really_ want, it's likely that the
inline styles can be moved to ids, and we can send them the patch, then
pull in the new version.

A quick look at there shows they're pulling styles from javascript via
calls like:
ng-style="Viewport.rowStyle(rowRenderIndex)"
which is exactly what we're trying to prevent with these headers.  When
I dig into the rowStyle function, it looks like they're mostly
calculating X and Y position in javascript, and loading it into the
style tag.  That's going to be hard to manage, but if you know the
behavior, it might be doable with empty div elements and size tags.

> 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?
The CSP in webpack sets the content security policy in the HTML meta tag
in head, like so:
<html ng-app="app" ng-csp="" lang="en">
    <head>
        <meta http-equiv="Content-Security-Policy" content="base-uri
'self'; object-src 'none'; script-src 'self'; style-src 'self'; img-src
'self' data:">

Given that there are a couple HTML files aren't actually generated by
webpack, and would otherwise take the default CSP, bmcweb also sets the
CSP header in the response:
Content-Security-Policy: default-src 'self'; img-src 'self' data:

I'm actually unsure about the browser behavior when the two conflict.
Based on what you're seeing, I'm going to assume that the browser takes
the more secure option of the two, and you need both to get the behavior
you want.