I got the issue that my Electron app couldn't load CSS in production. In development, no problem. What happened at CSS?
Cause #
In development, renderer.css
in packages/renderer/src
was imported via index.js
.
import './renderer.css';
The setting of Content-Security-Policy for CSS was style-src 'unsafe-inline'
. This was no problem in development.
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self';style-src 'unsafe-inline';img-src 'self' data:;worker-src blob:;">
<title>Read it easy</title>
</head>
But in production, Vite
built index-(hash).css
in packages/dist
. Then Vite
added a link
element into head
.
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self';style-src 'unsafe-inline';img-src 'self' data:;worker-src blob:;">
<title>Read it easy</title>
<script type="module" crossorigin src="./main-8aeff8ba.js"></script>
<link rel="modulepreload" crossorigin href="./modulepreload-polyfill-3cfb730f.js">
<link rel="stylesheet" href="./index-1e5eca82.css">
</head>
To load index-(hash).css
which is a local file, I should have added self
to style-src
. Without style-src: 'self'
, Content-Security-Policy blocked index-(hash).css
.
Solution #
Just add style-src: 'self'
in both the renderer and the main.
<meta http-equiv="Content-Security-Policy" content="default-src 'self';style-src 'self' 'unsafe-inline';img-src 'self' data:;worker-src blob:;">
app.on('ready', () => {
session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
callback({
responseHeaders: {
...details.responseHeaders,
'Content-Security-Policy': ['default-src \'self\'\;style-src \'self\' \'unsafe-inline\'\;img-src \'self\' data\:;worker-src blob\:;']
}
})
})
});
Background | Why did the issue happen? #
Why didn't I set the value of style-src 'self' 'unsafe-inline'
?
In the beginning, default-src 'self'
didn't allow the url()
function for the background-image
property of CSS. Then I added style-src 'unsafe-inline'
to Contente-Security-Policy. This change lost self
in style-src
though default-src
included self
. As mentioned above, CSS was imported via index.js
in development, and self
was not required. So I missed this issue...