แท็กที่เกี่ยวข้องกับข้อมูลเมตา

บทความนี้อธิบายเกี่ยวกับแท็กที่เกี่ยวข้องกับข้อมูลเมตา

มันอธิบายแท็ก <meta> รวมถึงประเด็นที่เกี่ยวข้องกับ SEO การออกแบบที่ตอบสนอง และ Content-Security-Policy

YouTube Video

แท็กที่เกี่ยวข้องกับข้อมูลเมตา

แท็ก <meta>

1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0">

• แท็ก <meta> ให้ข้อมูลเมตาสำหรับเอกสาร HTML ข้อมูลเมตาไม่ได้แสดงบนหน้า แต่ถูกใช้โดยเครื่องมือค้นหาและเบราว์เซอร์ แท็ก <meta> ใช้สำหรับคำอธิบายหน้า คำหลัก ข้อมูลผู้เขียน และการตั้งค่าการออกแบบที่ตอบสนอง

แท็ก <meta name="viewport">

1<meta name="viewport" content="width=device-width, initial-scale=1">

• แท็ก <meta name="viewport"> ควบคุมการจัดวางและการปรับขนาดของหน้าเว็บบนอุปกรณ์ต่างๆ มักใช้ในการออกแบบที่ตอบสนองเพื่อให้แน่ใจว่าแสดงผลได้อย่างถูกต้องบนอุปกรณ์มือถือ

แท็ก <meta name="description">

1<meta name="description" content="An example webpage">

• แท็ก <meta name="description"> ใช้เพื่ออธิบายเนื้อหาของหน้าเว็บอย่างย่อ เครื่องมือค้นหาใช้คำอธิบายนี้เพื่อแสดงสรุปของหน้าในผลการค้นหา

แท็ก <meta name="keywords">

1<meta name="keywords" content="HTML, CSS, JavaScript">

• แท็ก <meta name="keywords"> ให้รายการคำหลักที่เกี่ยวข้องกับเนื้อหาของหน้า เครื่องมือค้นหาใช้คำหลักเหล่านี้เพื่อทำความเข้าใจเนื้อหาของหน้าให้ดียิ่งขึ้น

แท็ก <meta name="author">

1<meta name="author" content="John Doe">

• แท็ก <meta name="author"> ระบุผู้เขียนของหน้าเว็บ ข้อมูลนี้ถูกใช้ส่วนใหญ่โดยเครื่องมือค้นหาและเครื่องมืออื่นๆ เพื่อระบุผู้เขียนของหน้าอย่างถูกต้อง

แท็ก <meta http-equiv="refresh">

1<meta http-equiv="refresh" content="5; url=https://example.com">

• แท็ก <meta http-equiv="refresh"> ใช้ในการรีเฟรชหน้าอัตโนมัติหรือเปลี่ยนเส้นทางไปยัง URL อื่นหลังจากเวลาที่กำหนด มันมีประโยชน์สำหรับการรีโหลดหน้าใหม่หรือเปลี่ยนเส้นทางผู้ใช้

แท็ก <meta http-equiv="cache-control">

1<meta http-equiv="cache-control" content="no-cache">

• แท็ก <meta http-equiv="cache-control"> ใช้ในการควบคุมพฤติกรรมการแคชของหน้าเว็บ มันสามารถระบุว่าให้ทำการแคชหน้าเว็บหรือทำการตรวจสอบใหม่เมื่อมีการเข้าถึงครั้งต่อไป

แท็ก <meta http-equiv="expires">

1<meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT">

• แท็ก <meta http-equiv="expires"> กำหนดวันที่หมดอายุสำหรับเนื้อหาของหน้า เมื่อวันที่ที่กำหนดผ่านไป เนื้อหาจะกลายเป็นล้าสมัย และเบราว์เซอร์จะถูกกระตุ้นให้ดึงข้อมูลเวอร์ชันใหม่

แท็ก <meta http-equiv="X-UA-Compatible">

