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

Krzysztof Kotowicz

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

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

পটভূমি

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

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

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

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

API ভূমিকা

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

• স্ক্রিপ্ট ম্যানিপুলেশন :
  <script src> এবং <script> উপাদানগুলির পাঠ্য সামগ্রী সেট করা।
• একটি স্ট্রিং থেকে HTML তৈরি করা হচ্ছে :
  • innerHTML
  • outerHTML
  • insertAdjacentHTML
  • <iframe> srcdoc
  • document.write
  • document.writeln
  • DOMParser.parseFromString
• প্লাগইন বিষয়বস্তু কার্যকর করা :
  • <embed src>
  • <object data>
  • <object codebase>
• রানটাইম জাভাস্ক্রিপ্ট কোড সংকলন :
  • eval
  • setTimeout
  • setInterval
  • new Function()

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

anElement.innerHTML  = location.href;

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

anElement.innerHTML = aTrustedHTML;
  

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

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

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

আপনি একটি প্রতিবেদন সংগ্রাহক স্থাপন করতে পারেন, যেমন ওপেন-সোর্স রিপোর্টিং-এপিআই-প্রসেসর বা go-csp-সংগ্রাহক , অথবা বাণিজ্যিক সমতুল্যগুলির একটি ব্যবহার করতে পারেন৷ আপনি একটি 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 কাজ করে।

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

এখন থেকে, যতবার বিশ্বস্ত প্রকারগুলি লঙ্ঘন শনাক্ত করে, ব্রাউজার একটি কনফিগার করা 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.textContent = '';
const img = document.createElement('img');
img.src = 'xyz.jpg';
el.appendChild(img);

el.innerHTML = '<img src=xyz.jpg>';

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

কিছু লাইব্রেরি ইতিমধ্যেই বিশ্বস্ত প্রকার তৈরি করে যা আপনি সিঙ্ক ফাংশনে পাস করতে পারেন। উদাহরণস্বরূপ, আপনি একটি 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 অবজেক্ট তৈরি করতে পারে। সংজ্ঞায়িত নিয়ম এইচটিএমএল-এসকেপ < অক্ষর নতুন এইচটিএমএল উপাদান তৈরি রোধ করতে.

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

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

আরও পড়া

• বিশ্বস্ত প্রকার GitHub
• W3C স্পেসিফিকেশন খসড়া
• FAQ
• ইন্টিগ্রেশন