বিশ্বস্ত প্রকারের সাথে DOM-ভিত্তিক ক্রস-সাইট স্ক্রিপ্টিং দুর্বলতা প্রতিরোধ করুন

আপনার অ্যাপ্লিকেশনের DOM XSS আক্রমণ পৃষ্ঠ কমিয়ে দিন।

ক্রজিসটফ কোটোভিচ
Krzysztof Kotowicz

কেন আপনি যত্ন করা উচিত?

DOM-ভিত্তিক ক্রস-সাইট স্ক্রিপ্টিং (DOM XSS) হল সবচেয়ে সাধারণ ওয়েব নিরাপত্তা দুর্বলতার মধ্যে একটি, এবং এটি আপনার অ্যাপ্লিকেশনে প্রবর্তন করা খুবই সহজ। বিশ্বস্ত প্রকারগুলি আপনাকে ডিফল্টরূপে বিপজ্জনক ওয়েব API ফাংশনগুলিকে সুরক্ষিত করে DOM XSS দুর্বলতামুক্ত অ্যাপ্লিকেশনগুলি লিখতে, সুরক্ষা পর্যালোচনা এবং বজায় রাখার সরঞ্জাম দেয়৷ বিশ্বস্ত প্রকারগুলি Chrome 83-এ সমর্থিত এবং অন্যান্য ব্রাউজারগুলির জন্য একটি পলিফিল উপলব্ধ৷ আপ-টু-ডেট ক্রস-ব্রাউজার সমর্থন তথ্যের জন্য ব্রাউজার সামঞ্জস্য দেখুন।

পটভূমি

বহু বছর ধরে DOM XSS হল সবচেয়ে প্রচলিত-এবং বিপজ্জনক-ওয়েব নিরাপত্তা দুর্বলতাগুলির মধ্যে একটি।

ক্রস-সাইট স্ক্রিপ্টিংয়ের দুটি স্বতন্ত্র গ্রুপ রয়েছে। কিছু XSS দুর্বলতা সার্ভার-সাইড কোড দ্বারা সৃষ্ট হয় যা অনিরাপদভাবে ওয়েবসাইট গঠনকারী HTML কোড তৈরি করে। অন্যদের ক্লায়েন্টের একটি মূল কারণ রয়েছে, যেখানে জাভাস্ক্রিপ্ট কোড ব্যবহারকারী-নিয়ন্ত্রিত সামগ্রী সহ বিপজ্জনক ফাংশনগুলিকে কল করে।

সার্ভার-সাইড XSS প্রতিরোধ করতে, স্ট্রিংগুলি সংযুক্ত করে এইচটিএমএল তৈরি করবেন না এবং এর পরিবর্তে নিরাপদ প্রাসঙ্গিক-অটো-স্কেপিং টেমপ্লেটিং লাইব্রেরিগুলি ব্যবহার করুন৷ বাগগুলির বিরুদ্ধে অতিরিক্ত প্রশমনের জন্য একটি অ-ভিত্তিক বিষয়বস্তু সুরক্ষা নীতি ব্যবহার করুন কারণ সেগুলি অনিবার্যভাবে ঘটে।

এখন একটি ব্রাউজার বিশ্বস্ত প্রকারের সাথে ক্লায়েন্ট-সাইড (এছাড়াও DOM-ভিত্তিক নামে পরিচিত) এক্সএসএস প্রতিরোধ করতে সহায়তা করতে পারে।

API ভূমিকা

বিশ্বস্ত প্রকারগুলি নিম্নলিখিত ঝুঁকিপূর্ণ সিঙ্ক ফাংশনগুলি লক করে কাজ করে৷ আপনি ইতিমধ্যেই তাদের কিছু চিনতে পারেন, কারণ ব্রাউজার বিক্রেতা এবং ওয়েব ফ্রেমওয়ার্ক ইতিমধ্যেই নিরাপত্তার কারণে এই বৈশিষ্ট্যগুলি ব্যবহার করা থেকে আপনাকে দূরে সরিয়ে দেয়৷

বিশ্বস্ত প্রকারের জন্য আপনাকে উপরের সিঙ্ক ফাংশনে পাঠানোর আগে ডেটা প্রক্রিয়া করতে হবে। শুধু একটি স্ট্রিং ব্যবহার করা ব্যর্থ হবে, কারণ ব্রাউজারটি জানে না ডেটা বিশ্বাসযোগ্য কিনা:

করবেন না
anElement.innerHTML  = location.href;
বিশ্বস্ত প্রকার সক্ষম করে, ব্রাউজার একটি TypeError নিক্ষেপ করে এবং একটি স্ট্রিং সহ একটি DOM XSS সিঙ্কের ব্যবহার প্রতিরোধ করে৷

