Thay đổi kích thước hình ảnh nhanh chóng

Trong hầu hết mọi ứng dụng web sử dụng hình ảnh, cần phải tạo các bản sao nhỏ của những hình ảnh này và thường có một số định dạng cho các hình ảnh bổ sung.
Việc thêm các kích thước mới vào ứng dụng hiện có cũng gây ra một số vấn đề đau đầu. Do đó nhiệm vụ:

Nhiệm vụ

Hãy biểu thị danh sách các yêu cầu:

  • Tạo nhanh chóng các hình ảnh bổ sung ở bất kỳ định dạng nào mà không đưa chức năng bổ sung vào ứng dụng bất kỳ lúc nào trong suốt quá trình tồn tại của ứng dụng;
  • Hình ảnh bổ sung không cần phải được tạo theo mọi yêu cầu;
  • Vô hiệu hóa khả năng tạo hình ảnh bổ sung có định dạng không xác định.

Tôi sẽ giải thích điểm cuối cùng, vì nó hơi mâu thuẫn với điểm đầu tiên. Nếu chúng tôi mở quá trình tạo bất kỳ hình ảnh nào thì có khả năng xảy ra một cuộc tấn công vào trang web bằng cách tạo ra một số lượng lớn yêu cầu thay đổi kích thước hình ảnh thành vô số định dạng, vì vậy lỗ hổng này cần phải được đóng lại.

cấu hình cài đặt nginx

Để giải quyết các yêu cầu trên, chúng ta cần bộ mô-đun nginx sau:

Mô-đun ngx_http_image_filter_module и ngx_http_secure_link_module không được cài đặt theo mặc định, vì vậy chúng phải được chỉ định ở giai đoạn cấu hình cài đặt nginx:

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

cấu hình nginx

Chúng tôi thêm một cái mới vào cấu hình máy chủ của chúng tôi địa điểm thư viện nào và các tham số bộ đệm chung:

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

Chúng tôi cũng thêm một máy chủ mới vào cấu hình:

server {
    server_name                     myproject.ru;
    listen                          81;

    Nhật ký truy cập /www/myproject.ru/logs/nginx.preview.access_log;
    error_log /www/myproject.ru/logs/nginx.preview.error_log thông tin;

    # Chỉ định từ khóa bí mật cho md5
    secure_link_secret bí mật;

    # Lỗi được gửi đến một vị trí riêng biệt
    trang lỗi 403 404 415 500 502 503 504 = @404;

    # vị trí Để lọc kích thước
    vị trí ~ ^/i/[^/]+/(.+) {
        
        # hack bẩn của Igor Sysoev *
        bí danh /www/myproject.ru/images/$1;
        thử_tệp "" @404;
    
        # Kiểm tra tính chính xác của liên kết và md5
        nếu ($secure_link = "") { trả về 404; }
        
        # Sử dụng bộ lọc thích hợp
        kích thước bộ lọc hình ảnh;
    }

    # Tương tự như vậy, phần còn lại của các vị trí cho các bộ lọc khác
    vị trí ~ ^/c/[^/]+/(d+|-)x(d+|-)/(.+) {
        đặt $width $1;
        đặt $height $2;
        
        bí danh /www/myproject.ru/images/$3;
        thử_tệp "" @404;
    
        nếu ($secure_link = "") { trả về 404; }
    
        bộ lọc hình ảnh cắt $chiều rộng $chiều cao;
    }
    
    vị trí ~ ^/r/[^/]+/(d+|-)x(d+|-)/(.+) {
        đặt $width $1;
        đặt $height $2;

        bí danh /www/myproject.ru/images/$3;
        thử_tệp "" @404;

        nếu ($secure_link = "") { trả về 404; }

        thay đổi kích thước image_filter $width $height;
    }

    vị trí @404 { trả về 404; }
}

Do đó, có thể lấy thêm hình ảnh bằng các liên kết sau:

* thử_files — nhạy cảm với không gian và các ký tự tiếng Nga, vì vậy tôi phải làm một cái nạng bằng bí danh.

Sử dụng trong ứng dụng web

Ở cấp độ ứng dụng web, bạn có thể thực hiện quy trình sau (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;
}

$preview_path của tôi = &proxy_image(
                    nguồn => 'image1.jpg',
                    chiều cao => 100,
                    chiều rộng => 100,
                    lọc => 'thay đổi kích thước'
                );

Mặc dù tôi cũng khuyên bạn nên tính toán kích thước xem trước.

Cào

Khi xóa hình ảnh gốc, các bản xem trước đương nhiên sẽ không bị xóa khỏi bộ nhớ đệm cho đến khi bộ nhớ đệm vô hiệu và trong trường hợp của chúng tôi, các bản xem trước có thể tồn tại một ngày sau khi xóa, nhưng đây là thời gian tối đa.

bản gốc

Nguồn: www.habr.com

Mua dịch vụ lưu trữ đáng tin cậy cho các trang web có bảo vệ DDoS, máy chủ VPS VDS 🔥 Mua dịch vụ hosting website đáng tin cậy với bảo vệ DDoS, máy chủ VPS VDS | ProHoster