จะใช้ Secure Headers โดยใช้ Cloudflare Workers ได้อย่างไร

คำแนะนำทีละขั้นตอนในการติดตั้งส่วนหัว HTTP ที่ปลอดภัยบนเว็บไซต์ที่ขับเคลื่อนโดย Cloudflare โดยใช้ Cloudflare Workers

มีหลายวิธีในการใช้ส่วนหัวการตอบสนอง HTTP เพื่อรักษาความปลอดภัยไซต์จากช่องโหว่ทั่วไป เช่น XSS, Clickjacking, MIMI sniffing, cross-site injection และอื่นๆ อีกมากมาย แนวทางปฏิบัติที่นำมาใช้กันอย่างแพร่หลายและแนะนำโดย สทศ.

ก่อนหน้านี้ ฉันได้เขียนเกี่ยวกับการนำส่วนหัวไปใช้ในเว็บเซิร์ฟเวอร์ เช่น Apache, Nginx และ IIS อย่างไรก็ตาม หากคุณใช้ Cloudflare เพื่อปกป้องและเพิ่มประสิทธิภาพไซต์ของคุณ คุณอาจใช้ประโยชน์จาก คนงาน Cloudflare เพื่อจัดการส่วนหัวการตอบสนอง HTTP

Cloudflare Workers เป็นแพลตฟอร์มไร้เซิร์ฟเวอร์ที่คุณสามารถรันโค้ด JavaScript, C, C++, Rust ถูกนำไปใช้ในศูนย์ข้อมูล Cloudflare ทุกแห่งซึ่งมีมากกว่า 200 แห่งทั่วโลก

การใช้งานนั้นตรงไปตรงมาและยืดหยุ่นมาก ทำให้คุณมีความยืดหยุ่นในการใช้ส่วนหัวกับทั้งไซต์ รวมถึงโดเมนย่อยหรือ URI เฉพาะด้วย a รูปแบบที่ตรงกันโดยใช้ Regex

สำหรับการสาธิตนี้ ฉันจะใช้ รหัส โดย สก็อตต์ เฮลม์

เริ่มกันเลย…👨‍💻

  • คัดลอกรหัส worker.js จาก GitHub และวางลงในโปรแกรมแก้ไขสคริปต์
const securityHeaders = {
        "Content-Security-Policy": "upgrade-insecure-requests",
        "Strict-Transport-Security": "max-age=1000",
        "X-Xss-Protection": "1; mode=block",
        "X-Frame-Options": "DENY",
        "X-Content-Type-Options": "nosniff",
        "Referrer-Policy": "strict-origin-when-cross-origin"
    },
    sanitiseHeaders = {
        Server: ""
    },
    removeHeaders = [
        "Public-Key-Pins",
        "X-Powered-By",
        "X-AspNet-Version"
    ];

async function addHeaders(req) {
    const response = await fetch(req),
        newHeaders = new Headers(response.headers),
        setHeaders = Object.assign({}, securityHeaders, sanitiseHeaders);

    if (newHeaders.has("Content-Type") && !newHeaders.get("Content-Type").includes("text/html")) {
        return new Response(response.body, {
            status: response.status,
            statusText: response.statusText,
            headers: newHeaders
        });
    }

    Object.keys(setHeaders).forEach(name => newHeaders.set(name, setHeaders[name]));

    removeHeaders.forEach(name => newHeaders.delete(name));

    return new Response(response.body, {
        status: response.status,
        statusText: response.statusText,
        headers: newHeaders
    });
}

addEventListener("fetch", event => event.respondWith(addHeaders(event.request)));

อย่าเพิ่งบันทึก คุณอาจต้องการปรับส่วนหัวต่อไปนี้ให้ตรงกับความต้องการ

  วิธีแก้ไข Cuphead ไม่บันทึกความคืบหน้า

นโยบายความปลอดภัยเนื้อหา – หากคุณต้องการใช้นโยบายแอปพลิเคชันของคุณ คุณสามารถทำได้ที่นี่

ตัวอย่าง – หากคุณต้องการจัดหาเนื้อหาผ่าน iFrame บน URL หลายรายการ คุณอาจใช้ประโยชน์จากบรรพบุรุษของเฟรมดังต่อไปนี้