ডেটা নিরাপদে প্রক্রিয়া করা হয়েছে তা বোঝাতে, একটি বিশেষ বস্তু তৈরি করুন - একটি বিশ্বস্ত প্রকার।

করবেন
anElement.innerHTML = aTrustedHTML;
বিশ্বস্ত প্রকারগুলি সক্ষম করার সাথে, ব্রাউজারটি এইচটিএমএল স্নিপেটগুলি আশা করে এমন সিঙ্কগুলির জন্য একটি TrustedHTML অবজেক্ট গ্রহণ করে৷ এছাড়াও অন্যান্য সংবেদনশীল সিঙ্কের জন্য TrustedScript এবং TrustedScriptURL অবজেক্ট রয়েছে।

বিশ্বস্ত প্রকারগুলি আপনার অ্যাপ্লিকেশানের DOM XSS আক্রমণ পৃষ্ঠকে ব্যাপকভাবে হ্রাস করে। এটি নিরাপত্তা পর্যালোচনাকে সহজ করে, এবং ব্রাউজারে রানটাইমে আপনার কোড কম্পাইল, লিন্টিং বা বান্ডলিং করার সময় টাইপ-ভিত্তিক নিরাপত্তা চেকগুলি প্রয়োগ করার অনুমতি দেয়।

বিশ্বস্ত প্রকারগুলি কীভাবে ব্যবহার করবেন

বিষয়বস্তু নিরাপত্তা নীতি লঙ্ঘন প্রতিবেদনের জন্য প্রস্তুত করুন

আপনি একটি রিপোর্ট সংগ্রাহক স্থাপন করতে পারেন (যেমন ওপেন-সোর্স go-csp-collector ), অথবা বাণিজ্যিক সমতুল্যগুলির একটি ব্যবহার করতে পারেন। আপনি ব্রাউজারে লঙ্ঘনগুলি ডিবাগ করতে পারেন: js document.addEventListener('securitypolicyviolation', console.error.bind(console));

একটি রিপোর্ট-শুধু CSP শিরোনাম যোগ করুন

আপনি বিশ্বস্ত প্রকারগুলিতে স্থানান্তরিত করতে চান এমন নথিগুলিতে নিম্নলিখিত HTTP প্রতিক্রিয়া শিরোনামটি যুক্ত করুন৷ text Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example

এখন সমস্ত লঙ্ঘন //my-csp-endpoint.example এ রিপোর্ট করা হয়েছে, কিন্তু ওয়েবসাইটটি কাজ চালিয়ে যাচ্ছে। পরবর্তী বিভাগে ব্যাখ্যা করা হয়েছে কিভাবে //my-csp-endpoint.example কাজ করে।

বিশ্বস্ত প্রকার লঙ্ঘন সনাক্ত করুন

এখন থেকে, যতবার বিশ্বস্ত প্রকারগুলি লঙ্ঘন শনাক্ত করবে, একটি রিপোর্ট কনফিগার করা report-uri তে পাঠানো হবে। উদাহরণস্বরূপ, যখন আপনার অ্যাপ্লিকেশন innerHTML এ একটি স্ট্রিং পাস করে, তখন ব্রাউজার নিম্নলিখিত প্রতিবেদন পাঠায়:

{
"csp-report": {
    "document-uri": "https://my.url.example",
    "violated-directive": "require-trusted-types-for",
    "disposition": "report",
    "blocked-uri": "trusted-types-sink",
    "line-number": 39,
    "column-number": 12,
    "source-file": "https://my.url.example/script.js",
    "status-code": 0,
    "script-sample": "Element innerHTML <img src=x"
}
}

এটি বলে যে https://my.url.example/script.js লাইনে 39 innerHTML <img src=x দিয়ে শুরু হওয়া স্ট্রিং দিয়ে কল করা হয়েছিল। এই তথ্যটি আপনাকে কোডের কোন অংশগুলি DOM XSS প্রবর্তন করতে পারে এবং পরিবর্তন করতে হবে তা সংকুচিত করতে সহায়তা করবে।

লঙ্ঘনগুলি ঠিক করুন

একটি বিশ্বস্ত প্রকার লঙ্ঘন ঠিক করার জন্য কয়েকটি বিকল্প রয়েছে৷ আপনি আপত্তিকর কোডটি সরাতে পারেন, একটি লাইব্রেরি ব্যবহার করতে পারেন , একটি বিশ্বস্ত প্রকার নীতি তৈরি করতে পারেন বা শেষ অবলম্বন হিসাবে, একটি ডিফল্ট নীতি তৈরি করতে পারেন

আপত্তিকর কোড পুনরায় লিখুন

সম্ভবত নন-কনফর্মিং কার্যকারিতাটির আর প্রয়োজন নেই বা ত্রুটি-প্রবণ ফাংশনগুলি ব্যবহার না করেই আধুনিক উপায়ে পুনরায় লেখা যেতে পারে?

