DOMPurify
DOMPurify 3.2.1
DOMpurify คือโปรแกรมฆ่าเชื้อ XSS ที่ใช้ DOM เท่านั้น รวดเร็วเป็นพิเศษ และทนทานต่อผู้ใช้มากที่สุดสำหรับ HTML, MathML และ SVG
นอกจากนี้ยังใช้และเริ่มต้นได้ง่ายมาก DOMpurify เริ่มต้นในเดือนกุมภาพันธ์ 2014 และในขณะเดียวกันก็มาถึงเวอร์ชัน v3.2.1 แล้ว
DOMPurify เขียนด้วย JavaScript และใช้งานได้กับเบราว์เซอร์สมัยใหม่ทั้งหมด (Safari (10+), Opera (15+), Edge, Firefox และ Chrome - เช่นเดียวกับแทบทุกอย่างที่ใช้ Blink, Gecko หรือ WebKit) มันไม่พังบน MSIE หรือเบราว์เซอร์รุ่นเก่าอื่นๆ มันไม่ทำอะไรเลย
โปรดทราบว่า DOMpurify v2.5.7 เป็นเวอร์ชันล่าสุดที่รองรับ MSIE สำหรับการอัปเดตความปลอดภัยที่สำคัญที่เข้ากันได้กับ MSIE โปรดใช้สาขา 2.x
การทดสอบอัตโนมัติของเราครอบคลุมเบราว์เซอร์ที่แตกต่างกัน 24 เบราว์เซอร์ในขณะนี้ และจะมีเพิ่มมากขึ้นในเร็วๆ นี้ นอกจากนี้เรายังครอบคลุม Node.js v16.x, v17.x, v18.x และ v19.x, การรัน DOMpurify บน jsdom เป็นที่ทราบกันว่าโหนดเวอร์ชันเก่าก็ใช้งานได้เช่นกัน แต่เดี๋ยวก่อน... ไม่มีการรับประกัน
DOMpurify เขียนโดยผู้รักษาความปลอดภัยซึ่งมีพื้นฐานด้านการโจมตีทางเว็บและ XSS เป็นอย่างดี อย่ากลัวเลย สำหรับรายละเอียดเพิ่มเติม โปรดอ่านเกี่ยวกับเป้าหมายด้านความปลอดภัยและแบบจำลองภัยคุกคามของเรา กรุณาอ่านมัน ชอบจริงๆ
DOMpurify ทำความสะอาด HTML และป้องกันการโจมตี XSS คุณสามารถป้อน DOMpurify ด้วยสตริงที่เต็มไปด้วย HTML สกปรก และมันจะส่งคืนสตริง (เว้นแต่จะกำหนดค่าเป็นอย่างอื่น) ด้วย HTML ใหม่ทั้งหมด DOMpurify จะตัดทุกอย่างที่มี HTML ที่เป็นอันตรายออก และป้องกันการโจมตี XSS และความน่ารังเกียจอื่นๆ มันยังเร็วปานเลือดเลย เราใช้เทคโนโลยีที่เบราว์เซอร์มอบให้และเปลี่ยนให้เป็นตัวกรอง XSS ยิ่งเบราว์เซอร์ของคุณเร็วขึ้นเท่าไหร่ DOMpurify ก็จะยิ่งเร็วขึ้นเท่านั้น
มันง่าย. เพียงรวม DOMpurify ไว้บนเว็บไซต์ของคุณ
<script type="text/javascript" src="src/purify.js"></script>
<script type="text/javascript" src="dist/purify.min.js"></script>
หลังจากนั้นคุณสามารถฆ่าเชื้อสตริงได้โดยการรันโค้ดต่อไปนี้:
const clean = DOMPurify.sanitize (สกปรก);
หรือบางทีถ้าคุณชอบทำงานกับ Angular หรือคล้ายกัน:
นำเข้า DOMPurify จาก 'dompurify';const clean = DOMPurify.sanitize('<b>สวัสดี</b>'); HTML ที่เป็นผลลัพธ์สามารถเขียนลงในองค์ประกอบ DOM โดยใช้ innerHTML หรือ DOM โดยใช้ document.write() นั่นก็ขึ้นอยู่กับคุณอย่างเต็มที่ โปรดทราบว่าตามค่าเริ่มต้น เราอนุญาต HTML, SVG และ MathML หากคุณต้องการเพียง HTML ซึ่งอาจเป็นกรณีการใช้งานทั่วไป คุณสามารถตั้งค่าได้อย่างง่ายดายเช่นกัน:
const clean = DOMPurify.sanitize (สกปรก, { USE_PROFILES: { html: true } });โปรดทราบว่าหากคุณฆ่าเชื้อ HTML ก่อน แล้วจึงแก้ไข ในภายหลัง คุณอาจ ทำให้ผลกระทบของการฆ่าเชื้อเป็นโมฆะ ได้อย่างง่ายดาย หากคุณป้อนมาร์กอัปที่ผ่านการฆ่าเชื้อแล้วไปยังห้องสมุดอื่น หลังจาก การฆ่าเชื้อแล้ว โปรดตรวจสอบให้แน่ใจว่าห้องสมุดจะไม่ยุ่งเกี่ยวกับ HTML ในตัวมันเอง
หลังจากฆ่าเชื้อมาร์กอัปของคุณแล้ว คุณยังสามารถดูคุณสมบัติ DOMPurify.removed และค้นหาว่ามีองค์ประกอบและคุณลักษณะใดบ้างที่ถูกโยนทิ้งไป โปรด อย่าใช้ คุณสมบัตินี้ในการตัดสินใจที่มีความสำคัญด้านความปลอดภัย นี่เป็นเพียงตัวช่วยเล็กๆ น้อยๆ สำหรับจิตใจที่อยากรู้อยากเห็น
ในทางเทคนิคแล้ว DOMpurify ยังทำงานฝั่งเซิร์ฟเวอร์กับ Node.js ได้ด้วย ฝ่ายสนับสนุนของเรามุ่งมั่นที่จะปฏิบัติตามรอบการเปิดตัว Node.js
การเรียกใช้ DOMpurify บนเซิร์ฟเวอร์จำเป็นต้องมี DOM ซึ่งอาจไม่น่าแปลกใจเลย โดยปกติแล้ว jsdom เป็นเครื่องมือที่คุณเลือก และเรา ขอแนะนำอย่างยิ่ง ให้ใช้ jsdom เวอร์ชันล่าสุด
ทำไม เนื่องจาก jsdom เวอร์ชันเก่าเป็นที่รู้กันว่ามีปัญหาในลักษณะที่ทำให้เกิด XSS แม้ว่า DOMPurify จะทำทุกอย่างถูกต้อง 100% ก็ตาม มี เวกเตอร์การโจมตีที่รู้จัก เช่น jsdom v19.0.0 ที่ได้รับการแก้ไขใน jsdom v20.0.0 - และเราขอแนะนำอย่างยิ่งให้อัป เดต jsdom ให้ทันสมัยอยู่เสมอด้วยเหตุนี้
โปรดทราบว่ายังมีเครื่องมืออย่าง happy-dom อยู่แต่ ยังไม่ถือว่าปลอดภัย ในตอนนี้ ไม่แนะนำให้รวม DOMpurify กับ happy-dom และอาจนำไปสู่ XSS
นอกจากนั้น คุณสามารถใช้ DOMpurify บนเซิร์ฟเวอร์ได้ อาจจะ. สิ่งนี้ขึ้นอยู่กับ jsdom หรือ DOM ใดก็ตามที่คุณใช้ฝั่งเซิร์ฟเวอร์ หากคุณสามารถอยู่กับสิ่งนั้นได้ นี่คือวิธีที่จะทำให้มันสำเร็จ:
npm ติดตั้ง dompurify npm ติดตั้ง jsdom
สำหรับ jsdom (โปรดใช้เวอร์ชันล่าสุด) สิ่งนี้ควรทำ:
const createDOMPurify = ต้องการ ('dompurify'); const { JSDOM } = ต้องการ ('jsdom'); const window = ใหม่ JSDOM (''). window; const DOMPurify = createDOMPurify (หน้าต่าง); const clean = DOMPurify.sanitize (' <b>สวัสดี</b>');หรือแม้แต่สิ่งนี้ หากคุณต้องการทำงานกับการนำเข้า:
นำเข้า { JSDOM } จาก 'jsdom'; นำเข้า DOMPurify จาก 'dompurify'; const window = new JSDOM('').window;const purify = DOMPurify(window);const clean = purify.sanitize('<b>สวัสดีครับ< /ข>');หากคุณมีปัญหาในการทำให้มันทำงานในการตั้งค่าเฉพาะของคุณ ลองพิจารณาโปรเจ็กต์ isomorphic-dompurify ที่น่าทึ่ง ซึ่งจะช่วยแก้ปัญหามากมายที่ผู้คนอาจพบเจอ
npm ติดตั้ง isomorphic-dompurify
นำเข้า DOMPurify จาก 'isomorphic-dompurify';const clean = DOMPurify.sanitize('<s>hello</s>');แน่นอนว่ามีการสาธิต! เล่นกับ DOMpurify
ก่อนอื่น โปรดติดต่อเราทางอีเมลทันทีเพื่อให้เราดำเนินการแก้ไขได้ คีย์พีจีพี
นอกจากนี้ คุณยังอาจมีสิทธิ์ได้รับค่าหัวจากข้อบกพร่องอีกด้วย! ทีมงานที่ดีของ Fastmail ใช้ DOMPurify สำหรับบริการของพวกเขา และเพิ่มห้องสมุดของเราเข้าไปในขอบเขตค่าหัวข้อบกพร่องของพวกเขา ดังนั้น หากคุณพบวิธีหลีกเลี่ยงหรือทำให้ DOMpurify อ่อนแอลง โปรดดูที่เว็บไซต์และข้อมูลรางวัลข้อบกพร่องด้วย
มาร์กอัปบริสุทธิ์มีลักษณะอย่างไร การสาธิตแสดงให้เห็นองค์ประกอบที่น่ารังเกียจมากมาย แต่เรามาแสดงตัวอย่างเล็กๆ น้อยๆ กัน!
DOMPurify.sanitize('<img src=x onerror=alert(1)//>'); // กลายเป็น <img src="x">DOMPurify.sanitize('<svg><g/onload=alert(2)//<p>'); // กลายเป็น <svg><g></g></svg>DOMPurify.sanitize('<p>abc<iframe//src=jAva	script:alert(3)>def</p>'); // กลายเป็น <p>abc</p>DOMPurify.sanitize('<math><mi//xlink:href="data:x,<script>alert(4)</script>">'); // กลายเป็น <math><mi></mi></math>DOMPurify.sanitize('<TABLE><tr><td>HELLO</tr></TABL>'); // กลายเป็น <table><tbody><tr><td>HELLO</td></tr></tbody></table>DOMpurify.sanitize('<UL><li><A HREF=//google .com>คลิก</UL>'); // กลายเป็น <ul><li><a href="//google.com">คลิก</a></li></ul> ปัจจุบัน DOMpurify รองรับ HTML5, SVG และ MathML DOMPurify ตามค่าเริ่มต้นอนุญาตให้ใช้แอตทริบิวต์ข้อมูล CSS, HTML ที่กำหนดเอง DOMpurify ยังรองรับ Shadow DOM - และฆ่าเชื้อเทมเพลต DOM แบบวนซ้ำ DOMPurify ยังช่วยให้คุณสามารถฆ่าเชื้อ HTML เพื่อใช้กับ jQuery $() และ elm.html() API โดยไม่มีปัญหาใดๆ ที่ทราบ
DOMpurify ไม่ทำอะไรเลย มันจะส่งคืนสตริงที่คุณป้อนทุกประการ DOMpurify เปิดเผยคุณสมบัติที่เรียกว่า isSupported ซึ่งจะบอกคุณว่ามันจะสามารถทำงานได้หรือไม่ เพื่อให้คุณสามารถสร้างแผนสำรองของคุณเองได้
ในเวอร์ชัน 1.0.9 มีการเพิ่มการรองรับ Trusted Types API ใน DOMpurify ในเวอร์ชัน 2.0.0 มีการเพิ่มการตั้งค่าสถานะเพื่อควบคุมพฤติกรรมของ DOMPurify ที่เกี่ยวข้องกับเรื่องนี้
เมื่อใช้ DOMPurify.sanitize ในสภาพแวดล้อมที่มี Trusted Types API และ RETURN_TRUSTED_TYPE ถูกตั้งค่าเป็น true ระบบจะพยายามส่งคืนค่า TrustedHTML แทนสตริง (ลักษณะการทำงานสำหรับตัวเลือกการกำหนดค่า RETURN_DOM และ RETURN_DOM_FRAGMENT จะไม่เปลี่ยนแปลง)
โปรดทราบว่าในการสร้างนโยบายใน trustedTypes โดยใช้ DOMPurify จำเป็นต้องมี RETURN_TRUSTED_TYPE: false เนื่องจาก createHTML คาดว่าจะเป็นสตริงปกติ ไม่ใช่ TrustedHTML ตัวอย่างด้านล่างแสดงสิ่งนี้
window.trustedTypes!.createPolicy('ค่าเริ่มต้น', {
createHTML: (to_escape) =>DOMPurify.sanitize(to_escape, { RETURN_TRUSTED_TYPE: false }),}); ใช่. ค่ากำหนดเริ่มต้นที่รวมไว้นั้นค่อนข้างดีอยู่แล้ว - แต่คุณสามารถแทนที่ค่าเหล่านั้นได้แน่นอน ตรวจสอบโฟลเดอร์ /demos เพื่อดูตัวอย่างมากมายเกี่ยวกับวิธีปรับแต่ง DOMpurify
// ตัด {{ ... }}, ${ ... } และ <% ... %> เพื่อให้เอาต์พุตปลอดภัยสำหรับระบบเทมเพลต// โปรดใช้ความระมัดระวัง โหมดนี้ไม่แนะนำให้ใช้สำหรับการใช้งานจริง// อนุญาต ไม่แนะนำให้แยกวิเคราะห์เทมเพลตใน HTML ที่ผู้ใช้ควบคุมเลย// ใช้โหมดนี้เฉพาะในกรณีที่ไม่มีทางเลือกอื่นจริงๆ const clean = DOMPurify.sanitize(dirty, {SAFE_FOR_TEMPLATES: true});// เปลี่ยนวิธีการ เช่น ความคิดเห็นที่มี อักขระ HTML ที่มีความเสี่ยงได้รับการปฏิบัติแล้ว// โปรดใช้ความระมัดระวังเป็นอย่างยิ่ง การตั้งค่านี้ควรตั้งค่าเป็น `false` หากคุณจัดการเฉพาะ // HTML จริงๆ เท่านั้น และไม่มีอะไรอื่นใด ไม่มี SVG, MathML หรือสิ่งที่คล้ายกัน // ไม่เช่นนั้น การเปลี่ยนจาก `true` เป็น `false` จะทำให้เกิด XSS ในลักษณะนี้หรืออย่างอื่น const clean = DOMPurify.sanitize(dirty, {SAFE_FOR_XML: false}); // อนุญาตเฉพาะองค์ประกอบ <b> เท่านั้น เข้มงวดมาก const clean = DOMPurify.sanitize(dirty, {ALLOWED_TAGS: ['b']});// อนุญาตเฉพาะ <b> และ <q> พร้อมด้วยแอตทริบิวต์สไตล์ const clean = DOMPurify.sanitize( สกปรก {ALLOWED_TAGS: ['b', 'q'], ALLOWED_ATTR: ['style']});// อนุญาตองค์ประกอบ HTML ที่ปลอดภัยทั้งหมด แต่ไม่ใช่ SVG หรือ MathML// โปรดทราบว่าการตั้งค่า USE_PROFILES จะแทนที่การตั้งค่า ALLOWED_TAGS// ดังนั้นอย่าใช้ร่วมกัน const clean = DOMPurify.sanitize(dirty, {USE_PROFILES: {html: true}});// อนุญาตองค์ประกอบ SVG ที่ปลอดภัยทั้งหมดและ ตัวกรอง SVG ไม่มี HTML หรือ MathMLconst clean = DOMPurify.sanitize(dirty, {USE_PROFILES: {svg: true, svgFilters: true}});// อนุญาตองค์ประกอบ MathML และ SVG ที่ปลอดภัยทั้งหมด แต่ไม่มีตัวกรอง SVGconst clean = DOMPurify.sanitize(dirty, {USE_PROFILES: {mathMl: true, svg: true}});// เปลี่ยนเนมสเปซเริ่มต้น จาก HTML ไปเป็นอย่างอื่นconst clean = DOMPurify.sanitize(dirty, {NAMESPACE: 'http://www.w3.org/2000/svg'});// ปล่อยให้ HTML ที่ปลอดภัยทั้งหมดเหมือนเดิมและเพิ่มองค์ประกอบ <style> ให้กับ block-listconst clean = DOMPurify.sanitize(dirty, {FORBID_TAGS: [' style']});// ปล่อยให้ HTML ที่ปลอดภัยทั้งหมดเหมือนเดิมและเพิ่มแอตทริบิวต์สไตล์ให้กับ block-listconst clean = DOMPurify.sanitize(dirty, {FORBID_ATTR: ['style']});// ขยายอาร์เรย์ที่มีอยู่ของแท็กที่อนุญาตและเพิ่ม <my-tag> ใน Allow-listconst clean = DOMPurify.sanitize(dirty, {ADD_TAGS: ['my-tag']});/ / ขยายอาร์เรย์ที่มีอยู่ของแอตทริบิวต์ที่อนุญาต และเพิ่ม my-attr ไปยัง Allow-listconst clean = DOMPurify.sanitize(dirty, {ADD_ATTR: ['my-attr']});// ห้าม ARIA ปล่อยให้ HTML ที่ปลอดภัยอื่นๆ เหมือนเดิม (ค่าเริ่มต้นคือ true)const clean = DOMPurify.sanitize(dirty, {ALLOW_ARIA_ATTR: false});// ห้ามไม่ให้มีแอตทริบิวต์ข้อมูล HTML5 ปล่อยให้ HTML อื่นที่ปลอดภัยเหมือนเดิม (ค่าเริ่มต้นคือ true)const clean = DOMPurify.sanitize (สกปรก {ALLOW_DATA_ATTR: false}); // DOMPurify อนุญาตให้กำหนดกฎสำหรับองค์ประกอบที่กำหนดเอง เมื่อใช้ลิเทอรัล CUSTOM_ELEMENT_HANDLING// คุณสามารถกำหนดได้อย่างชัดเจนว่าองค์ประกอบใดที่คุณต้องการอนุญาต (โดยค่าเริ่มต้น จะไม่มีการอนุญาตเลย)//// เช่นเดียวกับแอตทริบิวต์ขององค์ประกอบเหล่านั้น ตามค่าเริ่มต้น จะมีการใช้allow.list ในตัวหรือที่กำหนดค่าไว้/// คุณสามารถใช้ลิเทอรัล RegExp เพื่อระบุสิ่งที่ได้รับอนุญาตหรือเพรดิเคต สามารถดูตัวอย่างสำหรับทั้งสองรายการได้ที่ด้านล่าง// ค่าเริ่มต้นมีข้อจำกัดมาก เพื่อป้องกันการเลี่ยง XSS โดยไม่ได้ตั้งใจ โปรดจัดการด้วยความระมัดระวังอย่างยิ่ง!const clean = DOMPurify.sanitize('<foo-bar baz="foobar" forbidden="true"></foo-bar><div is="foo-baz"></div>', {CUSTOM_ELEMENT_HANDLING: {tagNameCheck: null, // ไม่อนุญาตให้มีองค์ประกอบที่กำหนดเอง attributeNameCheck: null, // ค่าเริ่มต้น / แอตทริบิวต์มาตรฐานที่อนุญาตรายการถูกใช้allowCustomizedBuiltInElements: false, // no อนุญาตให้ใช้บิวด์อินที่กำหนดเอง},}); // <div is=""></div>const clean = DOMPurify.sanitize('<foo-bar baz="foobar" forbidden="true"></foo-bar><div is="foo-baz "></div>',{CUSTOM_ELEMENT_HANDLING: {tagNameCheck: /^foo-/, // อนุญาตแท็กทั้งหมดที่ขึ้นต้นด้วย "foo-"attributeNameCheck: /baz/, // อนุญาตแอตทริบิวต์ทั้งหมดที่มี "baz"allowCustomizedBuiltInElements: true, // อนุญาตให้ใช้บิวด์อินที่กำหนดเองได้},}); // <foo-bar baz="foobar"></foo-bar><div is="foo-baz"></div>const clean = DOMPurify.sanitize('<foo-bar baz="foobar" ห้าม ="true"></foo-bar><div is="foo-baz"></div>',{CUSTOM_ELEMENT_HANDLING: {tagNameCheck: (tagName) => tagName.match(/^foo-/), // อนุญาตแท็กทั้งหมดที่ขึ้นต้นด้วย "foo-"attributeNameCheck: (attr) => attr.match(/baz/), // อนุญาตทั้งหมดที่มี "baz"allowCustomizedBuiltInElements: true, // อนุญาตบิวด์อินที่ปรับแต่งเอง},}); // <foo-bar baz="foobar"></foo-bar><div is="foo-baz"></div> // ขยายอาร์เรย์ที่มีอยู่ขององค์ประกอบที่สามารถใช้ Data URIsconst clean = DOMPurify.sanitize(dirty, {ADD_DATA_URI_TAGS: ['a', 'area']});// ขยายอาร์เรย์ที่มีอยู่ขององค์ประกอบที่ปลอดภัยสำหรับ URI- ค่าที่ชอบ (ระวังความเสี่ยง XSS)const clean = DOMPurify.sanitize(สกปรก, {ADD_URI_SAFE_ATTR: ['ของฉัน-attr']}); // อนุญาตตัวจัดการโปรโตคอลภายนอกในแอตทริบิวต์ URL (ค่าเริ่มต้นคือเท็จ ระวัง ความเสี่ยง XSS)// โดยค่าเริ่มต้น อนุญาตเฉพาะ http, https, ftp, ftps, tel, mailto, callto, sms, cid และ xmpp เท่านั้น const clean = DOMPurify.sanitize(dirty, {ALLOW_UNKNOWN_PROTOCOLS: true});// อนุญาตตัวจัดการโปรโตคอลเฉพาะในแอตทริบิวต์ URL ผ่าน regex (ค่าเริ่มต้นคือ false เป็น ระวัง ความเสี่ยง XSS)// โดยค่าเริ่มต้น อนุญาตเฉพาะ http, https, ftp, ftps, tel, mailto, callto, sms, cid และ xmpp เท่านั้น// RegExp เริ่มต้น: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^az]|[a-z+.-]+(?:[^ a-z+.-:]|$))/i;const clean = DOMPurify.sanitize(สกปรก, {ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|xxx):|[^az]|[a-z+.-]+(?: [^a-z+.-:]|$))/i}); // ส่งคืน DOM HTMLBodyElement แทนสตริง HTML (ค่าเริ่มต้นคือ false)const clean = DOMPurify.sanitize(dirty, {RETURN_DOM: true});// ส่งคืน DOM DocumentFragment แทนสตริง HTML (ค่าเริ่มต้นคือ false)const clean = DOMPurify.sanitize(dirty, {RETURN_DOM_FRAGMENT: true});// ใช้แฟล็ก RETURN_TRUSTED_TYPE เพื่อเปิด Trusted Types สนับสนุนถ้ามี const clean = DOMPurify.sanitize (สกปรก, {RETURN_TRUSTED_TYPE: true}); // จะส่งคืนวัตถุ TrustedHTML แทนที่จะเป็นสตริงถ้าเป็นไปได้// ใช้นโยบายประเภทที่เชื่อถือได้ที่ให้ไว้const clean = DOMPurify.sanitize(dirty, {// นโยบายที่ให้มาต้องกำหนด createHTML และ createScriptURLTRUSTED_TYPES_POLICY: trustedTypes.createPolicy({createHTML(s) { กลับ s}, createScriptURL { กลับ s},}}); // ส่งคืนเอกสารทั้งหมดรวมถึงแท็ก <html> (ค่าเริ่มต้นคือ false)const clean = DOMPurify.sanitize(dirty, {WHOLE_DOCUMENT: true});// ปิดการใช้งานการป้องกัน DOM Clobbering ในเอาต์พุต (ค่าเริ่มต้นคือ true, จัดการด้วยความระมัดระวัง, XSS รอง ความเสี่ยงที่นี่) const clean = DOMPurify.sanitize (สกปรก, {SANITIZE_DOM: false}); // บังคับใช้การป้องกัน DOM Clobbering ที่เข้มงวดผ่านการแยกเนมสเปซ (ค่าเริ่มต้นคือ false)// เมื่อเปิดใช้งาน จะแยกเนมสเปซของคุณสมบัติที่มีชื่อ (เช่น แอตทริบิวต์ `id` และ `name`) // จากตัวแปร JS โดยนำหน้าด้วยสตริง `user-content-`const clean = DOMPurify sanitize(dirty, {SANITIZE_NAMED_PROPS: true});// เก็บเนื้อหาขององค์ประกอบเมื่อองค์ประกอบถูกลบออก (ค่าเริ่มต้นคือ true) const clean = DOMPurify.sanitize(dirty, {KEEP_CONTENT: false});// ติดองค์ประกอบต่างๆ เช่น สไตล์ สคริปต์ หรืออื่นๆ เข้ากับ document.body และป้องกันพฤติกรรมของเบราว์เซอร์ที่ไม่ได้ตั้งใจใน Edge-case ต่างๆ (ค่าเริ่มต้นคือ false)const clean = DOMPurify.sanitize(dirty , {FORCE_BODY: true});// ลบองค์ประกอบ <a> ทั้งหมดภายใต้องค์ประกอบ <p> ที่ถูกลบออกconst clean = DOMPurify.sanitize(dirty, {FORBID_CONTENTS: ['a'], FORBID_TAGS: ['p']});// เปลี่ยนประเภท parser เพื่อให้ข้อมูลที่ถูกสุขอนามัยถือเป็น XML และไม่ใช่ HTML ซึ่งเป็น defaultconst clean = DOMPurify.sanitize(dirty, { PARSER_MEDIA_TYPE: 'แอปพลิเคชัน/xhtml+xml'}); // ใช้โหมด IN_PLACE เพื่อฆ่าเชื้อโหนด "ในตำแหน่ง" ซึ่งเร็วกว่ามากขึ้นอยู่กับวิธีที่คุณใช้ DOMPurifyconst Dirt = document.createElement('a');dirty.setAttribute('href', 'javascript:alert(1 )');const clean = DOMPurify.sanitize(สกปรก, {IN_PLACE: true}); // ดู https://github.com/cure53/DOMPurify/issues/288 สำหรับข้อมูลเพิ่มเติมมีตัวอย่างเพิ่มเติมที่นี่ ซึ่งแสดงให้เห็นว่าคุณสามารถเรียกใช้ ปรับแต่ง และกำหนดค่า DOMpurify ให้เหมาะกับความต้องการของคุณได้อย่างไร
แทนที่จะส่งการกำหนดค่าเดียวกันซ้ำๆ ไปยัง DOMPurify.sanitize คุณสามารถใช้เมธอด DOMPurify.setConfig ได้ การกำหนดค่าของคุณจะยังคงอยู่จนกว่าคุณจะเรียก DOMPurify.setConfig ครั้งถัดไป หรือจนกว่าคุณจะเรียกใช้ DOMPurify.clearConfig เพื่อรีเซ็ต โปรดจำไว้ว่ามีการกำหนดค่าที่ใช้งานอยู่เพียงรายการเดียว ซึ่งหมายความว่าเมื่อตั้งค่าแล้ว พารามิเตอร์การกำหนดค่าเพิ่มเติมทั้งหมดที่ส่งไปยัง DOMPurify.sanitize จะถูกละเว้น
DOMpurify ช่วยให้คุณสามารถเพิ่มฟังก์ชันการทำงานได้โดยการแนบฟังก์ชันตั้งแต่หนึ่งฟังก์ชันขึ้นไปด้วยเมธอด DOMPurify.addHook เข้ากับหนึ่งใน hooks ต่อไปนี้:
beforeSanitizeElements
uponSanitizeElement (ไม่ใช่ 's' - เรียกทุกองค์ประกอบ)
afterSanitizeElements
beforeSanitizeAttributes
uponSanitizeAttribute
afterSanitizeAttributes
beforeSanitizeShadowDOM
uponSanitizeShadowNode
afterSanitizeShadowDOM
โดยจะส่งผ่านโหนด DOM ที่ประมวลผลในปัจจุบัน เมื่อจำเป็นตามตัวอักษรพร้อมโหนดและข้อมูลแอตทริบิวต์ที่ตรวจสอบแล้ว และการกำหนดค่า DOMpurify ไปยังการโทรกลับ ลองชมการสาธิต Hook ของ MentalJS เพื่อดูว่า API สามารถนำมาใช้อย่างดีได้อย่างไร
ตัวอย่าง :
DOMpurify.addHook(
'เมื่อ SanitizeAttribute',
ฟังก์ชั่น (currentNode, hookEvent, config) {// ทำบางอย่างกับโหนดปัจจุบัน// คุณยังสามารถเปลี่ยน hookEvent สำหรับโหนดปัจจุบันได้ (เช่น set hookEvent.forceKeepAttr = true)// สำหรับประเภท hook อื่นที่ไม่ใช่ 'uponSanitizeAttribute' hookEvent เท่ากับ null
-| ตัวเลือก | เนื่องจาก | บันทึก |
|---|---|---|
| SAFE_FOR_JQUERY | 2.1.0 | ไม่จำเป็นต้องเปลี่ยน |
ขณะนี้เรากำลังใช้ Github Actions ร่วมกับ BrowserStack สิ่งนี้ทำให้เรามีความเป็นไปได้ที่จะยืนยันทุกการกระทำว่าทั้งหมดเป็นไปตามแผนในเบราว์เซอร์ที่รองรับทั้งหมด ตรวจสอบบันทึกการสร้างได้ที่นี่: https://github.com/cure53/DOMPurify/actions
คุณสามารถรันการทดสอบในตัวเครื่องเพิ่มเติมได้โดยดำเนินการ npm test การทดสอบทำงานได้ดีกับ Node.js v0.6.2 และ [email protected]
ข้อตกลงที่เกี่ยวข้องทั้งหมดจะได้รับการลงนามด้วยคีย์ 0x24BB6BF4 เพื่อความปลอดภัยเพิ่มเติม (ตั้งแต่วันที่ 8 เมษายน 2559)
npm i ) เราสนับสนุน npm อย่างเป็นทางการ เวิร์กโฟลว์ GitHub Actions ได้รับการกำหนดค่าให้ติดตั้งการขึ้นต่อกันโดยใช้ npm เมื่อใช้ npm เวอร์ชันที่เลิกใช้แล้ว เราไม่สามารถรับรองเวอร์ชันของการขึ้นต่อกันที่ติดตั้งไว้ได้อย่างสมบูรณ์ ซึ่งอาจนำไปสู่ปัญหาที่ไม่คาดคิด
เราใช้รันสคริปต์ npm ในการผสานรวมกับโครงสร้างพื้นฐานเครื่องมือของเรา เราใช้ ESLint เป็น hook ก่อนคอมมิตเพื่อให้แน่ใจว่าโค้ดมีความสอดคล้องกัน นอกจากนี้ เพื่อให้การจัดรูปแบบง่ายขึ้น เราใช้ prettier ในขณะที่สร้าง /dist เนื้อหาที่เกิดขึ้นผ่าน rollup
นี่คือสคริปต์ npm ของเรา:
npm run dev เพื่อเริ่มสร้างในขณะที่ดูแหล่งที่มาของการเปลี่ยนแปลง
npm run test เพื่อรันชุดทดสอบของเราผ่าน jsdom และ karma
test:jsdom เพื่อรันการทดสอบผ่าน jsdom เท่านั้น
test:karma เพื่อทำการทดสอบผ่านกรรมเท่านั้น
npm run lint เพื่อ lint แหล่งที่มาโดยใช้ ESLint (ผ่าน xo)
npm run format เพื่อจัดรูปแบบซอร์สของเราโดยใช้ prettier เพื่อให้ผ่าน ESLint ได้ง่ายขึ้น
npm run build เพื่อสร้างสินทรัพย์การกระจายของเราแบบย่อขนาดและไม่ย่อขนาดเป็นโมดูล UMD
npm run build:umd เพื่อสร้างเฉพาะโมดูล UMD ที่ไม่มีการลดขนาดเท่านั้น
npm run build:umd:min เพื่อสร้างเฉพาะโมดูล UMD ที่ย่อขนาดเท่านั้น
หมายเหตุ: สคริปต์การรันทั้งหมดถูกทริกเกอร์ผ่าน npm run <script>
มีสคริปต์ npm มากกว่านั้น แต่ส่วนใหญ่จะรวมเข้ากับ CI หรือตั้งใจให้เป็น "ส่วนตัว" เช่นเพื่อแก้ไขไฟล์การแจกจ่ายบิลด์ทุกครั้งที่คอมมิต
พวกเราแม่
