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

অনুসরণ
Krzysztof Kotowicz
X GitHub

Browser Support

  • ক্রোম: ৮৩।
  • প্রান্ত: ৮৩।
  • ফায়ারফক্স প্রযুক্তি পূর্বরূপ: সমর্থিত।
  • সাফারি: ২৬।

Source

DOM-ভিত্তিক ক্রস-সাইট স্ক্রিপ্টিং (DOM XSS) তখন ঘটে যখন ব্যবহারকারী-নিয়ন্ত্রিত উৎস থেকে ডেটা (যেমন একটি ব্যবহারকারীর নাম, অথবা URL খণ্ড থেকে নেওয়া একটি পুনঃনির্দেশ URL) একটি sink এ পৌঁছায়, যা eval() এর মতো একটি ফাংশন বা .innerHTML এর মতো একটি সম্পত্তি সেটার যা ইচ্ছামত জাভাস্ক্রিপ্ট কোড কার্যকর করতে পারে।

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

পটভূমি

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

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

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

এখন ব্রাউজারগুলি Trusted Types ব্যবহার করে ক্লায়েন্ট-সাইড DOM-ভিত্তিক XSS প্রতিরোধ করতেও সাহায্য করতে পারে।

API ভূমিকা

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

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

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

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

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

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

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

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

আপনি একটি রিপোর্ট সংগ্রাহক স্থাপন করতে পারেন, যেমন ওপেন-সোর্স reporting-api-processor অথবা go-csp-collector , অথবা বাণিজ্যিক সমতুল্য যেকোনো একটি ব্যবহার করতে পারেন। আপনি ReportingObserver ব্যবহার করে ব্রাউজারে কাস্টম লগিং এবং ডিবাগ লঙ্ঘন যোগ করতে পারেন:

const observer = new ReportingObserver((reports, observer) => {
    for (const report of reports) {
        if (report.type !== 'csp-violation' ||
            report.body.effectiveDirective !== 'require-trusted-types-for') {
            continue;
        }

        const violation = report.body;
        console.log('Trusted Types Violation:', violation);

        // ... (rest of your logging and reporting logic)
    }
}, { buffered: true });

observer.observe();

অথবা একটি ইভেন্ট লিসেনার যোগ করে:

document.addEventListener('securitypolicyviolation',
    console.error.bind(console));

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

আপনি যে ডকুমেন্টগুলিকে বিশ্বস্ত প্রকারে স্থানান্তর করতে চান সেগুলিতে নিম্নলিখিত HTTP প্রতিক্রিয়া শিরোনাম যুক্ত করুন:

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

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

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

এখন থেকে, যখনই Trusted Types কোনও লঙ্ঘন শনাক্ত করবে, তখন ব্রাউজারটি একটি কনফিগার করা 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 এ ৩৯ নম্বর লাইনে, innerHTML <img src=x দিয়ে শুরু হওয়া স্ট্রিং দিয়ে ডাকা হয়েছিল। এই তথ্যটি আপনাকে কোডের কোন অংশগুলি DOM XSS প্রবর্তন করছে এবং পরিবর্তন করতে হবে তা সংকুচিত করতে সাহায্য করবে।

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

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

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

এটা সম্ভব যে নন-কনফর্মিং কোডটির আর প্রয়োজন নেই, অথবা লঙ্ঘনের কারণী ফাংশন ছাড়াই এটি পুনরায় লেখা যেতে পারে:

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

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

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

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

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

একটি বিশ্বস্ত ধরণের নীতি তৈরি করুন

কখনও কখনও আপনি লঙ্ঘনের কারণ কোডটি সরাতে পারবেন না, এবং মানটি স্যানিটাইজ করার এবং আপনার জন্য একটি ট্রাস্টেড টাইপ তৈরি করার জন্য কোনও লাইব্রেরি নেই। এই ক্ষেত্রে, আপনি নিজেই একটি ট্রাস্টেড টাইপ অবজেক্ট তৈরি করতে পারেন।

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

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

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

নীতিটি এভাবে ব্যবহার করুন: 

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 দুর্বলতার পরিচয় দিতে পারে তা হল আপনার কোনও একটি নীতির কোড, এবং আপনি নীতি তৈরি সীমিত করে এটি আরও লক করতে পারেন।

আরও পড়া