0Pricing
Vue Academy · บทเรียน

การป้องกัน XSS ใน Vue

การหลีกเลี่ยงอักขระอัตโนมัติของ Vue อันตรายของ v-html, DOMPurify สำหรับทำความสะอาดข้อมูล และ trusted types

การป้องกัน XSS ใน Vue เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

XSS คืออะไร

การเขียนสคริปต์ข้ามไซต์ (XSS) คือการโจมตีที่แทรกสคริปต์อันตรายลงในหน้าเว็บ แล้วทำให้สคริปต์ทำงานในเบราว์เซอร์ของผู้ใช้อื่น การโจมตีนี้อาจขโมยคุกกี้ โทเค็น และข้อมูลได้ Vue จะป้องกันให้โดยค่าเริ่มต้น แต่มีรูปแบบการเขียนบางอย่างที่เปิดช่องโหว่นี้ขึ้นมาอีกครั้ง

Vue หลบอักขระในการแทรกข้อความโดยอัตโนมัติ

ข้อความภายในการแทรกแบบวงเล็บปีกกา {{ }} จะถูกหลบอักขระ HTML โดยอัตโนมัติ สตริงจากผู้ใช้ที่มีแท็กจะแสดงเป็นข้อความที่ไม่เป็นอันตราย ไม่ใช่โค้ดที่ทำงาน

<!-- userInput = "<script>alert(1)</script>" -->
<p>{{ userInput }}</p>
<!-- renders the literal text, no script runs -->

การผูกค่าแอตทริบิวต์ก็ปลอดภัยเช่นกัน

การผูกค่าด้วย v-bind / :attr จะหลบอักขระของค่าเช่นกัน ดังนั้นเครื่องหมายอัญประกาศที่ถูกแทรกจึงไม่สามารถหลุดออกจากแอตทริบิวต์เพื่อแทรกตัวจัดการเหตุการณ์ได้

<div :title="userInput">Hover me</div>

อันตรายจาก v-html

v-html กำหนดค่า innerHTML โดยตรง วิธีนี้ไม่หลบอักขระ ดังนั้นมาร์กอัปใด ๆ รวมถึงสคริปต์และตัวจัดการเหตุการณ์ จะถูกแสดงเป็น HTML ที่ทำงานได้จริง

<!-- DANGEROUS with untrusted input -->
<div v-html="userInput"></div>

v-html ถูกโจมตีได้อย่างไร

แม้ไม่มีแท็กสคริปต์ HTML จากผู้โจมตีก็สามารถเรียกใช้โค้ดผ่านแอตทริบิวต์ตัวจัดการเหตุการณ์ หรือเพย์โหลด img onerror ได้

// attacker-supplied value
const userInput = "<img src=x onerror=stealCookies()>";

กฎ: อย่าใช้ v-html กับข้อมูลจากผู้ใช้

กฎที่ง่ายที่สุดคืออย่าส่งเนื้อหาที่ไม่น่าเชื่อถือไปยัง v-html ใช้การแทรกข้อความแบบปกติซึ่งมีการหลบอักขระแทนทุกครั้งที่แหล่งข้อมูลมาจากผู้ใช้

เมื่อจำเป็นต้องแสดงผล HTML

บางครั้งคุณจำเป็นต้องใช้ HTML แบบจัดรูปแบบได้หลากหลายจริง ๆ เช่น เนื้อหาจาก CMS หรือผลลัพธ์จากมาร์กดาวน์ ในกรณีนี้คุณต้องทำความสะอาด HTML ก่อนผูกค่า

การทำความสะอาดด้วย DOMPurify

DOMPurify จะลบแท็กและแอตทริบิวต์ที่เป็นอันตรายออก พร้อมคงรูปแบบที่ปลอดภัยไว้ โปรดติดตั้งและทำความสะอาดข้อมูลก่อนใช้ v-html

npm install dompurify

ทำความสะอาดก่อนผูกค่า

ส่งค่าผ่าน DOMPurify.sanitize ภายในค่าคำนวณ แล้วผูกค่าผลลัพธ์ที่ทำความสะอาดแล้ว

import DOMPurify from "dompurify";
import { computed } from "vue";

const safeHtml = computed(() =>
  DOMPurify.sanitize(props.rawHtml)
);
// template: <div v-html="safeHtml"></div>

กำหนดแท็กที่อนุญาต

คุณสามารถจำกัดรายการอนุญาตเพื่อให้เหลือเฉพาะแท็กที่คาดว่าจะใช้เท่านั้นหลังการทำความสะอาด

DOMPurify.sanitize(html, {
  ALLOWED_TAGS: ["b", "i", "em", "strong", "a", "p"],
  ALLOWED_ATTR: ["href"]
});

แหล่งข้อมูลอื่นที่ไม่ควรไว้ใจ

อย่าไว้ใจ URL เช่นกัน เพราะ href javascript: ในลิงก์ที่ผูกค่าไว้อาจเรียกใช้โค้ดได้ โปรดตรวจสอบหรือทำความสะอาดปลายทางของลิงก์ และอย่าสร้างแหล่งที่มาของ <script> แบบไดนามิกจากข้อมูลของผู้ใช้

// reject dangerous protocols
const safe = /^https?:/.test(url) ? url : "#";

ตรวจสอบอย่างรวดเร็ว

คุณจำเป็นต้องแสดงผล HTML ที่ผู้ใช้ส่งมา วิธีใดจึงจะปลอดภัย

สรุปทบทวน

Vue จะหลบอักขระในการแทรกข้อความ {{ }} และการผูกค่าแอตทริบิวต์โดยอัตโนมัติ จึงทำให้ XSS ส่วนใหญ่ไม่มีผล ข้อยกเว้นที่อันตรายคือ v-html ซึ่งแสดงผล HTML ดิบ อย่าส่งข้อมูลจากผู้ใช้ไปยังสิ่งนี้โดยตรง เมื่อจำเป็นต้องใช้ HTML แบบจัดรูปแบบได้หลากหลาย ให้ทำความสะอาดด้วย DOMPurify ก่อน และอย่าไว้ใจ URL ที่ผู้ใช้ส่งมาเช่นกัน

คำถามที่พบบ่อย

บทเรียน “การป้องกัน XSS ใน Vue” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การป้องกัน XSS ใน Vue” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การป้องกัน XSS ใน Vue”

การหลีกเลี่ยงอักขระอัตโนมัติของ Vue อันตรายของ v-html, DOMPurify สำหรับทำความสะอาดข้อมูล และ trusted types คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การป้องกัน XSS ใน Vue” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การป้องกัน XSS ใน Vue
  2. Content Security Policy (CSP) กับ Vue
  3. การป้องกัน CSRF ใน SPA ของ Vue
  4. รูปแบบการยืนยันตัวตนที่ปลอดภัย
← กลับไปที่ Vue Academy