যখন তারা বলবে যে প্রতিক্রিয়াটি এক্সএসএস সুরক্ষিত আছে তখন এর অর্থ কী?

Question

আমি এটি প্রতিক্রিয়া টিউটোরিয়ালে পড়েছি। এটার মানে কি?

প্রতিক্রিয়া নিরাপদ। আমরা এইচটিএমএল স্ট্রিং তৈরি করছি না তাই এক্সএসএস সুরক্ষা ডিফল্ট।

প্রতিক্রিয়া নিরাপদ হলে এক্সএসএস আক্রমণগুলি কীভাবে কাজ করবে? এই সুরক্ষা কীভাবে অর্জিত হয়?

Answer 1

ReactJS ডিজাইন দ্বারা বেশ নিরাপদ

1. দর্শনে স্ট্রিং ভেরিয়েবলগুলি স্বয়ংক্রিয়ভাবে পালিয়ে যায়
2. জেএসএক্সের সাহায্যে আপনি দূষিত কোড থাকতে পারে এমন স্ট্রিংয়ের পরিবর্তে ইভেন্ট হ্যান্ডলার হিসাবে একটি ফাংশন পাস করেন

সুতরাং এর মতো একটি সাধারণ আক্রমণ কার্যকর হবে না

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>

কিন্তু ...

Ar ওয়ার্নিং ❗❗❗

এখনও কিছু এক্সএসএস আক্রমণ ভেক্টর রয়েছে যা আপনার নিজের প্রতিক্রিয়াতে নিজেকে পরিচালনা করতে হবে!

1. এক্সএসএস এর মাধ্যমে 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. এক্স.এসএসএস a.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>

৩. আক্রমণকারী নিয়ন্ত্রিত প্রপসের মাধ্যমে এক্সএসএস

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.js অ্যাপ্লিকেশনগুলিতে সর্বাধিক প্রচলিত এক্সএসএস দুর্বলতা

• এক্সএসএসের দুর্বলতা সুরক্ষা কতটা দায়বদ্ধ?

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

• প্রতিক্রিয়াতে এক্সএসএস এড়ানো এখনও শক্ত

• প্রতিক্রিয়াতে মার্কডাউনের মাধ্যমে এক্সএসএস এড়ানো

Comments

এই উত্তর আশ্চর্যজনক! কোড স্নিপেটস এবং শেষে রেফারেন্স সহ ...! ধন্যবাদ!

— Ioanna

এই উত্তরটি লেখার পর থেকেই কি প্রতিক্রিয়ার দ্বারা উপরের উদাহরণগুলির মধ্যে কোনওটির যত্ন নেওয়া হয়েছে? আমি জিজ্ঞেস করছি, যেহেতু আমি নিম্নলিখিত slideshre পড়া: slideshare.net/kseniadmitrieva/... স্লাইড # 20 ব্যবহারকারীকে নিয়ন্ত্রিত সাজসরঞ্জাম যেখানে সংশোধন 15 নভেম্বরে '0.14 প্রতিক্রিয়া

— Omer

@ উমর নং, এবং প্রতিক্রিয়া প্রতিক্রিয়া পর্যায়ের এই আক্রমণকারী ভেক্টরদের যত্ন নেওয়ার সিদ্ধান্ত নিয়েছে। তারা কেন প্রতিক্রিয়া স্তরের github.com/facebook/react/issues/3473 ( github.com/facebook/react/issues/3473#issuecomment-91349525 , github.com/facebook/react এ পরিচালনা করছেন না তা বোঝাতে এখানে কয়েকটি ভাল মন্তব্য দেওয়া হয়েছে) / ইস্যু / 3473 # জারি-90594748 )

— সাইবারপান্ডা পরামর্শ

@ যে বিষয়টি আপনি উল্লেখ করছেন সেটি ইমোরটি একটি সুরক্ষা বাগ ছিল এবং এটি স্থির হয়েছে, তবে আমি যে পয়েন্ট 3 তালিকাভুক্ত করেছি সেটির সাথে সম্পর্কিত নয়, আপনি এখনও কোনও প্রতিক্রিয়া সংস্করণের অধীনে আমার কোডটি সম্পাদন করে তৃতীয় পয়েন্টের কাজটি পরীক্ষা করে দেখতে পারেন।

— সাইবারপান্ডা পরামর্শক

Answer 2

প্রতিক্রিয়া স্বয়ংক্রিয়ভাবে আপনার জন্য ভেরিয়েবলগুলি পলায়ন করে ... এটি ক্ষতিকারক জাভাস্ক্রিপ্ট সহ স্ট্রিং এইচটিএমএল এর মাধ্যমে এক্সএসএস ইনজেকশনটিকে রোধ করে .. স্বাভাবিকভাবেই, ইনপুটগুলিও এর সাথে স্যানিটাইজ করা হয়।

উদাহরণস্বরূপ বলা যাক আপনার কাছে এই স্ট্রিং রয়েছে

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

যদি আপনি প্রতিক্রিয়াতে এই স্ট্রিংটি রেন্ডার করার চেষ্টা করেন

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

আপনি আক্ষরিকভাবে পৃষ্ঠাটিতে পুরো স্ট্রিংটি দেখতে পাবেন including <span> tag ব্রাউজারে আপনি দেখতে পাবেন<img src="javascript:alert('XSS!')" />

যদি আপনি উত্সটি এইচটিএমএল দেখেন তবে আপনি দেখতে পাবেন

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

এক্সএসএসের আক্রমণ কী তা সম্পর্কে এখানে আরও কিছু বিশদ

প্রতিক্রিয়াটি মূলত এটি করে তোলে যাতে আপনি রেন্ডার ফাংশনে নিজেকে উপাদান তৈরি না করা পর্যন্ত আপনি মার্কআপ সন্নিবেশ করতে পারবেন না ... বলা হচ্ছে যে তাদের একটি ফাংশন রয়েছে যা এটি এর রেন্ডারিংকে অনুমতি দেয় dangerouslySetInnerHTML... এটি সম্পর্কে আরও বিশদ এখানে

---

সম্পাদনা করুন:

কয়েকটি বিষয় লক্ষণীয়, প্রতিক্রিয়া কী থেকে বাঁচতে পারে তার চারপাশে যাওয়ার উপায় রয়েছে। আর একটি সাধারণ উপায় হ'ল যখন ব্যবহারকারীরা আপনার উপাদানগুলিতে প্রপস সংজ্ঞা দেয়। প্রপস হিসাবে ব্যবহারকারীর ইনপুট থেকে কোনও ডেটা প্রসারিত করবেন না!

Comments

সব পালিয়ে যায়? সত্যি? প্রতিক্রিয়া ডিফল্ট হিসাবে নিরাপদ নয়, আপনাকে ম্যানুয়ালি করতে অনেক কিছুই আছে এবং ভেক্টরকে আক্রমণ করতে হবে যা আপনাকে বুঝতে হবে। আপনি যখন এটি {html} দিয়ে সন্নিবেশ করানোর চেষ্টা করছেন তখন সমস্ত প্রতিক্রিয়া হ'ল এইচটিএমএল স্ট্রিং থেকে পালানো} তবে এক্সএসএসকে অনুমতি দেওয়ার জন্য আরও এক মিলিয়ন উপায় রয়েছে যা প্রতিক্রিয়া থেকে রক্ষা করে না। <a href= " । এবং তারপর শৈলী মাধ্যমে হয় সিএসএস স্ক্রিপ্ট ইনজেকশনও = {...} ঠেকনা নীচে @Marty Aghajanyan কর্তৃক সাড়া আসলে সম্ভাব্য ঝুঁকি রূপরেখা।

— Andree

@ এবং আমার টাইপগুলি নির্দেশ করার জন্য ধন্যবাদ। এটি একটি 3 বছরের পুরানো পোস্ট। স্পষ্টতই প্রতিক্রিয়া কী থেকে বাঁচতে পারে তার চারপাশের উপায় রয়েছে এবং প্রতিটি দেবকে এ থেকে বিরক্ত হওয়া উচিত।

— জন রুডেল

আপনার উত্তর @ জন রুডেল সম্পাদনা করার জন্য ধন্যবাদ। কোনও অপরাধ নয়, তবে আপনার উত্তরটি প্রতিক্রিয়াটিকে প্রকৃত তুলনায় আরও সুরক্ষিত দেখায় এবং যেহেতু আপনার উত্তরটি এই বিষয়টিতে প্রথম দিক থেকে আসে তাই আমি কেবল এটি উল্লেখ করতে চেয়েছিলাম। দুর্ভাগ্যক্রমে এটি একটি সাধারণ থিম যা আমি সামগ্রিক সীমান্তে দেখি (কেবল প্রতিক্রিয়া নয়) সুরক্ষা - জিনিসগুলি পৃষ্ঠতলে সুরক্ষিত বা সহজেই সুরক্ষিত দেখায় তবে আপনি যখন খোঁড়াখুঁজি করেন তখন দেখা যায় সেখানে বড় গর্ত রয়েছে। বেসিক সুরক্ষা প্রশ্নগুলির উত্তর থাকতে হবে যেগুলি কোথাও সংক্ষিপ্ত আকারে খুঁজে পাওয়া সহজ, দুর্ভাগ্যক্রমে এটি আমার অভিজ্ঞতা ইদানীং নয়।

— ই

ঠিক আছে .. সময়ের সাথে সাথে ডকুমেন্টেশন বেরিয়ে আসে সুরক্ষার পরীক্ষা করা হিসাবে। যে উত্তরগুলি আমরা একবার সহায়ক হয়েছিল সেগুলি তেমন সহায়ক নয়। কঠোর অংশটি পরিবর্তনগুলি সম্পর্কিত প্রযুক্তিটির সাথে সমস্ত উত্তরকে আপ টু ডেট রাখছে

— জন রুডেল