इसका क्या मतलब है जब वे कहते हैं कि रिएक्ट XSS संरक्षित है?

Question

मैंने इसे रिएक्ट ट्यूटोरियल पर पढ़ा। इसका क्या मतलब है?

प्रतिक्रिया सुरक्षित है। हम HTML स्ट्रिंग्स उत्पन्न नहीं कर रहे हैं इसलिए XSS सुरक्षा डिफ़ॉल्ट है।

यदि प्रतिक्रिया सुरक्षित है तो XSS हमले कैसे काम करते हैं? यह सुरक्षा कैसे हासिल की जाती है?

Answer 1

ReactJS डिज़ाइन के हिसाब से काफी सुरक्षित है

1. विचारों में स्ट्रिंग चर स्वचालित रूप से बच जाते हैं
2. JSX के साथ आप एक फ़ंक्शन को इवेंट हैंडलर के रूप में पास करते हैं, बजाय एक स्ट्रिंग के जिसमें दुर्भावनापूर्ण कोड हो सकता है

इसलिए इस तरह का एक विशिष्ट हमला काम नहीं करेगा

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>

परंतु ...

❗❗❗Warning❗❗❗

अभी भी कुछ एक्सएसएस हमले वैक्टर हैं जिन्हें आपको रिएक्ट में खुद को संभालने की आवश्यकता है!

1. XSS के माध्यम से dangerouslySetInnerHTML

जब आप उपयोग करते हैं dangerouslySetInnerHTMLतो आपको यह सुनिश्चित करने की आवश्यकता होती है कि सामग्री में कोई जावास्क्रिप्ट नहीं है। प्रतिक्रिया यहाँ आपके लिए कुछ भी नहीं कर सकती।

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>

2. X.href विशेषता के माध्यम से

उदाहरण 1: जावास्क्रिप्ट का उपयोग करना: कोड

परिणाम देखने के लिए "रन कोड स्निपेट" -> "मेरी वेबसाइट" पर क्लिक करें

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: बेस 64 एन्कोडेड डेटा का उपयोग करना:

परिणाम देखने के लिए "रन कोड स्निपेट" -> "मेरी वेबसाइट" पर क्लिक करें

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>

3. 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>

यहाँ अधिक संसाधन हैं

• ReactJS एप्स में स्क्रिप्ट इंजेक्शन फ्लॉज़ का शोषण

• React.js अनुप्रयोगों में सबसे आम XSS भेद्यता

• कितना XSS भेद्यता संरक्षण प्रतिक्रिया के लिए जिम्मेदार है?

  • https://github.com/facebook/react/issues/3473#issuecomment-90594748
  • https://github.com/facebook/react/issues/3473#issuecomment-91349525

• प्रतिक्रिया में XSS से बचना अभी भी मुश्किल है

• प्रतिक्रिया में मार्कडाउन के माध्यम से XSS से बचना

Comments

यह उत्तर आश्चर्यजनक है! कोड स्निपेट और अंत में संदर्भ के साथ ...! धन्यवाद!

— आयोना

क्या इस उत्तर के लिखे जाने के बाद से ऊपर दिए गए किसी भी उदाहरण को रिएक्ट द्वारा ध्यान दिया गया है? मैं, पूछ रहा हूँ के बाद से मैं निम्नलिखित slideshre में पढ़ें: slideshare.net/kseniadmitrieva/... स्लाइड # 20 कि उपयोगकर्ता के नियंत्रित रंगमंच की सामग्री जहां में तय 15 नवंबर में '0.14 प्रतिक्रिया

— ओमर

