Pull to refresh

Ресайз изображений на лету

Nginx
Практически в любом веб-приложении использующем изображения существует потребность формировать уменьшенные копии этих изображений, причем зачастую, форматов дополнительных изображений несколько.
Так же вызывает некоторую головную боль добавление новых размеров на существующем приложении. Отсюда задача:

Задача



Обозначим список требований:

  • Формировать дополнительные изображения любых форматов на лету без внесения дополнительного функционала в приложение в любой момент существования приложения;
  • Дополнительные изображения не должны формироваться при каждом запросе;
  • Закрыть возможность формирования дополнительных изображений неустановленных форматов.


Объясню последний пункт, ибо он слегка противоречит первому пункту. Если мы сделаем открытым формирование любых изображений, то существует возможность атаки на сайт путем формирования большого количества запросов на ресайз изображения в бесконечное количество форматов, поэтому эту уязвимость требуется закрыть.

Конфигурация установки nginx



Для решения вышеуказанных требований нам потребуется следующий набор модулей nginx:



Модули ngx_http_image_filter_module и ngx_http_secure_link_module по-умолчанию не ставятся поэтому их нужно указать на этапе конфигурации установки nginx:

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


Конфигурация nginx



В конфигурацию нашего хоста добаляем новый location и общие параметры кеша:

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


В итоге дополнительные изображения можно забирать по ссылкам:



* try_files — чувствителен к пробелам и русским символам, поэтому пришлось сделать костыль с alias.

Использование в веб-приложении



На уровне веб-приложения можно сделать следущую процедуру (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'
);


Хотя я бы еще рекомендовал рассчитывать размеры preview.

Грабли



При удалении исходного изображения, превью, естественно, удалятся из кеша не будут пока кеш не инвалидируется, а в нашем случае превью могут существовать в течение суток после удаления, но это максимум по времени.

оригинал
Tags:nginximage previewimage resize
Hubs: Nginx
Total votes 73: ↑69 and ↓4+65
Views18K

Popular right now

Top of the last 24 hours