Vai al contenuto

Symfony + React: problemi comuni e soluzioni

Introduzione

Symfony e React costituiscono una combinazione altamente performante per lo sviluppo di applicazioni web complesse. Symfony, come framework PHP, gestisce il backend fornendo logica di business, accesso ai dati, API REST e sicurezza. React, lato client, implementa interfacce dinamiche e SPA (Single Page Application) con aggiornamento reattivo dei componenti.

L’integrazione consente di separare chiaramente frontend e backend, migliorando manutenzione, scalabilità e riusabilità: un backend Symfony può alimentare più client (web, mobile, servizi esterni), mentre React garantisce un’esperienza utente interattiva e performante.

La separazione introduce sfide importanti: progettazione API coerente, gestione sicura dei dati e sincronizzazione dello stato client-server. In questo articolo analizziamo le principali problematiche di integrazione Symfony + React, con focus su API, sicurezza e best practice, includendo esempi pratici di codice.

Problemi principali nella connessione Symfony <-> React

Comunicazione tramite API

In un’architettura separata, il frontend interagisce con il backend esclusivamente tramite richieste HTTP verso endpoint API. Diversamente dal rendering server-side classico, React recupera dati dinamicamente e aggiorna il DOM senza ricaricare la pagina.

  • Progettazione dell’API: definire endpoint chiari e coerenti con la logica dell’applicazione. Esempio: per l’entità Articolo, REST API standard includerebbe: GET /api/articoli, GET /api/articoli/{id}, POST /api/articoli. La mancata coerenza può generare richieste ridondanti o logica complessa lato client. Si consiglia di aderire a REST o GraphQL e di restituire JSON strutturato.
  • CORS e origini: in sviluppo il frontend e il backend spesso risiedono su domini o porte diverse (es. React: localhost:3000, Symfony: localhost:8000). La Same-Origin Policy blocca richieste cross-domain non autorizzate; occorre configurare CORS lato Symfony per consentire accesso sicuro.
  • Gestione stato e asincronia: tutte le operazioni sono asincrone. Occorre gestire caricamento, errori e aggiornamento dello stato. In particolare, la gestione di token JWT o sessioni stateless deve essere integrata correttamente.
  • Routing e navigazione: il routing SPA (React Router) è indipendente dal backend. Se l’utente ricarica una pagina o inserisce un URL, Symfony potrebbe restituire 404. La soluzione prevede configurazione del server web per reindirizzare tutte le richieste non API alla SPA.
  • Sincronizzazione formato dati: frontend e backend devono concordare struttura e tipo dei dati (tipicamente JSON). Symfony offre il componente Serializer; React utilizza response.json(). Formati incoerenti provocano errori di parsing o malinterpretazioni.

