CSS injection can be disallowed by CSP's `style-src`

[shaun-stripe]

The isolation component of our library relies on injecting an inline <style> tag. If the client page is to contain CSP Policy Directives, we have the following options for maintaining compatibility with this library.

Option 1: unsafe-inline

We can specify that the client page must add 'unsafe-inline' to the style-src policy.

Content-Security-Policy: style-src ... 'unsafe-inline'

This may expose the client page to possible CSS attacks...

Option 2: domain-hosted css

To avoid inline styles, we can specify that the CSS required by this library must be exported to a css file hosted on some domain, say http://example.com/viewport.css (see css file here)

The domain hosting the CSS file must then be added to the style-src policy:

Content-Security-Policy: style-src ... example.com

The usage will contain an option for specifying the URL of the CSS file:

viewport.freeze(1.0, 'elementID', {styleUrl: 'http://example.com/viewport.css'});
// will add <link rel='stylesheet' href='http://example.com/viewport.css'> to document.head

viewport.thaw();
// will remove aforementioned <link> tag

Option 3: modify element styles via JS

We could skirt CSP just by modifying the body child element's style.display property with JS. Two problems:

1. the style.display property will have to be restored to its original value when thawing
2. elements that are added during freeze are not accounted for

[alovak]

Hi! It seems that Option 3 does not require any updates to websites.

Also if I understand CSP correctly if you define policy to include viewport.css file from 'example.com' then you have to include everything else (all sources) you use on your site and this can be a huge problem :)