Dorew
- Nội dung:
- # Hello anh em, lâu rồi không gặp…
- # Ý tưởng tổng thể
- # Code phía Cloudflare Workers (Imgur proxy)
- # Mở rộng: Cloudinary + Cloudflare Workers cho anh em thích an toàn
- # Tham khảo code đầy đủ
- # Lời kết
Hello anh em, lâu rồi không gặp…
Hello ae, lại là mình đây. Lâu lắm rồi mình mới lượn lại Dorew, tiện thể ngó xem sức khỏe anh em thế nào thì vô tình đọc được một bài khá hay của anh @Trùm Phụ về chủ đề API Cloudinary upload ảnh thay thế cho Imgur.
Phải công nhận là bài đó làm rất ổn, logic rõ ràng, chạy ngon. Nhưng có một vấn đề muôn thuở: PHP. Với nhiều anh em thích free, không VPS, không hosting, không muốn mở cổng cho DDOS ghé thăm mỗi tối thì PHP đôi khi lại thành… gánh nặng tinh thần.
Trong khi đó, Imgur thì anh em cũng biết rồi đấy, từ giữa tháng 3 năm ngoái đã bắt đầu khó ở với IP Việt Nam. Upload lúc được lúc không, lúc thì 403, lúc thì im lặng như người cũ không rep tin nhắn. Thế là anh em bắt đầu tìm giải pháp khác, Cloudinary là một cái tên sáng giá.
Nhưng Cloudinary lại có một nhược điểm chí mạng: signed API key. Lỡ tay public ra ngoài thì thôi, xác định bay màu, sáng ngủ dậy thấy quota đi không lời từ biệt.
Vậy nên câu hỏi đặt ra là:
Có cách nào upload ảnh, không PHP, không lộ key, vẫn free, vẫn kiểm soát được traffic không?
Câu trả lời là: có. Và nhân vật chính hôm nay là… Cloudflare Workers.
Ý tưởng tổng thể
Thay vì để client gọi thẳng tới Imgur hay Cloudinary, mình dùng Cloudflare Workers làm trung gian. Workers lúc này đóng vai trò như một proxy, vừa che chắn API key, vừa xử lý CORS, vừa kiểm soát request.
Nghe thì có vẻ cao siêu, nhưng thực tế chức năng cần dùng lại khá ít.
Với phương án upload ảnh lên Imgur thông qua Cloudflare, ta chỉ cần:
- ⋆ Imgur Client ID
- ⋆ Fake User-Agent cho đỡ bị soi
- ⋆ CORS headers để client JS gọi thoải mái
Code phía Cloudflare Workers (Imgur proxy)
</> js
addEventListener("fetch", event =] {
event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
const corsHeaders = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "POST, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type",
};
if (request.method === "OPTIONS") {
return new Response(null, { headers: corsHeaders });
}
if (request.method !== "POST") {
return new Response(JSON.stringify({ error: "Method Not Allowed" }), {
status: 405,
headers: { "Content-Type": "application/json", ...corsHeaders },
});
}
const url = new URL(request.url);
const clientId = url.searchParams.get("clientId");
if (!clientId) {
return new Response(JSON.stringify({
success: false,
error: "Missing clientId query parameter"
}), {
status: 400,
headers: { "Content-Type": "application/json", ...corsHeaders },
});
}
const formData = await request.formData();
const image = formData.get("image");
if (!image) {
return new Response(JSON.stringify({
success: false,
error: "No image provided"
}), {
status: 400,
headers: { "Content-Type": "application/json", ...corsHeaders },
});
}
const imgurForm = new FormData();
imgurForm.append("image", image);
const userAgent = request.headers.get("User-Agent") || "Mozilla/5.0";
const imgurResponse = await fetch("https://api.imgur.com/3/image", {
method: "POST",
body: imgurForm,
headers: {
"Authorization": Client-ID ${clientId},
"User-Agent": userAgent,
},
});
const data = await imgurResponse.json();
return new Response(JSON.stringify(data), {
status: imgurResponse.status,
headers: {
"Content-Type": "application/json",
...corsHeaders
},
});
}
Sau khi deploy, ta chỉ việc gọi URL dạng:
</> code
https://pagecuaban.workers.dev?clientId=YOUR_IMGUR_CLIENT_ID
Client JS upload ảnh bình thường, không bị CORS chặn, không cần PHP, Imgur cũng khó mà biết ai đang đứng sau.
Mở rộng: Cloudinary + Cloudflare Workers cho anh em thích an toàn
Nếu Imgur vẫn khiến bạn thấy “thiếu niềm tin”, thì Cloudinary là phương án ngon hơn. Và điểm mấu chốt ở đây chính là Cloudflare Workers có hỗ trợ Variables & Secrets.
Tức là:
- ⋆ API key giấu kín trong Workers
- ⋆ Client không bao giờ thấy key
- ⋆ Lộ code cũng không sao
Mô hình hoạt động:
- ⋆ /upload =] client gửi ảnh lên Workers
- ⋆ Workers dùng key bí mật upload lên Cloudinary
- ⋆ /view/filepath =] Workers lấy ảnh từ Cloudinary trả về client
Với cách này, bạn vừa kiểm soát được lưu lượng, vừa tránh được cảnh “publish nhầm key xong khóc trong đêm”.
Tham khảo code đầy đủ
- ⋆ Phía Cloudflare (Cloudinary server):
https://demonn.novawap.com/js.inaryserver - ⋆ Phía client JS:
https://demonn.novawap.com/js-inaryclient
Lời kết
Tóm lại, nếu bạn:
- ⋆ Không thích PHP
- ⋆ Không muốn thuê server
- ⋆ Muốn upload ảnh free
- ⋆ Muốn ngủ ngon không lo lộ API key
Thì Cloudflare Workers chính là thằng đứng giữa “đỡ đạn” cực kỳ hợp lý. Vừa sạch sẽ, vừa hiện đại, vừa đúng chất chơi của anh em thích JS runtime.
Anh em nào còn cách chơi dị hơn nữa thì cứ chia sẻ, biết đâu lại có thêm vài bài dài dòng cho Dorew đỡ buồn.
Nguồn: Dorew.ovh
