W praktycznie każdej aplikacji webowej używającej obrazów istnieje potrzeba generowania pomniejszonych kopii tych obrazów, przy czym często różnych formatów dodatkowych obrazów jest kilka.
Dodanie nowych rozmiarów do istniejącej aplikacji może także powodować pewne problemy. Stąd zadanie:
Zadanie
Określimy listę wymagań:
- Generowanie dodatkowych obrazów w dowolnych formatach w locie, bez wprowadzania dodatkowej funkcjonalności do aplikacji w dowolnym momencie jej istnienia;
- Dodatkowe obrazy nie powinny być generowane przy każdym żądaniu;
- Zamknąć możliwość generowania dodatkowych obrazów w nieustalonych formatach.
Wyjaśnię ostatni punkt, ponieważ jest on nieco sprzeczny z pierwszym. Jeśli umożliwimy generowanie dowolnych obrazów, istnieje możliwość ataku na stronę poprzez generowanie dużej liczby żądań do zmiany rozmiaru obrazu w nieskończoną liczbę formatów, dlatego tę podatność trzeba zablokować.
Konfiguracja instalacji nginx
Aby zrealizować powyższe wymagania, potrzebujemy następującego zestawu modułów nginx:
- — do zmiany rozmiaru obrazów;
- — do cache'owania;
- — do ochrony przed spamem;
Moduły ngx_http_image_filter_module i ngx_http_secure_link_module nie są one domyślnie instalowane, dlatego należy je wskazać na etapie konfiguracji instalacji nginx:
phoinix@phoinix-work:~\/src\/nginx-0.8.29
$ .\/configure --with-http_secure_link_module --with-http_image_filter_module
Konfiguracja nginx
Do konfiguracji naszego hosta dodajemy nowy lokacja i ogólne parametry 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;
}
...
}
...
Dodajemy również nowy host do konfiguracji:
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; }
}
W efekcie dodatkowe obrazy można pobierać pod linkami:
- [md5]/[path_to_image]
- [md5]/[size]/[path_to_image]
- [md5]/[size]/[path_to_image]
* try_files — wrażliwy na spacje i symbole rosyjskie, dlatego trzeba było zrobić obejście z alias.
Użycie w aplikacji webowej
Na poziomie aplikacji webowej można przeprowadzić następującą procedurę (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'
);
Chociaż zalecałbym również obliczać rozmiary preview.
Grapple
Po usunięciu oryginalnego obrazu, podgląd oczywiście nie zostanie usunięty z cache, dopóki cache nie zostanie unieważniony, a w naszym przypadku podglądy mogą istnieć przez maksymalnie dobę po usunięciu.
Źródło: habr.com
