ProHoster > Blog > Verwaltung > Bildgröße im Handumdrehen ändern

Bildgröße im Handumdrehen ändern

In fast jeder Webanwendung, die Bilder verwendet, besteht die Notwendigkeit, kleine Kopien dieser Bilder zu erstellen, und oft gibt es mehrere Formate für zusätzliche Bilder.
Auch das Hinzufügen neuer Dimensionen zu einer bestehenden Anwendung verursacht einige Kopfschmerzen. Daher die Aufgabe:

Aufgabe

Bezeichnen wir die Liste der Anforderungen:

  • Generieren Sie im Handumdrehen zusätzliche Bilder beliebiger Formate, ohne zu irgendeinem Zeitpunkt während des Bestehens der Anwendung zusätzliche Funktionen in die Anwendung einzuführen.
  • Es müssen nicht bei jeder Anfrage zusätzliche Bilder generiert werden;
  • Deaktivieren Sie die Möglichkeit, zusätzliche Bilder in nicht angegebenen Formaten zu generieren.

Ich werde den letzten Punkt erläutern, da er leicht im Widerspruch zum ersten Punkt steht. Wenn wir die Generierung von Bildern öffnen, besteht die Möglichkeit eines Angriffs auf die Website, indem eine große Anzahl von Anfragen zur Größenänderung des Bildes in unendlich viele Formate generiert wird. Daher muss diese Sicherheitslücke geschlossen werden.

Nginx-Installationskonfiguration

Um die oben genannten Anforderungen zu lösen, benötigen wir den folgenden Satz von Nginx-Modulen:

Module ngx_http_image_filter_module и ngx_http_secure_link_module werden nicht standardmäßig installiert und müssen daher in der Installationskonfigurationsphase angegeben werden :

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

Nginx-Konfiguration

Wir fügen unserer Hostkonfiguration eine neue hinzu Standorte und allgemeine Cache-Parameter:

...
    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;
        }
...
    }
...

Wir fügen der Konfiguration auch einen neuen Host hinzu:

server {
    server_name                     myproject.ru;
    listen                          81;

    access_log                      /www/myproject.ru/logs/nginx.preview.access_log;
    error_log                       /www/myproject.ru/logs/nginx.preview.error_log info;

    # Указываем секретное слово для md5
    secure_link_secret              secret;

    # Ошибки отправляем она отдельный location
    error_page                      403 404 415 500 502 503 504 = @404;

    # location Для фильтра size
    location ~ ^/i/[^/]+/(.+) {
        
        # грязный хак от Игоря Сысоева *
        alias                       /www/myproject.ru/images/$1;
        try_files                   "" @404;
    
        # Проверяем правильность ссылки и md5
        if ($secure_link = "") { return 404; }
        
        # Используем соответсвующий фильтр
        image_filter                size;
    }

    # По аналогии остальные location для других фильтров
    location ~ ^/c/[^/]+/(d+|-)x(d+|-)/(.+) {
        set                         $width  $1;
        set                         $height $2;
        
        alias                       /www/myproject.ru/images/$3;
        try_files                   "" @404;
    
        if ($secure_link = "") { return 404; }
    
        image_filter                crop  $width  $height;
    }
    
    location ~ ^/r/[^/]+/(d+|-)x(d+|-)/(.+) {
        set                         $width  $1;
        set                         $height $2;

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

        if ($secure_link = "") { return 404; }

        image_filter                resize  $width  $height;
    }

    location @404 { return 404; }
}

Weitere Bilder können Sie daher über die folgenden Links beziehen:

* try_files – empfindlich gegenüber Leerzeichen und russischen Zeichen, daher musste ich eine Krücke machen alias.

Verwendung in einer Webanwendung

Auf Webanwendungsebene können Sie das folgende Verfahren durchführen (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;
}

my $preview_path = &proxy_image(
                    source  => 'image1.jpg',
                    height  => 100,
                    width   => 100,
                    filter  => 'resize'
                );

Allerdings würde ich auch empfehlen, die Größen zu berechnen Vorschau.

Rechen

Beim Löschen des Originalbilds werden Vorschauen natürlich erst dann aus dem Cache gelöscht, wenn der Cache ungültig gemacht wird. In unserem Fall können Vorschauen noch einen Tag nach dem Löschen bestehen bleiben, dies ist jedoch die maximale Zeit.

das Original

Source: habr.com

Kommentar hinzufügen