Image Hotlinking: ทำไมรูปภาพจาก 1688 แสดงข้อผิดพลาดบนเว็บไซต์ของคุณ?

คุณเคยแทรกลิงก์รูปภาพโดยตรงจาก 1688 ลงในเว็บไซต์ของคุณแล้วได้รับภาพที่เสียแทนสินค้าที่ต้องการแสดงหรือไม่? ไม่ต้องกังวล คุณไม่ได้อยู่คนเดียว! นี่คือปรากฏการณ์ที่พบได้บ่อยมาก และเป็นความตั้งใจของ 1688 อย่างแท้จริง มาร่วมหาสาเหตุและวิธีแก้ไขไปพร้อมกันในบทความนี้

🔍 สาเหตุหลัก: 1688 บล็อกรูปภาพตาม Referer

1688 (รวมถึงแพลตฟอร์มอีคอมเมิร์ซขนาดใหญ่อื่นๆ เช่น Taobao, JD.com, Alibaba) ป้องกัน “hotlinking” อย่างจริงจัง นั่นคือการที่คุณนำรูปภาพจากเซิร์ฟเวอร์ของพวกเขามาแสดงโดยตรงบนเว็บไซต์ของคุณ

กลไกการทำงาน

เมื่อเบราว์เซอร์ของผู้ใช้เข้าถึงเว็บไซต์ของคุณและโหลดรูปภาพจาก https://img.alicdn.com/... (หรือโดเมนที่คล้ายกันของ 1688) เซิร์ฟเวอร์ของ 1688 จะตรวจสอบ HTTP Header Referer ซึ่งเป็นฟิลด์ที่ระบุว่าผู้ใช้กำลังเข้าถึงมาจากหน้าใด

หาก Referer ไม่ใช่โดเมนของ 1688 (เช่น คุณเข้าถึงมาจาก yourwebsite.com) 1688 จะ:

• ส่งคืนภาพข้อผิดพลาด (โดยปกติเป็นภาพ “403 Forbidden”, “Hotlinking not allowed” หรือภาพเบลอที่มีข้อความ “1688”)
• หรือส่งคืน status code 403 ทำให้รูปภาพไม่แสดงผล

นี่คือมาตรการปกป้องแบนด์วิธและทรัพยากรที่ออกแบบอย่างรอบคอบโดยทีมวิศวกรของ 1688

💡 ทำไม 1688 ถึงทำเช่นนั้น?

✅ วิธีแก้ไข

คุณไม่สามารถ bypass Referer อย่างถูกต้องตามกฎหมายได้หากไม่ได้รับอนุญาตจาก 1688 แต่มีวิธีแก้ไขทางเลือกที่ปลอดภัยและถูกกฎหมายหลายวิธี:

1. ดาวน์โหลดรูปภาพลงเครื่องและอัปโหลดขึ้นเว็บไซต์ของคุณ

นี่คือวิธีแก้ไขที่ง่ายและมีประสิทธิภาพที่สุด:

• ดาวน์โหลดรูปภาพจาก 1688 → เก็บไว้ในโฟลเดอร์ /images/ ของเว็บไซต์
• ใช้ <img src="https://yourwebsite.com/images/product1.jpg">

ข้อดี: ไม่ละเมิดกฎหมาย ไม่ถูกบล็อก ความเร็วในการโหลดเร็วกว่า (เนื่องจากไม่ต้องพึ่งพาเซิร์ฟเวอร์ภายนอก)

หมายเหตุ: ตรวจสอบให้แน่ใจว่าคุณไม่ละเมิดลิขสิทธิ์ (หากเป็นสินค้าที่มีลิขสิทธิ์เฉพาะ ควรขออนุญาตจากซัพพลายเออร์)

2. ใช้ CDN หรือบริการจัดเก็บรูปภาพ

บริการต่างๆ เช่น Cloudinary, Imgur, AWS S3 อาจเป็นทางเลือกที่ดี:

• อัปโหลดรูปภาพไปยังบริการนี้ → รับลิงก์ใหม่
• ยังคงไม่ต้องพึ่งพา 1688

