Hướng dẫn thiếp lập ngăn chặn Hotlinking với Caddy Server

Các bài viết trên blog Thuanbui.me này được mình chia sẻ miễn phí để giúp mọi người tìm hiểu về công nghệ một cách đơn giản, dễ hiểu. Mình biết là rất nhiều người đã sao chép các bài viết của mình về trang web khác vì nhiều lý do khác nhau. Một số bạn có liên hệ xin phép sao chép bài viết và sẽ ghi credit về blog thuanbui.me và dĩ nhiên không có lý do gì mình từ chối. Vì chẳng có cách nào ngăn chặn được việc sao chép nội dung được chia sẻ trên Internet.

Tuy nhiên, cũng có một số thành phần cá biệt không chỉ ăn cắp nội dung bài viết mà còn ăn cắp luôn băng thông của mình bằng cách dùng hình ảnh được lưu trực tiếp server của mình để đăng trên web khác. Thuật ngữ chuyên môn gọi vụ ăn cắp băng thông hình ảnh này là hotlinking.

1. Hotlinking Là Gì?

Hotlinking xảy ra khi website khác sử dụng tài nguyên (thường là hình ảnh) trực tiếp từ server của bạn. Hậu quả:

• Tốn băng thông: Mỗi lần hình ảnh được tải từ server của bạn, nó tiêu tốn tài nguyên.
• Tăng chi phí: Nếu bạn trả phí dựa trên băng thông, hotlinking làm tăng chi phí vận hành.
• Đánh cắp nội dung: Một số website sao chép bài viết và hình ảnh của bạn mà không ghi nguồn.

2. Chặn Hotlinking với Caddy Server

Mình đang sử dụng Caddy để vận hành các website WordPress, trong đó có blog thuanbui.me này. Để thiết lập tính năng hotlinking, thêm đoạn mã sau vào file cấu hình Caddyfile của domain tương ứng

# Hotlink protection for images
    @hotlinkProtection {
        path *.jpg *.jpeg *.png *.gif *.webp
        not {
             header_regexp Referer ^https?://(.*\.)?(thuanbui\.me|google\.com|googleusercontent\.com|bing\.com|facebook\.com|fbcdn\.net|x\.com|tumblr\.com|zalo\.me|zaloapp\.com|yeuchaybo\.com|purna\.vn)
        }
    }

    # Proxy for other hotlinkers with a general placeholder
    reverse_proxy @hotlinkProtection https://placehold.co {
        header_up Host placehold.co
        rewrite /900x600/red/white/png?text=Stop+stealing+my+content
        header_down Cache-Control "public, max-age=3600"
    }
Code language: PHP (php)

Giải thích:

• @hotlinkProtection: Tạo một định nghĩa matcher mới trong Caddy, dùng để xác định các yêu cầu HTTP nào sẽ bị coi là hotlinking và cần xử lý.
  • path *.jpg *.jpeg *.png *.gif *.webp: Chỉ định rằng matcher này áp dụng cho các file hình ảnh có đuôi .jpg, .jpeg, .png, .gif, hoặc .webp. Đây là các định dạng hình ảnh phổ biến trên website.
  • not { … }: Loại trừ các yêu cầu hợp lệ, tức là các yêu cầu được phép truy cập hình ảnh. Các điều kiện trong khối not xác định những trường hợp không bị coi là hotlinking
• reverse_proxy @hotlinkProtection https://placehold.co: Chuyển tiếp các yêu cầu khớp với matcher @hotlinkProtection (tức là các yêu cầu hotlink) đến dịch vụ Placehold.co, một dịch vụ tạo hình ảnh placeholder miễn phí.
  • header_up Host placehold.co: Đặt header Host trong yêu cầu gửi đến Placehold.co thành placehold.co. Điều này đảm bảo Placehold.co xử lý yêu cầu đúng cách, vì nó mong nhận header Host khớp với domain của nó.
  • rewrite /900×600/red/white/png?text=thuanbui.me:
    • Sửa lại URL thành /900×600/red/white/png?text=thuanbui.me.
    • Dòng lệnh này yêu cầu Placehold.co tạo một hình ảnh PNG:
      • Kích thước: 900×600 pixel.
      • Màu nền: Đỏ
      • Màu chữ: Trắng
      • Nội dung chữ: “thuanbui.me”.
    • Kết quả là một hình ảnh placeholder được trả về thay vì hình ảnh gốc, giúp tiết kiệm băng thông và gửi thông điệp đến hotlinker.
  • header_down Cache-Control “public, max-age=3600”: cho phép trình duyệt hoặc proxy lưu cache hình ảnh placeholder trong 3600 giây (1 giờ), giúp giảm số lượng yêu cầu gửi đến Placehold.co, tối ưu hiệu suất.

Tóm lại: Matcher @hotlinkProtection xác định các yêu cầu hình ảnh từ các domain không thuộc thuanbui.me, và không thuộc các nền tảng được phép (Google, Bing, v.v.). Những yêu cầu này được coi là hotlinking và sẽ bị xử lý bằng cách thay thế bằng hình ảnh từ Placehold.co như bên dưới

File cấu hình Caddyfile đầy đủ của mình sẽ như sau:

www.thuanbui.me, thuanbui.me {
    root * /var/www/thuanbui.me/html
    encode zstd gzip

    # Serve WordPress PHP files through php-fpm:
    php_fastcgi thuanbuime-website-1:9000 {
        root /var/www/html
    }

    # Enable the static file server:
    file_server {
        precompressed gzip
    }
    header / {
        X-Frame-Options "SAMEORIGIN"
        X-Content-Type-Options "nosniff"
    }

    import wordpress

    # Hotlink protection for images
    @hotlinkProtection {
        path *.jpg *.jpeg *.png *.gif *.webp
        not {
            header_regexp Referer ^https?://(.*\.)?(thuanbui\.me|google\.com|googleusercontent\.com|bing\.com|facebook\.com|fbcdn\.net|x\.com|tumblr\.com|zalo\.me|zaloapp\.com|yeuchaybo\.com|purna\.vn)
        }
    }

    # Proxy for other hotlinkers with a general placeholder
    reverse_proxy @hotlinkProtection https://placehold.co {
        header_up Host placehold.co
        rewrite /900x600/red/white/png?text=Stop+stealing+my+content
        header_down Cache-Control "public, max-age=3600"
    }

    log {
        output file /var/log/caddy/thuanbuime.log
    }
}Code language: PHP (php)

Sau đó khởi động lại Caddy bằng docker compose restart để áp dụng cấu hình mới.

Bạn cần chỉnh sửa lại file cấu hình Caddyfile sao cho phù hợp với thiết lập của trang web tương ứng.

3. Lời kết

Ngăn chặn hotlinking với Caddy không chỉ bảo vệ băng thông mà còn gửi thông điệp rõ ràng đến những đối tượng đánh cắp nội dung. Với cấu hình trên, mình có thể bảo vệ hình ảnh trên thuanbui.me, nhưng vẫn cho phép cho phép các nền tảng lớn hiển thị hình ảnh, và phục vụ placeholder tùy chỉnh cho các website vi phạm. Nếu bạn cần thêm domain vào danh sách cho phép, chỉ cần cập nhật Caddyfile và khởi động lại Caddy.