Sicurezza delle API

  • Autenticazione e sessioni: in un web tradizionale (rendering lato server), Symfony potrebbe utilizzare sessioni e cookie per l’autorizzazione: l’utente effettua il login, il server crea una sessione, imposta un cookie e le richieste successive vengono identificate dal cookie di sessione. Con API e SPA, c’è una scelta: utilizzare lo stesso approccio (cookie + sessioni + protezione CSRF integrata in Symfony) oppure passare all’autenticazione stateless tramite token. I token JWT (JSON Web Token) o meccanismi simili sono spesso scelti per le SPA. Con l’autenticazione basata su token, il server non memorizza lo stato dell’utente: il frontend riceve un token al login e lo invia a ogni richiesta (ad esempio, nell’header Authorization). Symfony verifica la validità del token a ogni richiesta. La sfida: memorizzare il token sul client deve essere sicuro. Memorizzare i JWT in localStorage o sessionStorage è vulnerabile agli attacchi XSS (se un aggressore riesce a eseguire JavaScript sulla pagina, può rubare il token). In alternativa, l’archiviazione dei JWT in un cookie HttpOnly protegge dall’accesso JavaScript, ma ci riporta ancora una volta al problema CSRF (il browser invia automaticamente il cookie per ogni richiesta al dominio, richiedendo un meccanismo di protezione aggiuntivo). Discuteremo le soluzioni a questi dilemmi nella prossima sezione.
  • Protezione CSRF: questa è una minaccia rilevante se si utilizzano cookie di sessione o cookie JWT. Un aggressore può ingannare il browser della vittima inducendolo a inviare una richiesta alla API come utente autorizzato (ad esempio, tramite un tag <img> o un form nascosto su un sito web di terze parti). Symfony utilizza i token CSRF per i form di default, ma nella nostra API pura non abbiamo form integrati. Se la SPA utilizza AJAX e token, il CSRF classico non funzionerà senza cookie (poiché il browser non invia automaticamente intestazioni o token). Tuttavia, se si sceglie di memorizzare il token in un cookie (HttpOnly per la protezione XSS), è necessario implementare manualmente la protezione CSRF. Soluzioni: utilizzare l’header X-CSRF-Token, il flag SameSite per i cookie (impostare SameSite=strict o Lax per impedire al browser di inviare cookie da siti web di terze parti) oppure controllare Origin/Referer sul server. Nel contesto di Symfony + React, con l’autorizzazione del token nell’intestazione Authorization, il problema CSRF è minimo, ma è necessario tenerlo presente se si utilizzano i cookie.
  • Autorizzazione e controllo accessi: anche utenti autenticati devono essere limitati ai permessi corretti. Vale anche la pena controllare i permessi a livello di dati : se l’API consente la modifica, ad esempio, di un oggetto, il server deve assicurarsi che l’utente corrente abbia i permessi per quell’oggetto (ad esempio, un utente può modificare solo i propri dati, non quelli di qualcun altro). Symfony fornisce strumenti utili: annotazioni (ad esempio, #[IsGranted(‘ROLE_ADMIN’)] sopra un controller), ruoli, voter e denyAccessUnlessGranted().
  • Validazione input: il backend non deve fidarsi dei dati client. Il componente Validator consente di verificare formato, lunghezza e obbligatorietà dei campi. Pertanto, il backend di Symfony deve convalidare i dati in arrivo . I dati non validi (ad esempio, un nome troppo lungo, un indirizzo email non valido) dovrebbero generare una risposta di errore (codice 400, con una descrizione del problema). Inoltre, vale la pena filtrare o eseguire l’escape dei dati durante l’output per prevenire XSS. Sebbene React esegua l’escape dei caratteri pericolosi in JSX per impostazione predefinita, gli sviluppatori a volte inseriscono HTML usando dangerouslySetInnerHTML o utilizzano librerie di rendering di terze parti. 
  • Protezione da XSS e SQL Injection: Doctrine riduce il rischio SQL Injection tramite query parametrizzate. React gestisce escape automatico dei dati; attenzione a dangerouslySetInnerHTML e a contenuti HTML dagli utenti.  Devono essere presi in considerazione anche altri attacchi, come DoS (Denial of Service) o tentativi di indovinare le password con metodi brute-force . Ad esempio, un’API pubblica potrebbe essere soggetta a richieste massicce. Proteggersi completamente da un DoS è difficile, ma è possibile implementare un rate limit . Symfony 5+ include il componente RateLimiter, che consente di limitare il numero di richieste da un IP o token. Per l’accesso con metodi brute-force, utilizzare il bundle Symfony BruteForceGuard o configurare restrizioni a livello di firewall (ad esempio, bloccando un account dopo N tentativi non riusciti).

Soluzioni pratiche

Symfony come API pura

// src/Controller/Api/ArticoloController.php
#[Route('/api/articoli')]
class ArticoloController extends AbstractController
{
    #[Route('', name: 'api_articoli_index', methods: ['GET'])]
    public function index(ArticoloRepository $repo): JsonResponse
    {
        $articoli = $repo->findAll();
        return $this->json($articoli, 200, [], ['groups' => 'articolo:lettura']);
    }
}

Il gruppo di serializzazione consente di restituire solo i campi necessari, evitando esposizione di dati sensibili.

Recupero dati in React

import { useEffect, useState } from 'react';

function ListaArticoli() {
  const [articoli, setArticoli] = useState([]);
  const [caricamento, setCaricamento] = useState(true);
  const [errore, setErrore] = useState(null);

  useEffect(() => {
    fetch('http://localhost:8000/api/articoli')
      .then(response => {
        if (!response.ok) throw new Error(`Errore ${response.status}`);
        return response.json();
      })
      .then(data => {
        setArticoli(data);
        setCaricamento(false);
      })
      .catch(err => {
        setErrore(err.message);
        setCaricamento(false);
      });
  }, []);

  if (caricamento) return <div>Caricamento...</div>;
  if (errore) return <div>Errore: {errore}</div>;

  return ({articoli.map(a =>{a.titolo})}
 );
}

Configurazione CORS Symfony

# config/packages/nelmio_cors.yaml
nelmio_cors:
    defaults:
        allow_credentials: true
        allow_headers: ['Content-Type', 'Authorization', 'Accept']
        allow_methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
        expose_headers: ['Link', 'X-Total-Count']
    paths:
        '^/api/':
            allow_origin: ['http://localhost:3000']

Autenticazione JWT

// Invio login JSON a Symfony
POST /api/login_check
Content-Type: application/json

{ "email": "utente@example.com", "password": "password123" }

// Risposta JWT
HTTP/1.1 200 OK
Content-Type: application/json
{ "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." }

Il token viene memorizzato sul frontend e inviato nelle richieste API tramite header Authorization: Bearer <token>. Symfony decodifica e valida il token a ogni richiesta.

Controllo accessi

#[Route('/api/admin/report', methods: ['GET'])]
public function adminReport(): JsonResponse
{
    $this->denyAccessUnlessGranted('ROLE_ADMIN');
    return $this->json(['secret' => '42']);
}

Validazione dati

#[Assert\NotBlank]
private $username;

#[Assert\Length(min: 8)]
private $password;

// Controller
$errors = $validator->validate($user);
if (count($errors) > 0) {
    $errorMessages = [];
    foreach ($errors as $violation) {
        $errorMessages[$violation->getPropertyPath()][] = $violation->getMessage();
    }
    return $this->json($errorMessages, 400);
}

Esempio applicativo: gestione TODO

// TaskController.php
#[Route('/api/tasks', name: 'api_tasks_')]
class TaskController extends AbstractController
{
    #[Route('', name: 'list', methods: ['GET'])]
    public function list(TaskRepository $repo): JsonResponse
    {
        $this->denyAccessUnlessGranted('IS_AUTHENTICATED_FULLY');
        $tasks = $repo->findBy(['owner' => $this->getUser()]);
        return $this->json($tasks);
    }

    #[Route('', name: 'create', methods: ['POST'])]
    public function create(Request $request, EntityManagerInterface $em, ValidatorInterface $validator): JsonResponse
    {
        $this->denyAccessUnlessGranted('IS_AUTHENTICATED_FULLY');
        $data = json_decode($request->getContent(), true);
        $task = new Task();
        $task->setTitle($data['title'] ?? '');
        $task->setCompleted(false);
        $task->setOwner($this->getUser());

        $errors = $validator->validate($task);
        if (count($errors) > 0) {
            $errorMessages = [];
            foreach ($errors as $violation) {
                $errorMessages[$violation->getPropertyPath()][] = $violation->getMessage();
            }
            return $this->json($errorMessages, 400);
        }

        $em->persist($task);
        $em->flush();
        return $this->json($task, 201);
    }

    #[Route('/{id}/complete', name: 'complete', methods: ['POST'])]
    public function complete(int $id, TaskRepository $repo, EntityManagerInterface $em): JsonResponse
    {
        $this->denyAccessUnlessGranted('IS_AUTHENTICATED_FULLY');
        $task = $repo->find($id);
        if (!$task || $task->getOwner() !== $this->getUser()) {
            return $this->json(['error' => 'Not found'], 404);
        }
        $task->setCompleted(true);
        $em->flush();
        return $this->json(['status' => 'ok']);
    }
}

Conclusione

Symfony + React offre un’architettura modulare e sicura per applicazioni complesse. Separare frontend e backend permette scalabilità, manutenzione facilitata e una migliore esperienza utente. L’adozione di best practice su API, autenticazione, autorizzazione, validazione e protezione dei dati è essenziale per applicazioni robuste in produzione.

Post collegati:

Tag: