Tôi đã đọc điều này trên hướng dẫn React. Điều đó có nghĩa là gì?
React là an toàn. Chúng tôi không tạo chuỗi HTML nên bảo vệ XSS là mặc định.
Các cuộc tấn công XSS hoạt động như thế nào nếu React an toàn? Làm thế nào để đạt được sự an toàn này?
Tôi đã đọc điều này trên hướng dẫn React. Điều đó có nghĩa là gì?
React là an toàn. Chúng tôi không tạo chuỗi HTML nên bảo vệ XSS là mặc định.
Các cuộc tấn công XSS hoạt động như thế nào nếu React an toàn? Làm thế nào để đạt được sự an toàn này?
Câu trả lời:
ReactJS khá an toàn theo thiết kế vì
vì vậy một cuộc tấn công điển hình như thế này sẽ không hoạt động
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>nhưng ...
dangerouslySetInnerHTMLKhi sử dụng dangerouslySetInnerHTMLbạn cần đảm bảo nội dung không chứa javascript. Ở đây React không thể làm gì cho bạn.
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>Ví dụ 1: Sử dụng javascript: code
Nhấp vào "Chạy đoạn mã" -> "Trang web của tôi" để xem kết quả
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>Ví dụ 2: Sử dụng dữ liệu được mã hóa base64:
Nhấp vào "Chạy đoạn mã" -> "Trang web của tôi" để xem kết quả
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>Đây là các tài nguyên khác
React tự động thoát các biến cho bạn ... Nó ngăn chặn việc tiêm XSS qua chuỗi HTML với Javascript độc hại .. Đương nhiên, các đầu vào được khử trùng cùng với điều này.
Ví dụ, giả sử bạn có chuỗi này
var htmlString = '<img src="javascript:alert('XSS!')" />';nếu bạn cố gắng hiển thị chuỗi này trong phản ứng
render() {
return (
<div>{htmlString}</div>
);
}
bạn sẽ thấy trên trang toàn bộ chuỗi bao gồm cả <span>thẻ phần tử. aka trong trình duyệt bạn sẽ thấy<img src="javascript:alert('XSS!')" />
nếu bạn xem html nguồn, bạn sẽ thấy
<span>"<img src="javascript:alert('XSS!')" />"</span>Đây là một số chi tiết hơn về cuộc tấn công XSS là gì
Về cơ bản React tạo ra nó nên bạn không thể chèn đánh dấu trừ khi bạn tự tạo các phần tử trong hàm kết xuất ... người ta nói rằng chúng có một chức năng cho phép hiển thị như vậy được gọi là dangerouslySetInnerHTML... đây là một số chi tiết hơn về nó
Một vài điều cần lưu ý, có nhiều cách để giải quyết những gì React thoát ra. Một cách phổ biến hơn là khi người dùng xác định đạo cụ cho thành phần của bạn. Không mở rộng bất kỳ dữ liệu nào từ đầu vào của người dùng làm đạo cụ!