Dynamické zmenšovanie obrázkov

V prakticky každom webovom aplikácii, ktorá využíva obrázky, existuje potreba vytvárať zmenšené kópie týchto obrázkov, pričom často sú potrebné viaceré formáty dodatočných obrázkov.
Pridanie nových rozmerov do existujúcej aplikácie tiež spôsobuje určité ťažkosti. Odtiaľ vyplýva úloha:

Úloha

Uveďme zoznam požiadaviek:

• Vytvárať dodatočné obrázky akýchkoľvek formátov na požiadanie bez pridania dodatočnej funkčnosti do aplikácie v akomkoľvek momente jej existencie;
• Dodatočné obrázky sa nesmú vytvárať pri každom požiadavke;
• Zabrániť možnému vytváraniu dodatočných obrázkov nenastavených formátov.

Vysvetlím posledný bod, pretože je to trochu v rozpore s prvým bodom. Ak sprístupníme vytváranie akýchkoľvek obrázkov, existuje možnosť útoku na web vytvorením veľkého množstva požiadaviek na zmenšenie obrázka do nekonečného množstva formátov, preto je potrebné túto zraniteľnosť uzavrieť.

Konfigurácia inštalácie nginx

Na splnenie vyššie uvedených požiadaviek budeme potrebovať nasledujúci súbor modulov nginx:

• ngx_http_image_filter_module — na zmenšovanie obrázkov;
• ngx_http_proxy_module — na caching;
• ngx_http_secure_link_module — na ochranu pred spamom;

Moduly ngx_http_image_filter_module a ngx_http_secure_link_module štandardne sa nenainštalujú, preto ich treba uviesť v čase konfigurácie inštalácie nginx:

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


Konfigurácia nginx

Do konfigurácie nášho hostiteľa pridáme nový location a spoločné parametre 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;
        }
...
    }
...


Pridáme aj nový host do konfigurácie:

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+|-)(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+|-)(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; }
}

V konečnom dôsledku môžeme dodatočné obrázky získavať cez odkazy:

• myproject.ru/preview/i[md5]/[path_to_image]
• myproject.ru/preview/c[md5]/[size]/[path_to_image]
• myproject.ru/preview/r[md5]/[size]/[path_to_image]

* try_files — citlivé na medzery a ruské znaky, preto bolo potrebné urobiť obchádzku s alias.

Použitie vo webovej aplikácii

Na úrovni webovej aplikácie je možné vykonať nasledujúcu procedúru (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'
                );

Aj by som ešte odporúčal vypočítať rozmery preview.

Hrebene

Pri odstránení pôvodného obrázka, preview sa prirodzene neodstránia z cache, pokým sa cache neinvaliduje, a v našom prípade preview môžu existovať až 24 hodín po odstránení, ale to je maximum časovo.

originál

Zdroj: habr.com