React'in XSS korumalı olduğunu söylemeleri ne anlama geliyor?

Question 1

Bunu React eğitiminde okudum. Ne anlama geliyor?

React güvenlidir. HTML dizeleri oluşturmuyoruz, bu nedenle XSS koruması varsayılandır.

React güvenliyse XSS saldırıları nasıl çalışır? Bu güvenliğe nasıl ulaşılır?

Question 2

ReactJS tasarımı gereği oldukça güvenlidir

Görünümlerdeki dize değişkenleri otomatik olarak atlanır
JSX ile kötü amaçlı kod içerebilen bir dize yerine olay işleyici olarak bir işlev iletirsiniz.

bu yüzden bunun gibi tipik bir saldırı işe yaramayacak

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>

Snippet'i genişlet

fakat ...

❗❗❗Uyarı❗❗❗

React'te kendinizi halletmeniz gereken hala bazı XSS saldırı vektörleri var!

1. XSS aracılığıyla `dangerouslySetInnerHTML`

Kullandığınızda dangerouslySetInnerHTMLiçeriğin herhangi bir javascript içermediğinden emin olmanız gerekir. React burada sizin için hiçbir şey yapamaz.

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>

Snippet'i genişlet

2. a.href özelliği aracılığıyla XSS

Örnek 1: javascript kullanma: kod

Sonucu görmek için "Kod pasajını çalıştır" -> "Web Sitem" seçeneğini tıklayın

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>

Snippet'i genişlet

Örnek 2: Base64 kodlu verileri kullanma:

Sonucu görmek için "Kod pasajını çalıştır" -> "Web Sitem" seçeneğini tıklayın

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>

Snippet'i genişlet

3. Saldırgan kontrollü sahne aracılığıyla XSS

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>

Snippet'i genişlet

İşte daha fazla kaynak

Question 3

React değişkenlerden sizin için otomatik olarak kaçar ... Zararlı Javascript ile string HTML üzerinden XSS enjeksiyonunu engeller. Doğal olarak, bununla birlikte girdiler de temizlenir.

Örneğin bu dizeye sahip olduğunuzu varsayalım

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

bu dizgeyi tepki olarak oluşturmaya çalışırsanız

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

<span>Öğe etiketi dahil tüm dizeyi sayfada kelimenin tam anlamıyla göreceksiniz . aka tarayıcıda göreceksiniz<img src="javascript:alert('XSS!')" />

kaynak html'yi görüntülerseniz görürsünüz

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

İşte XSS saldırısının ne olduğuna dair biraz daha ayrıntı

İşaretleme ekleme render işlevinde unsurları kendiniz yaratamazsınız sürece temelde yapar Tepki ... bu varlık onlar onun adı verilen render böyle sağlayan bir işlevi var dedi dangerouslySetInnerHTML... burada bu konuda biraz daha detay

Düzenle:

Unutulmaması gereken birkaç şey var, React'in kaçtığını aşmanın yolları var. Daha yaygın bir yol, kullanıcıların bileşeniniz için sahne tanımlamasıdır. Kullanıcı girdisinden herhangi bir veriyi sahne olarak genişletmeyin!

React'in XSS korumalı olduğunu söylemeleri ne anlama geliyor?

❗❗❗Uyarı❗❗❗

React'te kendinizi halletmeniz gereken hala bazı XSS ​​saldırı vektörleri var!

1. XSS aracılığıyla dangerouslySetInnerHTML

2. a.href özelliği aracılığıyla XSS

3. Saldırgan kontrollü sahne aracılığıyla XSS

Düzenle:

React'te kendinizi halletmeniz gereken hala bazı XSS saldırı vektörleri var!

1. XSS aracılığıyla `dangerouslySetInnerHTML`