Content Security Policy

Le Content Security Policy (CSP) sono un livello di sicurezza che aiuta a prevenire attacchi come Cross-Site Scripting (XSS) e data injection. In Electron, le CSP sono fondamentali per limitare quali risorse possono essere caricate ed eseguite.

CSP Base

Aggiungi un meta tag nell’HTML della tua applicazione:

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'">

Questa policy permette solo risorse provenienti dalla stessa origine ('self'), bloccando script inline, eval e risorse esterne.

Direttive Principali

Direttiva	Controlla	Esempio
default-src	Fallback per tutte le direttive	'self'
script-src	Sorgenti di script	'self'
style-src	Sorgenti di stili CSS	'self' 'unsafe-inline'
img-src	Sorgenti di immagini	'self' data:
font-src	Sorgenti di font	'self'
connect-src	URL per fetch, WebSocket	'self' https://api.example.com
media-src	Sorgenti audio/video	'self'
object-src	Plugin (Flash, etc.)	'none'
frame-src	Sorgenti iframe	'none'

Configurazioni Comuni

App Completamente Locale

Per applicazioni che non caricano risorse esterne:

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self';
  style-src 'self';
  img-src 'self' data:;
  font-src 'self';
  object-src 'none';
  frame-src 'none';
">

App con API Esterne

Se la tua app comunica con API esterne:

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com;
  object-src 'none';
">

App con Stili Inline

Se hai bisogno di stili inline (es. framework CSS-in-JS):

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data:;
">

CSP dal Main Process

Puoi impostare le CSP anche tramite gli header HTTP nel Main Process:

const { session } = require('electron');

app.whenReady().then(() => {
  session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
    callback({
      responseHeaders: {
        ...details.responseHeaders,
        'Content-Security-Policy': [
          "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
        ],
      },
    });
  });
});

Valori delle Sorgenti

Valore	Significato
'self'	Stessa origine dell’applicazione
'none'	Nessuna sorgente permessa
'unsafe-inline'	Permette script/stili inline
'unsafe-eval'	Permette eval() e simili
https:	Qualsiasi URL HTTPS
data:	URL data: (base64)
blob:	URL blob:
https://esempio.com	Dominio specifico

Debug delle CSP

Quando una CSP blocca una risorsa, appare un errore nella console dei DevTools:

Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'self'"

Per risolvere:

1. Identifica quale direttiva sta bloccando
2. Decidi se la risorsa è necessaria
3. Aggiungi la sorgente alla direttiva appropriata
4. Non aggiungere 'unsafe-inline' a script-src se possibile

Best Practice

1. Inizia restrittivo — parti da default-src 'self' e aggiungi solo ciò che serve
2. Evita 'unsafe-eval' — se un framework lo richiede, valuta alternative
3. Limita 'unsafe-inline' — usalo solo per style-src se necessario, mai per script-src
4. Specifica i domini — usa domini espliciti invece di wildcard
5. Blocca object-src — imposta sempre object-src 'none'
6. Testa la CSP — verifica che tutte le funzionalità dell’app funzionino con la policy attiva