Sécuriser son application Next.js : Les 5 failles à combler avant de lancer

La sécurité est souvent la dernière roue du carrosse dans les projets early-stage. "On verra plus tard, personne ne va me hacker". C'est une erreur qui peut être fatale. Une fuite de données jour 1, et votre réputation est détruite à jamais.

Heureusement, avec Next.js et Supabase, la sécurité est plus facile à gérer que jamais, à condition de connaître les bases.

1. Ne jamais faire confiance au client (Frontend)

C'est la règle d'or. Tout ce qui se passe dans le navigateur de l'utilisateur peut être manipulé. Un utilisateur peut modifier le code JS, changer les requêtes réseaux, ou éditer le HTML.

Ne vérifiez jamais les permissions (ex: "est-ce qu'il est admin ?") uniquement en frontend pour cacher un bouton. Vous devez toujours vérifier cette permission côté serveur (API Route ou Server Action) avant d'effectuer l'action sensible.

2. Row Level Security (RLS) avec Supabase

Si vous utilisez Supabase, vous devez activer RLS. C'est une fonctionnalité magique de PostgreSQL.

Sans RLS, si vous exposez votre clé API publique (ce qui est normal avec Supabase), n'importe qui pourrait potentiellement lire toute votre base de données. Avec RLS, vous définissez des règles au niveau de la base de données :

"Un utilisateur peut lire la table 'todos' UNIQUEMENT si la colonne 'user_id' est égale à son propre ID d'auth."

Même si le frontend est hacké, la base de données refusera de renvoyer les données des autres utilisateurs. C'est un pare-feu ultime.

3. Protéger les Server Actions et API Routes

Dans Next.js, assurez-vous que chaque Server Action commence par une vérification d'authentification.

      export async function updateProfile(data) {
        const supabase = createClient();
        const { data: { user } } = await supabase.auth.getUser();
        
        if (!user) throw new Error("Non autorisé");
        
        // ... logique
      }
      

Sans cette ligne, n'importe qui peut appeler votre fonction serveur depuis l'extérieur.

4. Attention aux injections (XSS et SQL)

Bonne nouvelle : React échappe automatiquement le HTML, vous protégeant des failles XSS de base (sauf si vous utilisez `dangerouslySetInnerHTML`... attention !). Et Supabase/Postgres utilise des requêtes paramétrées, vous protégeant des injections SQL classiques. Restez dans les clous du framework, et vous serez en sécurité par défaut.