প্রতিক্রিয়া.জেএস: বিপজ্জনকভাবে সেট ইনার এইচটিএমএল অভ্যন্তরীণ এইচটিএমএল সেট করুন

171

কোনও উপাদানটির অভ্যন্তরীণ এইচটিএমএল বনাম কোনও উপাদানকে বিপজ্জনকভাবে সেটইনার এইচটিএমএল সম্পত্তি সেট করা থেকে কোনও "পর্দার অন্তরালে" পার্থক্য রয়েছে কি? ধরুন আমি সরলতার জন্য জিনিসগুলিকে সঠিকভাবে স্যানিটাইজ করছি।

উদাহরণ:

var test = React.createClass({
  render: function(){
    return (
      <div contentEditable='true' dangerouslySetInnerHTML={{ __html: "Hello" }}></div>
    );
  }
});

বনাম

var test = React.createClass({
  componentDidUpdate: function(prevProp, prevState){
    this.refs.test.innerHTML = "Hello";
  },
  render: function(){
    return (
      <div contentEditable='true' ref='test'></div>
    );
  }
});

আমি উপরের উদাহরণের চেয়ে কিছুটা জটিল কিছু করছি, তবে সামগ্রিক ধারণাটি একই

javascript html reactjs

— Jshoe523
সূত্র

237

হ্যাঁ পার্থক্য আছে!

innerHTMLবনাম বনাম ব্যবহারের তাত্ক্ষণিক প্রভাবটি dangerouslySetInnerHTMLএকরকম - ইঞ্জিনযুক্ত এইচটিএমএল দিয়ে ডোম নোড আপডেট হবে।

যাইহোক , আপনি যখন dangerouslySetInnerHTMLএটি ব্যবহার করবেন তখন পর্দার পিছনে প্রতিক্রিয়াটি জানতে দেয় যে সেই উপাদানটির ভিতরে থাকা HTML এটির যত্ন নেওয়ার মতো জিনিস নয়।

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

আরও গুরুত্বপূর্ণ , আপনি যদি সহজভাবে ব্যবহার করেন তবে innerHTMLপ্রতিক্রিয়াটির DOM নোডটি জানার কোনও উপায় নেই যা সংশোধন করা হয়েছে। পরের বার renderফাংশনটি ডাকা হলে, প্রতিক্রিয়াটি সেই ডিওএম নোডের সঠিক স্থিতি হওয়া উচিত বলে মনে করে যা ম্যানুয়ালি ইনজেকশন করা হয়েছিল সেই সামগ্রীটি ওভাররাইট করে ।

componentDidUpdateসামগ্রীটি সর্বদা সিঙ্কে রয়েছে তা নিশ্চিত করার জন্য আপনার সমাধানের সমাধানটি আমি বিশ্বাস করি যে কাজ করবে তবে প্রতিটি রেন্ডারের সময় একটি ফ্ল্যাশ থাকতে পারে।

— ফ্রান্সিস জন
সূত্র

11

একটি এসভিজি ইনলাইন করা এবং ব্যবহারের মধ্যে পার্থক্যটি দেখানোর জন্য আমি একটি ছোট, অ-বৈজ্ঞানিক পারফেক্ট টেস্ট লিখেছিdangerouslySetInnerHTML : ওয়েবপ্যাকবিন.বিনস / - কেপএএইচএক্স- এক্সএক্সজিজিজিউউএসএএন - অভ্যন্তরীণ এইচটিএমএল পদ্ধতিটি দ্বিগুণ দ্রুত (ওয়েবপ্যাকবিনে কনসোল দেখুন)

— জোসচা

4

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

— ই

3

বিপজ্জনকভাবে অভ্যন্তরীণ এইচটিএমএল অনুসারে ,

কানের অনুপযুক্ত ব্যবহার innerHTMLআপনাকে ক্রস-সাইট স্ক্রিপ্টিং (এক্সএসএস) আক্রমণে মুক্ত করতে পারে । প্রদর্শনের জন্য ব্যবহারকারী ইনপুটকে স্যানিটাইজ করা কুখ্যাত ত্রুটি-প্রবণ এবং সঠিকভাবে স্যানিটাইজ করতে ব্যর্থতা হ'ল ইন্টারনেটে ওয়েব দুর্বলতার অন্যতম প্রধান কারণ।

আমাদের নকশার দর্শনটি হ'ল জিনিসগুলিকে নিরাপদ করা "সহজ" হওয়া উচিত এবং "অনিরাপদ" ক্রিয়াকলাপ সম্পাদন করার সময় বিকাশকারীদের স্পষ্টভাবে তাদের উদ্দেশ্যটি বলা উচিত। প্রোপ নামটি dangerouslySetInnerHTMLইচ্ছাকৃতভাবে ভয়ঙ্কর হতে বেছে নেওয়া হয়েছে এবং স্যানিটাইজড ডেটা নির্দেশ করতে প্রোপ মান (স্ট্রিংয়ের পরিবর্তে একটি বস্তু) ব্যবহার করা যেতে পারে।

সুরক্ষা সংক্রান্ত জটিলতা এবং ডেটা সঠিকভাবে স্যানিটাইজ করার পরে, কেবলমাত্র কী __htmlএবং আপনার স্যানিটাইজড ডেটাটিকে মান হিসাবে অন্তর্ভুক্ত একটি নতুন অবজেক্ট তৈরি করুন । এখানে জেএসএক্স সিনট্যাক্স ব্যবহার করে একটি উদাহরণ দেওয়া হয়েছে:

function createMarkup() {
    return {
       __html: 'First &middot; Second'    };
 }; 

<div dangerouslySetInnerHTML={createMarkup()} />

নীচের লিঙ্কটি ব্যবহার করে এটি সম্পর্কে আরও পড়ুন:

ডকুমেন্টেশন : ডোম উপাদানসমূহের প্রতিক্রিয়া - বিপজ্জনকভাবে সেটইনার এইচটিএমএল ।

— গণেশ সনপ
সূত্র

1

এটি প্রশ্নের উত্তর দেয় না।

— কুইন্টিন

2

( বিপজ্জনকভাবে সেটইনার এইচটিএমএল ) এর উপর ভিত্তি করে ।

এটি এমন একটি প্রস্তাব যা আপনি যা চান ঠিক তেমন করে। তবে তারা এটিকে এই নামকরণ করে যে এটি সতর্কতার সাথে ব্যবহার করা উচিত

— জেসন
সূত্র

1

ভাল ডক্স অনুযায়ী মনে হয় এই একমাত্র কারণ, এখনও গুলিয়ে ফেলা চলবে না

— mkb