Resize images on the fly

In almost every web application that uses images, there is a need to create reduced copies of these images, often in multiple additional formats.
Adding new sizes to an existing application can be somewhat challenging. Hence, the task is:

Task

Let's outline the list of requirements:

• To create additional images in any format on-the-fly without introducing extra functionality to the application at any point in its existence;
• Additional images should not be generated with every request;
• Prevent the generation of additional images in unestablished formats.

I will explain the last point, as it slightly contradicts the first point. If we allow the formation of any images, there is a risk of an attack on the site by generating a large number of requests to resize images into an infinite number of formats; therefore, this vulnerability must be closed.

Nginx installation configuration

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

• ngx_http_image_filter_module — for image resizing;
• ngx_http_proxy_module — for caching;
• ngx_http_secure_link_module — for spam protection;

Modules ngx_http_image_filter_module and ngx_http_secure_link_module by default they are not installed, so they need to be specified during the installation configuration nginx:

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


Nginx configuration

In the configuration of our host, we add a new location and common 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 in the config:

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

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

• 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 a workaround had to be made with alias.

Using in a web application

At the web application level, the following procedure can be implemented (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'
                );

Although I would also recommend calculating the sizes preview.

Troubles

When the original image is deleted, the preview will not be removed from the cache until the cache is invalidated; in our case, previews can exist for up to a day after deletion, but that's the maximum time.

original

Source: habr.com