করবেন না
el.innerHTML = '';
করবেন
el.textContent = '';
const img = document.createElement('img');
img.src = 'xyz.jpg';
el.appendChild(img);

একটি লাইব্রেরি ব্যবহার করুন

কিছু লাইব্রেরি ইতিমধ্যেই বিশ্বস্ত প্রকার তৈরি করে যা আপনি সিঙ্ক ফাংশনে পাস করতে পারেন। উদাহরণস্বরূপ, আপনি একটি HTML স্নিপেট স্যানিটাইজ করার জন্য DOMpurify ব্যবহার করতে পারেন, XSS পেলোডগুলি সরিয়ে ফেলতে পারেন।

import DOMPurify from 'dompurify';
el.innerHTML = DOMPurify.sanitize(html, {RETURN_TRUSTED_TYPE: true});

DOMPurify বিশ্বস্ত প্রকারগুলিকে সমর্থন করে এবং একটি TrustedHTML অবজেক্টে মোড়ানো স্যানিটাইজড HTML ফিরিয়ে দেবে যাতে ব্রাউজার কোনও লঙ্ঘন না করে।

একটি বিশ্বস্ত টাইপ নীতি তৈরি করুন

কখনও কখনও কার্যকারিতা অপসারণ করা সম্ভব হয় না, এবং মানটি স্যানিটাইজ করার এবং আপনার জন্য একটি বিশ্বস্ত প্রকার তৈরি করার জন্য কোনও লাইব্রেরি নেই৷ এই ক্ষেত্রে, একটি বিশ্বস্ত টাইপ অবজেক্ট নিজেই তৈরি করুন।

এজন্য প্রথমে একটি নীতিমালা তৈরি করুন। নীতিগুলি হল বিশ্বস্ত প্রকারের কারখানা যা তাদের ইনপুটে কিছু নিরাপত্তা নিয়ম প্রয়োগ করে:

if (window.trustedTypes && trustedTypes.createPolicy) { // Feature testing
  const escapeHTMLPolicy = trustedTypes.createPolicy('myEscapePolicy', {
    createHTML: string => string.replace(/\</g, '&lt;')
  });
}

এই কোডটি myEscapePolicy নামক একটি নীতি তৈরি করে যা তার createHTML() ফাংশনের মাধ্যমে TrustedHTML অবজেক্ট তৈরি করতে পারে। সংজ্ঞায়িত নিয়মগুলি HTML-এস্কেপ < অক্ষরগুলিকে নতুন এইচটিএমএল উপাদান তৈরি করা রোধ করবে৷

এই মত নীতি ব্যবহার করুন:

const escaped = escapeHTMLPolicy.createHTML('<img src=x onerror=alert(1)>');
console.log(escaped instanceof TrustedHTML);  // true
el.innerHTML = escaped;  // '&lt;img src=x onerror=alert(1)>'

একটি ডিফল্ট নীতি ব্যবহার করুন

কখনও কখনও আপনি আপত্তিকর কোড পরিবর্তন করতে পারবেন না. উদাহরণস্বরূপ, যদি আপনি একটি CDN থেকে একটি তৃতীয় পক্ষের লাইব্রেরি লোড করছেন তবে এটি হয়৷ সেই ক্ষেত্রে, একটি ডিফল্ট নীতি ব্যবহার করুন:

if (window.trustedTypes && trustedTypes.createPolicy) { // Feature testing
  trustedTypes.createPolicy('default', {
    createHTML: (string, sink) => DOMPurify.sanitize(string, {RETURN_TRUSTED_TYPE: true})
  });
}

একটি নাম default সহ নীতিটি ব্যবহার করা হয় যেখানে একটি সিঙ্কে একটি স্ট্রিং ব্যবহার করা হয় যা শুধুমাত্র বিশ্বস্ত প্রকার গ্রহণ করে৷

কন্টেন্ট নিরাপত্তা নীতি প্রয়োগ করার জন্য স্যুইচ করুন

যখন আপনার অ্যাপ্লিকেশন আর লঙ্ঘন তৈরি করে না, তখন আপনি বিশ্বস্ত প্রকারগুলি প্রয়োগ করা শুরু করতে পারেন:

Content-Security-Policy: require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example

ভয়লা ! এখন, আপনার ওয়েব অ্যাপ্লিকেশন যতই জটিল হোক না কেন, একমাত্র জিনিস যা একটি DOM XSS দুর্বলতা প্রবর্তন করতে পারে, সেটি হল আপনার একটি নীতির কোড - এবং আপনি নীতি তৈরিকে সীমিত করে এটিকে আরও লক করতে পারেন৷

আরও পড়া