ProHoster > Blogi > antaminen > Kuvan koon muuttaminen lennossa

Kuvan koon muuttaminen lennossa

Lähes kaikissa kuvia käyttävissä verkkosovelluksissa on tarve luoda pieniä kopioita näistä kuvista, ja usein lisäkuville on useita muotoja.
Uusien ulottuvuuksien lisääminen olemassa olevaan sovellukseen aiheuttaa myös päänsärkyä. Siksi tehtävä:

Tehtävä

Merkitään vaatimusluettelo:

  • Luo lisäkuvia missä tahansa muodossa lennossa ilman lisätoimintojen tuomista sovellukseen milloin tahansa sovelluksen olemassaolon aikana;
  • Lisäkuvia ei tarvitse luoda jokaisesta pyynnöstä;
  • Poista käytöstä mahdollisuus luoda lisää kuvia määrittelemättömässä muodossa.

Selitän viimeisen kohdan, koska se on hieman ristiriidassa ensimmäisen kohdan kanssa. Jos saamme minkä tahansa kuvien luomisen avoimeksi, on olemassa mahdollisuus hyökkäykseen sivustoon luomalla suuri määrä pyyntöjä kuvan koon muuttamisesta äärettömään määrään muotoja, joten tämä haavoittuvuus on suljettava.

nginx-asennuskokoonpano

Yllä olevien vaatimusten ratkaisemiseksi tarvitsemme seuraavan joukon nginx-moduuleja:

Moduulit ngx_http_image_filter_module и ngx_http_secure_link_module ei ole asennettu oletusarvoisesti, joten ne on määritettävä asennuksen konfigurointivaiheessa Nginx:

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

nginx-kokoonpano

Lisäämme uuden isäntäkokoonpanoomme sijainti ja yleiset välimuistiparametrit:

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

Lisäämme myös uuden isännän konfiguraatioon:

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

Tämän seurauksena lisäkuvia voi saada seuraavien linkkien kautta:

* try_files - herkkä välilyönneille ja venäläisille hahmoille, joten minun piti tehdä kainalosauva alias.

Käytä verkkosovelluksessa

Verkkosovellustasolla voit tehdä seuraavan toimenpiteen (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'
                );

Vaikka suosittelen myös kokojen laskemista esikatselu.

harava

Alkuperäistä kuvaa poistettaessa esikatselut eivät luonnollisesti poistu välimuistista ennen kuin välimuisti on mitätöity, ja meidän tapauksessamme esikatselut voivat olla olemassa päivän poistamisen jälkeen, mutta tämä on enimmäisaika.

оригинал

Lähde: will.com

Lisää kommentti