Redimensionarea imaginilor în timp real

Practically any web application that uses images has the need to generate thumbnail versions of these images, often in multiple additional formats.
It can also be quite a headache to add new sizes to an existing application. Hence the task:

Sarcină

Let's outline the list of requirements:

  • Generate additional images of any formats on the fly without introducing additional functionality into the application at any point in the application's lifecycle;
  • Additional images should not be generated with every request;
  • Close the possibility of generating additional images in unregistered formats.

I'll explain the last point, as it slightly contradicts the first point. If we open the generation of any images, there is a risk of an attack on the site by generating a large number of requests to resize an image into an infinite number of formats, hence this vulnerability needs to be closed.

Nginx installation configuration

To meet the aforementioned requirements, we will need the following set of nginx modules:

Module ngx_http_image_filter_module și ngx_http_secure_link_module these are not installed by default, so they need to be specified at the configuration stage nginx:

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

Nginx configuration

In our host configuration, we add a new location and general cache parameters:

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

We also add a new host to the config:

server {
    nume_server                     myproject.ru;
    ascultă                          81;

    access_log /www/myproject.ro/logs/nginx.preview.access_log;
    error_log /www/myproject.ro/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.ro/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.ro/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.ro/images/$3;
        try_files "" @404;

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

        image_filter resize $width $height;
    }

    location @404 { return 404; }
}

As a result, additional images can be retrieved via links:

* try_files — sensibil la spații și caractere rusești, de aceea a fost nevoie să facem un workaround cu alias.

Utilizare în aplicația web

La nivelul aplicației web se poate realiza următoarea procedură (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'
                );

Deși aș recomanda să se calculeze dimensiunile preview.

Greble

Atunci când se șterge imaginea sursă, preview-urile, evident, nu vor fi șterse din cache până când cache-ul nu este invalidat, iar în cazul nostru preview-urile pot exista timp de până la o zi după ștergere, dar aceasta este limita de timp.

original

Sursa: habr.com

Cumpără un hosting fiabil pentru site-uri cu protecție DDoS, servere VPS VDS 🔥 Cumpără un hosting fiabil pentru site-uri cu protecție DDoS, servere VPS VDS | ProHoster