What is the correct way to configure CSP in Tauri when using CSS-in-JS libraries?

[billywatkins]

In the release build, Tauri does not render anything. After a bit of Googling, I found the same issue, but I am still confused about the right CSP configuration to set when using CSS-in-JS libraries like styled-components.

Right now, this is my CSP:
"csp": "default-src 'self'"

Error:

[billywatkins]

Okay, I finally ended up with this configuration in the tauri.conf.json file. Is this the right way to do it? I don't know. I'm leaving my comment here so people who come here may find this useful.

  "security": {
      "dangerousDisableAssetCspModification": ["style-src"],
      "csp": "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' asset:"
    }

EDIT:

Based on my own experience, I've never seen an attack that leveraged the injection of CSS to cause harm. - https://scotthelme.co.uk/can-you-get-pwned-with-css/

I guess "unsafe-inline" is okay.

[FabianLars]

If your css-in-js library has no static export then this is indeed the only solution.

[billywatkins]

Thanks for clarifying it!

I checked both styled-components and Emotion; it seems that neither supports exporting CSS into separate files[1][2], I might be wrong.

1. emotion: https://stackoverflow.com/questions/58932468/is-it-possible-to-generate-css-files-using-emotion
2. styled-components: Static CSS Extraction styled-components/styled-components#1018 (comment)