ฉันอ่านสิ่งนี้ในบทช่วยสอนการตอบสนอง สิ่งนี้หมายความว่า?
React มีความปลอดภัย เราไม่ได้สร้างสตริง HTML ดังนั้นการป้องกัน XSS จึงเป็นค่าเริ่มต้น
การโจมตี XSS ทำงานอย่างไรหาก React ปลอดภัย ความปลอดภัยนี้บรรลุได้อย่างไร?
ฉันอ่านสิ่งนี้ในบทช่วยสอนการตอบสนอง สิ่งนี้หมายความว่า?
React มีความปลอดภัย เราไม่ได้สร้างสตริง HTML ดังนั้นการป้องกัน XSS จึงเป็นค่าเริ่มต้น
การโจมตี XSS ทำงานอย่างไรหาก React ปลอดภัย ความปลอดภัยนี้บรรลุได้อย่างไร?
คำตอบ:
ReactJS ค่อนข้างปลอดภัยจากการออกแบบตั้งแต่นั้นมา
ดังนั้นการโจมตีทั่วไปเช่นนี้จะไม่ได้ผล
const username = "<img onerror='alert(\"Hacked!\")' src='invalid-image' />";
class UserProfilePage extends React.Component {
render() {
return (
<h1> Hello {username}!</h1>
);
}
}
ReactDOM.render(<UserProfilePage />, document.querySelector("#app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
แต่ว่า ...
dangerouslySetInnerHTML
เมื่อคุณใช้dangerouslySetInnerHTML
คุณต้องตรวจสอบให้แน่ใจว่าเนื้อหาไม่มีจาวาสคริปต์ React ไม่สามารถทำอะไรให้คุณได้ที่นี่
const aboutUserText = "<img onerror='alert(\"Hacked!\");' src='invalid-image' />";
class AboutUserComponent extends React.Component {
render() {
return (
<div dangerouslySetInnerHTML={{"__html": aboutUserText}} />
);
}
}
ReactDOM.render(<AboutUserComponent />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
ตัวอย่างที่ 1: การใช้ javascript: code
คลิกที่ "Run code snippet" -> "My Website" เพื่อดูผลลัพธ์
const userWebsite = "javascript:alert('Hacked!');";
class UserProfilePage extends React.Component {
render() {
return (
<a href={userWebsite}>My Website</a>
)
}
}
ReactDOM.render(<UserProfilePage />, document.querySelector("#app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
ตัวอย่างที่ 2: การใช้ข้อมูลที่เข้ารหัส base64:
คลิกที่ "Run code snippet" -> "My Website" เพื่อดูผลลัพธ์
const userWebsite = "data:text/html;base64,PHNjcmlwdD5hbGVydCgiSGFja2VkISIpOzwvc2NyaXB0Pg==";
class UserProfilePage extends React.Component {
render() {
const url = userWebsite.replace(/^(javascript\:)/, "");
return (
<a href={url}>My Website</a>
)
}
}
ReactDOM.render(<UserProfilePage />, document.querySelector("#app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
const customPropsControledByAttacker = {
dangerouslySetInnerHTML: {
"__html": "<img onerror='alert(\"Hacked!\");' src='invalid-image' />"
}
};
class Divider extends React.Component {
render() {
return (
<div {...customPropsControledByAttacker} />
);
}
}
ReactDOM.render(<Divider />, document.querySelector("#app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
นี่คือแหล่งข้อมูลเพิ่มเติม
React จะหลีกเลี่ยงตัวแปรให้คุณโดยอัตโนมัติ ... มันป้องกันการฉีด XSS ผ่านสตริง HTML ด้วย Javascript ที่เป็นอันตราย .. โดยปกติแล้วอินพุตจะถูกฆ่าเชื้อพร้อมกับสิ่งนี้
ตัวอย่างเช่นสมมติว่าคุณมีสตริงนี้
var htmlString = '<img src="javascript:alert('XSS!')" />';
หากคุณพยายามแสดงสตริงนี้ในการตอบสนอง
render() {
return (
<div>{htmlString}</div>
);
}
คุณจะเห็นสตริงทั้งหมดในหน้าเว็บรวมทั้ง<span>
แท็กองค์ประกอบ คุณจะเห็นในเบราว์เซอร์<img src="javascript:alert('XSS!')" />
หากคุณดู html ต้นทางคุณจะเห็น
<span>"<img src="javascript:alert('XSS!')" />"</span>
รายละเอียดเพิ่มเติมเกี่ยวกับการโจมตี XSS คืออะไร
การตอบสนองโดยทั่วไปทำให้คุณไม่สามารถแทรกมาร์กอัปได้เว้นแต่คุณจะสร้างองค์ประกอบด้วยตัวเองในฟังก์ชั่นการเรนเดอร์ ... ที่กล่าวกันว่ามีฟังก์ชันที่อนุญาตให้แสดงผลดังกล่าวเรียกว่าdangerouslySetInnerHTML
... นี่คือรายละเอียดเพิ่มเติม
มีบางสิ่งที่ควรทราบมีหลายวิธีในการหลีกเลี่ยงสิ่งที่ React หลบหนี อีกวิธีหนึ่งคือเมื่อผู้ใช้กำหนดอุปกรณ์ประกอบฉากให้กับส่วนประกอบของคุณ อย่าขยายข้อมูลใด ๆ จากการป้อนข้อมูลของผู้ใช้เป็นอุปกรณ์ประกอบฉาก!