La gestion des transferts de fichiers est un aspect critique de la sécurité des applications web. ng-file-upload est une directive AngularJS robuste qui facilite cette tâche. Cependant, pour garantir un système impénétrable, il est nécessaire de configurer correctement les validations côté client et de coupler l'ensemble avec des mesures de protection côté serveur.

1. Validation des types de fichiers : La première barrière

La validation du type de fichier empêche l'envoi de scripts malveillants (comme des fichiers .sh ou .exe) déguisés. ng-file-upload utilise la directive ngf-pattern pour filtrer les fichiers via leurs extensions ou leurs types MIME.

Utilisation des patterns et Regex

Vous pouvez définir une liste blanche d'extensions autorisées directement dans votre HTML :

<!-- Restriction aux formats d'images classiques -->
<button ngf-select="transfertFichier($file)" 
        ngf-pattern="'.png,.jpg,.jpeg'" 
        accept="image/*">
    Sélectionner une image
</button>

<!-- Utilisation d'une expression régulière pour plus de flexibilité -->
<div ngf-select="upload($file)" ngf-pattern="'image/*,application/pdf'">
    Déposer un document (Image ou PDF)
</div>

Feedback utilisateur en cas d'erreur

Lorsqu'un fichier ne respecte pas le pattern, la directive expose l'objet $error. Voici comment traiter ces messages :

<span ng-show="monFichier.$error === 'pattern'">
    Format non supporté. Veuillez choisir un fichier image ou PDF.
</span>

2. Maîtrise de la taille des données : Prévenir les attauqes DoS

Sans limites de taille, un attaquant pourrait saturer votre stockage ou consommer toute la bande passante (Denial of Service). Les attributs ngf-max-size et ngf-min-size gèrent nativement ces contraintes.

<input type="file" ngf-select 
       ng-model="fichierUtilisateur"
       ngf-max-size="10MB" 
       ngf-min-size="5KB" 
       ngf-max-total-size="50MB">

Le moteur interne de validation compare la taille du blob (en octets) avec les valeurs scalaires converties, assurant ainsi une vérification avant même que le transfert vers le serveur ne débute.

3. Validation avancée du contenu (Images et Médias)

Pour les applications traitant des médias, il est crucial de vérifier les métadonnées pour éviter l'envoi de fichiers corrompus ou hors normes.

Dimensions d'images

<!-- Limiter la résolution pour économiser les ressources de traitement -->
<div ngf-select="traiterImage($file)" 
     ngf-max-width="2000" 
     ngf-max-height="2000"
     ngf-ratio="16:9">
    Téléverser une bannière HD
</div>

Durée des fichiers audio/vidéo

Il est possible de restreindre la durée des médias pour contrôler les coûts de stockage :

<input type="file" ngf-select="uploadVideo($file)" ngf-max-duration="60">

4. Renforcement de la sécurité côté serveur

La validation côté client est une aide à l'expérience utilisateur, mais elle est facilement contournable. Le serveur doit impérativement effectuer les vérifications suivantes :

Intégration d'un scanner antivirus

Chaque fichier reçu doit être analysé. Voici un exemple conceptuel en Node.js utilisant un scanner comme ClamAV :

const clamScan = require('clamscan');

async function verifierSecuriteFichier(cheminLocal) {
    try {
        const { isInfected, virusName } = await clamScan.scanFile(cheminLocal);
        if (isInfected) {
            console.error(`Alerte : Virus détecté (${virusName})`);
            return false;
        }
        return true;
    } catch (erreur) {
        // En cas d'erreur de scan, on rejette par sécurité
        return false;
    }
}

Gestion saine du stockage

• Renommage systématique : N'utilisez jamais le nom d'origine fourni par l'utilisateur. Générez un identifiant unique (UUID).
• Isolation : Stockez les fichiers en dehors de la racine publique de votre serveur web (Web Root).
• Permissions : Désactivez les droits d'exécution sur le répertoire de stockage.

5. Contrôle d'accès et permissions (RBAC)

L'upload ne doit être accessible qu'aux utilisateurs authentifiés possédant les droits nécessaires.

Vérification côté AngularJS

$scope.lancerUpload = function (file) {
    if (!$scope.user.canUpload) {
        notify.error("Accès refusé : Droits insuffisants.");
        return;
    }

    Upload.upload({
        url: '/api/v1/documents/upload',
        data: { file: file, userId: $scope.user.id }
    }).then(function (response) {
        // Succès
    });
};

Validation stricte sur l'API

Le jeton d'authentification (JWT ou Session) doit être validé par un middleware avant de traiter le flux de données :

router.post('/upload', authMiddleware, checkPermissions('upload_files'), (req, res) => {
    // Traitement sécurisé ici
});

Synthèse des bonnes pratiques

Pour construire un système de transfert de fichiers fiable avec ng-file-upload, suivez cette checklist :

1. Appliquez une whitelist stricte des extensions via ngf-pattern.
2. Définissez des limites de taille cohérentes avec vos capacités de stockage.
3. Utilisez les validations de dimensions d'images pour éviter les attaques par "image bomb".
4. Implémentez une analyse antivirus systématique côté serveur.
5. Ne faites jamais confiance aux noms de fichiers fournis par le client.
6. Assurez-vous que l'endpoint d'upload est protégé par un contrôle d'accès rigoureux.