@ नोम एंड रिएक्ट ने रिएक्ट लेवल में इस अटैक वैक्टर की देखभाल नहीं करने का फैसला किया। यहाँ कुछ अच्छी टिप्पणियाँ हैं, जो बताती हैं कि वे रिएक्ट स्तर github.com/facebook/react/issues/3473 ( github.com/facebook/react/issues/3473#issuecomment-94949525 , github.com/facebook/react) में क्यों नहीं संभाल रहे हैं / मुद्दों / 3473 # जारी करने -90594748 )

— साइबरपांडा परामर्श

@ आपके द्वारा बताए जा रहे मुद्दे पर एक सुरक्षा बग था और इसे ठीक कर दिया गया था, लेकिन मैंने जो 3 बिंदु सूचीबद्ध किए हैं, वह उस एक से संबंधित नहीं है, फिर भी आप किसी भी प्रतिक्रिया संस्करण के तहत मेरे कोड को निष्पादित करके उस 3 बिंदु के काम की जांच कर सकते हैं।

— साइबरपांडा परामर्श

Answer 2

प्रतिक्रिया स्वचालित रूप से आपके लिए चर से बच जाती है ... यह दुर्भावनापूर्ण जावास्क्रिप्ट के साथ स्ट्रिंग एचटीएमएल के माध्यम से एक्सएसएस इंजेक्शन को रोकता है .. स्वाभाविक रूप से, इसके साथ इनपुट भी पवित्र होते हैं।

उदाहरण के लिए मान लें कि आपके पास यह स्ट्रिंग है

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 हमले के बारे में कुछ और विवरण दिए गए हैं

React मूल रूप से इसे बनाता है ताकि आप मार्कअप न डाल सकें जब तक कि आप रेंडर फंक्शन में एलिमेंट्स खुद नहीं बनाते ... कहा जा रहा है कि उनके पास एक फंक्शन है जो इस तरह के रेंडर को इसकी अनुमति देता है dangerouslySetInnerHTML... यहाँ इसके बारे में कुछ और विस्तार से बताया गया है

---

संपादित करें:

ध्यान देने योग्य कुछ बातें, रिएक्ट से बच निकलने के रास्ते हैं। एक और सामान्य तरीका यह है कि जब उपयोगकर्ता आपके घटक के लिए प्रॉपर परिभाषित करते हैं। प्रॉप के रूप में उपयोगकर्ता इनपुट से किसी भी डेटा का विस्तार न करें!

Comments

सब कुछ बच जाता है? वास्तव में? प्रतिक्रिया डिफ़ॉल्ट रूप से सुरक्षित नहीं है, बहुत सारी चीजें हैं जिन्हें आपको मैन्युअल रूप से करना है और वैक्टर पर हमला करना है जिसे आपको समझना है। जब आप इसे {html} के साथ सम्मिलित करने का प्रयास कर रहे हों, तो सभी रिएक्ट html से बचकर निकल जाते हैं। लेकिन XSS की अनुमति देने के लिए एक लाख अन्य तरीके हैं, जो रिएक्ट से बचाव नहीं करता है। <a href="lights...directory" />, <img src = {...} />, <iframe src = "{...} /> और अन्य प्रॉप्स के टन जो निष्पादन योग्य जावास्क्रिप्ट को इंजेक्ट करने की अनुमति देते हैं। और फिर शैली = {...} प्रोप के माध्यम से सीएसएस स्क्रिप्ट इंजेक्शन है। @ उत्तर अग्निजन द्वारा नीचे दिए गए उत्तर वास्तव में संभावित जोखिमों की रूपरेखा प्रस्तुत करते हैं।

— andree

@andree मेरे टाइपो को इंगित करने के लिए धन्यवाद। यह 3 साल पुरानी पोस्ट है। जाहिर है कि रिएक्ट से बचने के तरीके हैं और प्रत्येक देव को उससे थका होना चाहिए।

— जॉन रूडेल

अपने उत्तर को संपादित करने के लिए धन्यवाद @ जॉन रूडेल। कोई अपराध नहीं है, लेकिन आपके जवाब ने रिएक्ट को वास्तव में की तुलना में अधिक सुरक्षित लग रहा है, और जब से आपका जवाब इस विषय पर आने वाले पहले में से एक है, मैं बस उस बिंदु को इंगित करना चाहता था। दुर्भाग्य से यह एक सामान्य विषय है जिसे मैं समग्र दृश्य (केवल प्रतिक्रिया नहीं) सुरक्षा में देखता हूं - चीजें सतह पर सुरक्षित या आसानी से सुरक्षित दिखती हैं, लेकिन जब आप खुदाई करते हैं, तो पता चलता है कि बड़े छेद हैं। बुनियादी सुरक्षा प्रश्नों के उत्तर होने चाहिए, जो कि कहीं-कहीं संक्षेप में दिए गए हैं, दुर्भाग्यवश, जो कि मेरा अनुभव नहीं है।

— andree

खैर .. समय के साथ प्रलेखन सामने आता है क्योंकि सुरक्षा का परीक्षण किया जाता है। जवाब है कि हम एक बार मददगार रहे हैं उतना उपयोगी नहीं है। हर हिस्सा बदलते तकनीक के साथ सभी जवाबों को

— बरकरार रख