1<meta http-equiv="X-UA-Compatible" content="IE=edge">

• แท็ก <meta http-equiv="X-UA-Compatible"> ใช้ในการระบุโหมดความเข้ากันได้สำหรับ Internet Explorer แท็กนี้ทำให้มั่นใจได้ว่าเบราว์เซอร์ใช้เวอร์ชันที่เหมาะสมของเอนจินการแสดงผลเพื่อแสดงหน้า

แท็ก <meta http-equiv="content-security-policy">

คุณสมบัติ http-equiv="content-security-policy" ในแท็ก HTML meta เป็นฟังก์ชันที่ใช้บังคับกฎความปลอดภัยเฉพาะในเบราว์เซอร์เพื่อเสริมความปลอดภัยของหน้าเว็บ โดยการใช้คุณสมบัตินี้ นักพัฒนาเว็บไซต์สามารถตั้งนโยบายเกี่ยวกับการโหลดทรัพยากรและการดำเนินการของสคริปต์เพื่อป้องกันการโจมตี เช่น XSS (Cross-Site Scripting) และการแทรกข้อมูล

อะไรคือ Content-Security-Policy?

Content-Security-Policy (CSP) เป็นประเภทของ HTTP header ที่ใช้ควบคุมว่าทรัพยากรภายนอก (เช่น ภาพ สคริปต์ สไตล์ชีต ฯลฯ) หน้าเว็บสามารถโหลดได้และโค้ดประเภทใดที่สามารถดำเนินการได้ โดยปกติจะส่งเป็น HTTP header แต่สามารถกำหนดภายใน HTML ได้ด้วยการใช้แท็ก meta วิธีนี้ช่วยให้สามารถกำหนด CSP บนฝั่งไคลเอ็นต์ แทนที่จะต้องตั้งค่าหัวข้อบนฝั่งเซิร์ฟเวอร์

ตัวอย่างเช่น คุณสามารถตั้งค่า CSP ในแท็ก meta ของ HTML ได้ดังนี้:

1<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://example.com; script-src 'self' https://apis.google.com">

ในตัวอย่างนี้ นโยบายต่อไปนี้จะถูกตั้งค่า:

• default-src 'self': โดยพื้นฐานแล้ว ทรัพยากรทั้งหมดจะโหลดจากแหล่งเดียวกัน (ตัวเอง) เท่านั้น
• img-src https://example.com: รูปภาพจะถูกโหลดเฉพาะจาก https://example.com
• script-src 'self' https://apis.google.com: สคริปต์จะถูกดำเนินการเฉพาะจากแหล่งเดียวกันหรือลิงก์จาก https://apis.google.com

ความแตกต่างระหว่าง http-equiv และ HTTP headers

โดยปกติแล้ว Content-Security-Policy จะถูกส่งจากเซิร์ฟเวอร์ไปยังไคลเอ็นต์เป็น HTTP header อย่างไรก็ตาม หากคุณตั้งค่าในฝั่งไคลเอ็นต์ด้วยการใช้แท็ก meta สามารถเขียนลงใน HTML ได้โดยตรง

อย่างไรก็ตาม มีความแตกต่างที่สำคัญบางประการระหว่างการตั้งค่าเป็น HTTP header และการกำหนดด้วยแท็ก meta:

1. ลำดับความสำคัญ: CSP ที่ส่งผ่าน HTTP header จะได้รับการใช้งานก่อนหน้าที่ระบุในแท็ก meta ซึ่งหมายความว่าหากตั้งค่า CSP บนฝั่งเซิร์ฟเวอร์ จะไม่สามารถถูกแทนที่โดยแท็ก meta ที่ใช้บนฝั่งไคลเอ็นต์ได้