"Content-Security-Policy" : "frame-ancestors 'self' gf.dev admintrick.com.com",

ด้านบนจะอนุญาตให้โหลดเนื้อหาจาก gf.dev, admintrick.com.com และไซต์ตนเอง

X-Frame-Options – คุณสามารถเปลี่ยนเป็น SAMEORIGIN ได้ หากคุณต้องการแสดงเนื้อหาของไซต์ของคุณในบางหน้าภายในไซต์เดียวกันโดยใช้ iframe

"X-Frame-Options": "SAMEORIGIN",

เซิร์ฟเวอร์ – คุณสามารถทำความสะอาดส่วนหัวของเซิร์ฟเวอร์ได้ที่นี่ ใส่อะไรก็ได้ตามใจชอบ

"Server" : "admintrick.com Server",

RemoveHeaders – คุณจำเป็นต้องลบส่วนหัวบางส่วนเพื่อซ่อนเวอร์ชันต่างๆ เพื่อลดช่องโหว่การรั่วไหลของข้อมูลหรือไม่

คุณสามารถทำได้ที่นี่

let removeHeaders = [
	"Public-Key-Pins",
	"X-Powered-By",
	"X-AspNet-Version",
]

การเพิ่มส่วนหัวใหม่ – หากคุณต้องการส่งส่วนหัวที่กำหนดเองบางส่วนไปยังแอปพลิเคชันของคุณ คุณสามารถเพิ่มได้ในส่วน securityHeaders ด้านล่าง

let securityHeaders = {
	"Content-Security-Policy" : "frame-ancestors 'self' gf.dev admintrick.com.com",
	"Strict-Transport-Security" : "max-age=1000",
	"X-Xss-Protection" : "1; mode=block",
	"X-Frame-Options" : "SAMEORIGIN",
	"X-Content-Type-Options" : "nosniff",
	"Referrer-Policy" : "strict-origin-when-cross-origin",
        "Custom-Header"  : "Success",
}

เมื่อคุณปรับส่วนหัวทั้งหมดที่คุณต้องการเสร็จแล้ว ให้ตั้งชื่อผู้ปฏิบัติงาน แล้วคลิก บันทึกและปรับใช้

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

  • ไปที่หน้าแรก/แดชบอร์ดของ Cloudflare แล้วเลือกไซต์
  • ไปที่แท็บคนงาน >> เพิ่มเส้นทาง
  • ป้อน URL ในเส้นทาง คุณสามารถใช้ Regex ได้ที่นี่
  • เลือกคนงานที่สร้างขึ้นใหม่และบันทึก

นั่นคือทั้งหมด; ภายในไม่กี่วินาที คุณจะสังเกตเห็นว่าส่วนหัวทั้งหมดถูกนำไปใช้กับไซต์

นี่คือลักษณะของ Chrome Dev Tools คุณยังสามารถทดสอบส่วนหัวผ่านเครื่องมือส่วนหัว HTTP

  เกิดอะไรขึ้นกับ LimeTorrents?

ฉันไม่รู้ว่าเหตุใดส่วนหัวของเซิร์ฟเวอร์จึงไม่สะท้อน ฉันเดาว่า Cloudflare กำลังเอาชนะสิ่งนี้

คุณเห็นแล้วว่าการติดตั้งใช้งานโดยรวมใช้เวลาประมาณ 15 นาที และไม่จำเป็นต้องหยุดทำงานหรือรีสตาร์ทเหมือนเช่น Apache หรือ Nginx หากคุณวางแผนที่จะใช้สิ่งนี้กับไซต์ที่ใช้งานจริง ฉันขอแนะนำให้ทดสอบก่อนในสภาพแวดล้อมที่ต่ำกว่า หรือใช้เส้นทางในหน้าทดสอบเพื่อตรวจสอบผลลัพธ์ เมื่อพอใจแล้วให้กดไปที่ใดก็ได้ที่คุณต้องการ

นี่มันเจ๋งมาก!

ขอบคุณ สกอตต์ สำหรับรหัส

เรื่องล่าสุด

x