Apa artinya ketika mereka mengatakan Bereaksi dilindungi XSS?

Question 1

Saya membaca ini di tutorial React. Apa artinya ini?

Bereaksi aman. Kami tidak membuat string HTML jadi perlindungan XSS adalah defaultnya.

Bagaimana cara kerja serangan XSS jika React aman? Bagaimana keamanan ini tercapai?

Question 2

ReactJS secara desain cukup aman sejak saat itu

Variabel string dalam tampilan di-escape secara otomatis
Dengan JSX, Anda meneruskan fungsi sebagai pengendali kejadian, bukan string yang bisa berisi kode berbahaya

jadi serangan biasa seperti ini tidak akan berhasil

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>

Luaskan cuplikan

tapi ...

❗❗❗Peringatan❗❗❗

Masih ada beberapa vektor serangan XSS yang perlu Anda tangani sendiri di React!

1. XSS melalui `dangerouslySetInnerHTML`

Saat Anda menggunakan, dangerouslySetInnerHTMLAnda perlu memastikan konten tidak mengandung javascript. React tidak dapat melakukan apa pun di sini untuk Anda.

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>

Luaskan cuplikan

2. XSS melalui atribut a.href

Contoh 1: Menggunakan javascript: code

Klik "Jalankan cuplikan kode" -> "Situs Saya" untuk melihat hasilnya

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>

Luaskan cuplikan

Contoh 2: Menggunakan data berenkode base64:

Klik "Jalankan cuplikan kode" -> "Situs Saya" untuk melihat hasilnya

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>

Luaskan cuplikan

3. XSS melalui alat peraga yang dikendalikan penyerang

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>

Luaskan cuplikan

Berikut lebih banyak sumber daya

Question 3

React secara otomatis meloloskan variabel untuk Anda ... Ini mencegah injeksi XSS melalui string HTML dengan Javascript berbahaya .. Biasanya, masukan dibersihkan bersama ini.

Misalnya, Anda memiliki string ini

var htmlString = '<img src="javascript:alert('XSS!')" />';

jika Anda mencoba membuat string ini bereaksi

render() {
    return (
        <div>{htmlString}</div>
    );
}

Anda benar-benar akan melihat di halaman seluruh string termasuk <span>tag elemen. alias di browser Anda akan melihat<img src="javascript:alert('XSS!')" />

jika Anda melihat html sumber, Anda akan melihat

<span>"<img src="javascript:alert('XSS!')" />"</span>

Berikut adalah beberapa detail lebih lanjut tentang apa itu serangan XSS

React pada dasarnya membuatnya sehingga Anda tidak dapat menyisipkan markup kecuali Anda membuat elemen sendiri dalam fungsi render ... yang dikatakan memiliki fungsi yang memungkinkan rendering tersebut dipanggil dangerouslySetInnerHTML... berikut ini beberapa detail lebih lanjut tentangnya

Edit:

Beberapa hal yang perlu diperhatikan, ada cara untuk menghindari apa yang lolos React. Satu cara yang lebih umum adalah ketika pengguna mendefinisikan props ke komponen Anda. Jangan memperluas data apa pun dari input pengguna sebagai alat peraga!

Apa artinya ketika mereka mengatakan Bereaksi dilindungi XSS?

❗❗❗Peringatan❗❗❗

Masih ada beberapa vektor serangan XSS yang perlu Anda tangani sendiri di React!

1. XSS melalui dangerouslySetInnerHTML

2. XSS melalui atribut a.href

3. XSS melalui alat peraga yang dikendalikan penyerang

Edit:

1. XSS melalui `dangerouslySetInnerHTML`