2. เวลาการใช้งาน: CSP ที่ระบุผ่าน HTTP header จะถูกใช้งานก่อนที่หน้าเว็บจะโหลดเสร็จ ในทางตรงกันข้าม CSP ที่ระบุผ่านแท็ก meta จะถูกใช้งานเมื่อ HTML ถูกแปลผล ซึ่งอาจทำให้ทรัพยากรบางส่วนถูกโหลดไปแล้ว

คำสั่งที่มีใน CSP

ใน CSP มีคำสั่งต่างๆ ที่ใช้เพื่อกำหนดนโยบายที่อนุญาตหรือไม่อนุญาตให้โหลดและดำเนินการทรัพยากรบางประเภท directive ทั่วไปประกอบด้วยสิ่งต่อไปนี้:

• default-src: กำหนดนโยบายแหล่งที่มาสำหรับทรัพยากรทั้งหมดโดยค่าเริ่มต้น มันจะถูกใช้งานกับทรัพยากรที่ไม่ได้กำหนดไว้โดยคำสั่งอื่น ๆ
• script-src: ระบุแหล่งที่มาสำหรับ JavaScript เพื่อป้องกันการโจมตีแบบ XSS คุณสามารถจำกัดการโหลดสคริปต์จากไซต์ภายนอก
• style-src: ระบุแหล่งที่มาสำหรับ CSS โดยการจำกัดการโหลดสไตล์ชีตจากแหล่งภายนอก คุณสามารถป้องกันการโจมตีสไตล์ของเว็บไซต์ได้
• img-src: ระบุแหล่งที่มาสำหรับภาพ คุณสามารถจำกัดการโหลดรูปภาพจากแหล่งภายนอกได้
• connect-src: ระบุ URL ที่อนุญาตสำหรับ XMLHttpRequests และการเชื่อมต่อ WebSocket สิ่งนี้ช่วยให้การสื่อสารผ่าน API ภายนอกและ WebSocket มีความปลอดภัย

โดยการรวมคำสั่งเหล่านี้ คุณสามารถสร้างนโยบายที่ละเอียดสำหรับทรัพยากรบนหน้าเว็บของคุณ

การตั้งค่า CSP ที่ปฏิบัติได้สำหรับการเพิ่มความปลอดภัย

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

1<meta http-equiv="Content-Security-Policy"
2    content="default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none'; style-src 'self'; base-uri 'self'; form-action 'self';">

นโยบายต่อไปนี้ถูกนำมาใช้กับการกำหนดค่านี้:

• default-src 'self': ทรัพยากรทั้งหมดจะโหลดได้เฉพาะจากแหล่งที่มาเดียวกัน
• script-src 'self' https://trusted-cdn.com: สคริปต์จะโหลดได้เฉพาะจากแหล่งที่มาเดียวกันหรือ CDN ที่เชื่อถือได้
• object-src 'none': แท็ก object จะไม่ได้ถูกใช้งาน สิ่งนี้เพื่อป้องกันการโจมตีที่ใช้ Flash หรือปลั๊กอิน
• style-src 'self': โหลดสไตล์ชีตเฉพาะจากต้นทางเดียวกัน
• base-uri 'self': ฐาน URL ที่กำหนดโดยแท็ก <base> จะถูกจำกัดให้ต้นทางเดียวกัน
• form-action 'self': จุดหมายปลายทางสำหรับส่งแบบฟอร์มจะถูกจำกัดให้ต้นทางเดียวกัน สิ่งนี้ลดความเสี่ยงที่ข้อมูลจากแบบฟอร์มจะถูกส่งไปยังเว็บไซต์ภายนอก

สรุป

ด้วยการใช้ http-equiv="content-security-policy" เพื่อกำหนด CSP ใน HTML จึงเป็นไปได้ที่จะเพิ่มความปลอดภัยให้กับเว็บเพจ CSP ที่ถูกกำหนดค่าอย่างถูกต้องเป็นเครื่องมือที่ทรงพลังที่ลดความเสี่ยงจากการโจมตี XSS และการรั่วไหลของข้อมูลและปกป้องเว็บไซต์ของคุณ

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video