Content Security Policy and Ember Test

Testing
1

I have recently added a Content Security Policy to my project. It’s pretty well locked down, and the application works as expected. I had to clean up several direct style=‘’ uses and add a trio of sha hashes to allow a few webpacks to keep working.

The problem that I can’t seem to tackle is with EMBER TEST. I now get a couple of global errors. They are about a blocked URI at http://localhost:7357/29863444764800/tests/index.html.

I don’t understand why running the project works but running test doesn’t. This is my CSP.

  contentSecurityPolicy: {
      'default-src':[ "'self'"],
      'script-src': ["'self'", "'unsafe-eval'",  "*.ourcompany.io"],
      'font-src': ["'self'", "fonts.googleapis.com data: fonts.gstatic.com"],
      'connect-src': ["'self'", "https://localhost:*"],
      'img-src': ["'self'", "data: https: blob:"],
      'style-src': ["'self'", "unsafe-inline",
        "'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='",
        "'sha256-QpqSNgKitn2W+7bMI1ZPa6B6tsGBhZ9gM9fMb4b60Z4='",
        "'sha256-iSwCj1bqP19atFNQ3LJrb1otJSU7RZ7DlHZZn2TNcqw='",
      ],
      'media-src': ["'self'"]
    },

And these are the global errors, two reported but they look like the same thing.

Built project successfully. Stored in "C:\Users\RW~1\AppData\Local\Temp\tests-dist-202465-21964-mb3hlo.hsct".
not ok 1 Chrome 126.0 - [undefined ms] - Global error: Uncaught Error: Content-Security-Policy violation detected: Violated directive: style-src-elem. Blocked URI: inline at http://localhost:7357/29863444764800/tests/index.html?hidepassed, line 22
    ---
        browser log: |
            {"type":"error","text":"Uncaught Error: Content-Security-Policy violation detected: Violated directive: style-src-elem. Blocked URI: inline at http://localhost:7357/29863444764800/tests/index.html?hidepassed, line 22\n","testContext":{}}
    ...
not ok 2 Chrome 126.0 - [undefined ms] - Global error: Uncaught Error: Content-Security-Policy violation detected: Violated directive: style-src-elem. Blocked URI: inline at http://localhost:7357/29863444764800/tests/index.html?hidepassed, line 22
    ---
        browser log: |
            {"type":"error","text":"Uncaught Error: Content-Security-Policy violation detected: Violated directive: style-src-elem. Blocked URI: inline at http://localhost:7357/29863444764800/tests/index.html?hidepassed, line 22\n","testContext":{"state":"complete"}}
    ...

Any ideas? I did try adding http://localhost:* to style-src and style-src-elem, which didn’t work. I also don’t like the idea of adding that to style-src.

2

Downgrading ember-qunit should work. This issue has been introduced in v8 if I recall correctly. It’s related to how ember-qunit bundles the CSS styles since being refactored to a v2 addon. I noticed it myself but didn’t had time to report it.

3

this isn’t a problem for ember-qunit to fix – the CSP config needs to change. to what? idk. but this is going to be an increasing problem as all v2 addons that have included CSS will reveal this configuration issue.

maybe try

'style-src': ["'self'", "unsafe-inline", "style-src-elem", /* ... */,
// or
'style-src-elem': ['*'],

(not exactly sure how to read the error, but something like this should help in some way)

4

@NullVoxPopuli The goal is to test an application which CSP is forbidding inline styles for security reasons. This is blocked by ember-qunit v8+. As far as I know, it can only be fixed within ember-qunit. The app cannot prevent it from using unsafe inline styles. This is a noticeable regression for CSP users.

I’m sure there are options to avoid inline styles for v2 addons. But I agree that it will be an increasing problem for apps relying on CSP if there aren’t good recommendations driving the ecosystem in the right direction. It took quite some time making most of the relevant Ember addons compatible with a strict CSP. We should prevent having a regression in the ecosystem in that regards.

5

since this is during development (and you don’t want to change the CSP), I believe the behavior you want to change is with webpack.

ember-qunit does not do anything with styles, other than import the stylesheet - which defers the handling of those styles / css to the app’s packager (webpack, vite, etc)

Here: ember-qunit/addon/src/index.js at main · emberjs/ember-qunit · GitHub

tl;dr:

// src/index.js
import './styles.css';

avoid inline styles for v2 addons

given the above way CSS is brought in with ember-qunit, it’s an app concern, something you’d configure in ember-auto-import’s webpack config, or embroider’s webpack config - if you don’t want to allow inline styles.

See here:

In particular, you may want to change style-loader | webpack

Here is where the option is set to styleTag in development: embroider/packages/webpack/src/ember-webpack.ts at 4aacaee33f07b55f6b49a450c5897dccc2ad0b4f · embroider-build/embroider · GitHub

6

Finally solved this by using a conditional.

policy: {
    'script-src': ["'self'", 'localhost:*', environment === 'test' ? "'unsafe-eval'" : ''],