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:
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
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>
//...
"csp": "default-src 'self' style-src 'self' 'unsafe-inline'" also check out the code changes on github. Solution is not ideal but if you deploy it with certain configurations (only local CSS/HTML and no XSS, eval, injections, etx.) then you might be okay. DYOR"csp": "default-src 'self'; style-src 'sha256-XYZ"