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

Question

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:

Answer 1

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 answer 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.

Related: https://github.com/tauri-apps/tauri/discussions/8578

Answer 2

So for production build here's a CSP configuration you want:

"security": {
      "csp": "default-src 'self' style-src 'self' 'unsafe-inline'"
},

According to OWASP and CSP reference adding unsafe-inline is not secure for the Web, but it context of Tauri it's a smaller risk you have to evaluate.

Overall it's a problem of how Vite packages CSP, including styled-components.

If you want to keep debugging this, this vite and babel configuration might be relevant.

======

Here's the source code.

Used default example:

import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

//.....

return (
    <div className="container">
      <Title>Welcome to Tauri!</Title>
//...