ข้อดี: ปรับแต่งรูปภาพให้เหมาะสม ความเร็วในการโหลดเร็ว และสามารถเพิ่มฟีเจอร์ต่างๆ เช่น การแก้ไขรูปภาพแบบไดนามิก

3. Bypass referer

คำปฏิเสธความรับผิดชอบ: การใช้ “bypass referer” อาจนำไปสู่ความเสี่ยงดังต่อไปนี้:

• ละเมิดข้อกำหนดการให้บริการของ 1688
• อาจถูกบล็อก IP หรือบัญชี
• ไม่ยั่งยืน — เป็นเพียงชั่วคราว

โปรดพิจารณาอย่างรอบคอบก่อนใช้งาน

ตัวอย่างต่อไปนี้ใช้ Expressjs เพื่อ bypass referer คุณสามารถใช้เฟรมเวิร์กอื่นเพื่อนำไปปรับใช้ในลักษณะเดียวกันได้

// Sử dụng bằng cách đặt api này trong src của thẻ img: <img src=`/proxy-image?url=https://cbu01.alicdn.com/img/ibank/ten_anh.jpg` />
app.get('/proxy-image', async (req, res) => {
  const imageUrl = req.query.url

  if (!imageUrl) {
    return res.status(400).send('Missing "url" query parameter')
  }

  try {
    const parsedUrl = new URL(imageUrl)

    const userAgent = req.headers['user-agent'] || USER_AGENT

    const response = await fetch(imageUrl, {
      headers: {
        Referer: parsedUrl.origin,
        'User-Agent': userAgent,
      },
    })

    if (!response.ok) {
      console.warn(`[Image Proxy] Failed ${response.status}: ${imageUrl}`)
      return res.status(response.status).send(`HTTP ${response.status}`)
    }

    const buffer = await response.arrayBuffer()
    const contentType = response.headers.get('content-type') || 'image/jpeg'

    res.setHeader('Content-Type', contentType)
    res.setHeader('Cache-Control', 'public, max-age=86400')
    res.setHeader('Vary', 'Accept-Encoding')
    res.end(Buffer.from(buffer))
  } catch (error) {
    console.error(`[Image Proxy] Error: ${error.message}`)
    res.status(500).send('Internal Server Error')
  }
})

คุณสามารถใช้ AI เพื่อแปลงโค้ดข้างต้นเป็นภาษาการเขียนโปรแกรมที่เกี่ยวข้องได้ นอกจากนี้ คุณยังสามารถใช้พร็อกซีเซิร์ฟเวอร์แบบ static เช่น nginx เพื่อทำการ bypass นี้ได้

🔧 ตรวจสอบอย่างรวดเร็ว: คุณถูกบล็อก Referer หรือไม่?

คุณสามารถตรวจสอบได้อย่างง่ายดายว่าคุณถูกบล็อก referer หรือไม่โดย:

1. เปิด DevTools (F12) → แท็บ Network
2. โหลดหน้าใหม่ → ค้นหาไฟล์รูปภาพ → คลิกที่ไฟล์นั้น
3. ตรวจสอบ:
   • Status: เป็น 403 Forbidden หรือไม่?
   • Response: เห็นภาพ “Hotlinking is not allowed” หรือไม่?
   • Headers → Referer: เป็นโดเมนของคุณหรือไม่?

หากเป็นเช่นนั้น → คุณถูกบล็อก referer แล้ว!

✅ สรุป

ลิงก์รูปภาพโดยตรงจาก 1688 มีข้อผิดพลาด referer เนื่องจาก 1688 บล็อก hotlinking อย่างจริงจังเพื่อปกป้องทรัพยากรและลิขสิทธิ์ นี่คือพฤติกรรมที่ถูกกฎหมายและพบได้ทั่วไปบนแพลตฟอร์มอีคอมเมิร์ซขนาดใหญ่

วิธีแก้ไขที่ดีที่สุด: ดาวน์โหลดรูปภาพและโฮสต์บนเว็บไซต์หรือ CDN ของคุณ ไม่ควรพยายาม “แฮ็ก” referer — เสี่ยงต่อการถูกลงโทษ เสียความน่าเชื่อถือ และไม่เสถียร