Resize images on the fly

In almost any web application that uses images, there is a need to create small copies of these images, and often there are several additional image formats.
It also causes some headache to add new sizes to an existing application. Hence the task:

Task

Denote the list of requirements:

• Generate additional images of any formats on the fly without adding additional functionality to the application at any time the application exists;
• Additional images should not be formed at each request;
• Close the possibility of forming additional images of undefined formats.

I will explain the last paragraph, for it slightly contradicts the first paragraph. If we make open the formation of any images, then there is the possibility of an attack on the site by generating a large number of requests for resizing images in an infinite number of formats, therefore this vulnerability needs to be closed.

Nginx installation configuration

To solve the above requirements, we need the following set of nginx modules:

• ngx_http_image_filter_module - for resizing images;
• ngx_http_proxy_module - for caching;
• ngx_http_secure_link_module - for protection against spam;

The ngx_http_image_filter_module and ngx_http_secure_link_module modules are not installed by default, so they must be specified during the configuration phase of the nginx installation :

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


Nginx configuration

We add a new location and general cache parameters to the configuration of our host : We also add a new host to the config: As a result, additional images can be taken from the links:

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




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


• 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 - sensitive to spaces and Russian characters, so I had to make a crutch with alias .

Use in web application

At the web application level, you can do the following procedure (Perl): Although I would also recommend calculating the preview sizes .

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'
                );


Rake

When you delete the original image, the previews, of course, will not be deleted from the cache until the cache is disabled, and in our case, the previews can exist for a day after deletion, but this is a maximum in time.

original