ProHoster > Blog > administration > Redimensionnement de l'image à la volée

Redimensionnement de l'image à la volée

Dans presque toutes les applications Web utilisant des images, il est nécessaire de créer de petites copies de ces images, et il existe souvent plusieurs formats pour des images supplémentaires.
L'ajout de nouvelles dimensions à une application existante provoque également quelques maux de tête. D'où la tâche :

Tâche

Notons la liste des exigences :

  • Générez des images supplémentaires de n'importe quel format à la volée sans introduire de fonctionnalités supplémentaires dans l'application à tout moment pendant l'existence de l'application ;
  • Il n'est pas nécessaire de générer des images supplémentaires à chaque demande ;
  • Désactivez la possibilité de générer des images supplémentaires de formats non spécifiés.

J'expliquerai le dernier point, car il contredit légèrement le premier point. Si nous ouvrons la génération d'images, il existe alors une possibilité d'attaque sur le site en générant un grand nombre de requêtes pour redimensionner l'image dans un nombre infini de formats, cette vulnérabilité doit donc être fermée.

configuration de l'installation de nginx

Pour résoudre les exigences ci-dessus, nous avons besoin de l'ensemble de modules nginx suivant :

Modules ngx_http_image_filter_module и ngx_http_secure_link_module ne sont pas installés par défaut, ils doivent donc être spécifiés lors de la phase de configuration de l'installation nginx:

phoinix@phoinix-work:~/src/nginx-0.8.29
$ ./configure --with-http_secure_link_module --with-http_image_filter_module

configuration nginx

Nous en ajoutons un nouveau à notre configuration d'hôte Localisation et paramètres généraux du cache :

...
    proxy_cache_path /www/myprojects/cache levels=1:2 keys_zone=image-preview:10m;
...
    server {
...
        location ~ ^/preview/([cir])/(.+) {
        # Тип операции
            set                         $oper $1;
        # Параметры изображения и путь к файлу
            set                         $remn $2;
        # Проксируем на отдельный хост
            proxy_pass                  http://myproject.ru:81/$oper/$remn;
            proxy_intercept_errors      on;
            error_page                  404 = /preview/404;
        # Кеширование
            proxy_cache                 image-preview;
            proxy_cache_key             "$host$document_uri";
        # 200 ответы кешируем на 1 день
            proxy_cache_valid           200 1d;
        # остальные ответы кешируем на 1 минуту
            proxy_cache_valid           any 1m;
        }
        
        # Возвращаем ошибку
        location = /preview/404 {
            internal;
            default_type                image/gif;
            alias                       /www/myprojects/image/noimage.gif;
        }
...
    }
...

Nous ajoutons également un nouvel hôte à la configuration :

server {
    server_name                     myproject.ru;
    listen                          81;

    journal d'accès /www/myproject.ru/logs/nginx.preview.access_log;
    journal_d'erreurs /www/myproject.ru/logs/nginx.preview.error_log info;

    # Spécifiez le mot secret pour md5
    secure_link_secret secret;

    # Les erreurs sont envoyées à un emplacement séparé
    page_erreur 403 404 415 500 502 503 504 = @404;

    # emplacement pour le filtre de taille
    emplacement ~ ^/i/[^/]+/(.+) {
        
        # hack sale par Igor Sysoev *
        alias /www/myproject.ru/images/$1;
        try_files "" @404;
    
        # Vérifiez l'exactitude du lien et du md5
        si ($secure_link = "") { renvoie 404; }
        
        # Utilisez le filtre approprié
        taille du filtre d'image ;
    }

    # Par analogie, le reste des emplacements pour d'autres filtres
    emplacement ~ ^/c/[^/]+/(d+|-)x(d+|-)/(.+) {
        définir $width $1;
        définir $hauteur $2;
        
        alias /www/myproject.ru/images/$3;
        try_files "" @404;
    
        si ($secure_link = "") { renvoie 404; }
    
        image_filter recadrage $largeur $hauteur;
    }
    
    emplacement ~ ^/r/[^/]+/(d+|-)x(d+|-)/(.+) {
        définir $width $1;
        définir $hauteur $2;

        alias /www/myproject.ru/images/$3;
        try_files "" @404;

        si ($secure_link = "") { renvoie 404; }

        image_filter redimensionner $width $height;
    }

    emplacement @404 { return 404; }
}

De ce fait, des images supplémentaires peuvent être obtenues en utilisant les liens suivants :

* try_files — sensible aux espaces et aux caractères russes, j'ai donc dû fabriquer une béquille avec alias.

Utilisation dans une application Web

Au niveau de l'application web, vous pouvez effectuer la procédure suivante (Perl) :

sub proxy_image {
    use Digest::MD5     qw /md5_hex/;
    my %params = @_;
    my $filter = {
                    size    => 'i',
                    resize  => 'r',
                    crop    => 'c'            
                  }->{$params{filter}} || 'r';
    my $path = ($filter ne 'i' ?
                    ( $params{height} || '_' ) . 'x' . ( $params{width} || '_' ) . '/' :
                    ()
               ) . $params{source};
    my $md5 = md5_hex( $path . 'secret' );
    $path = '/preview/' . $filter . '/' . $md5 . '/' . $path;
    return $path;
}

mon $preview_path = &proxy_image(
                    source => 'image1.jpg',
                    hauteur => 100,
                    largeur => 100,
                    filtre => 'redimensionner'
                );

Bien que je recommanderais également de calculer les tailles avant-première.

Râteau

Lors de la suppression de l'image originale, les aperçus, bien entendu, ne seront pas supprimés du cache tant que le cache n'est pas invalidé, et dans notre cas, les aperçus peuvent exister pendant un jour après la suppression, mais c'est la durée maximale.

original

Source: habr.com

Ajouter un commentaire