Settings of Content-Security-Policy for CSS in Electron with Vite

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