Chrome DevTools-এ CSP ও বিশ্বস্ত ধরনের ডিবাগিং প্রয়োগ করা

Kateryna Prokopenko
Kateryna Prokopenko
GitHub
Alfonso Castaño
Alfonso Castaño

এই ব্লগ পোস্টটি সম্প্রতি চালু করা সমস্যা ট্যাব-এর সাহায্যে কন্টেন্ট নিরাপত্তা নীতি (CSP) সংক্রান্ত সমস্যা ডিবাগ করার জন্য DevTools সহায়তা প্রয়োগ করার বিষয়ে।

২টি ইন্টার্নশিপের সময় প্রয়োগের কাজ করা হয়েছে: ১. প্রথম ধাপে, আমরা সাধারণ রিপোর্টিং ফ্রেমওয়ার্ক তৈরি করেছি এবং ৩টি CSP লঙ্ঘন সংক্রান্ত সমস্যার জন্য ইস্যু মেসেজ ডিজাইন করেছি। ২. দ্বিতীয়টির সময়, আমরা বিশ্বস্ত প্রকারের সমস্যা এবং বিশ্বস্ত প্রকার ডিবাগ করার জন্য কিছু বিশেষ DevTools ফিচার যোগ করেছি।

কন্টেন্ট নিরাপত্তা নীতি কী?

কন্টেন্ট নিরাপত্তা নীতি (CSP) নিরাপত্তা বাড়ানোর জন্য ওয়েবসাইটে নির্দিষ্ট কিছু আচরণ সীমাবদ্ধ করার অনুমতি দেয়। যেমন, ইনলাইন স্ক্রিপ্ট বা eval-এর অনুমতি না দেওয়ার জন্য CSP ব্যবহার করা যেতে পারে, যার ফলে ক্রস-সাইট স্ক্রিপ্টিং (XSS) অ্যাটাকের জন্য অ্যাটাক সারফেস কমে যায়। CSP সম্পর্কে বিস্তারিত জানতে, এখানে পড়ুন।

একটি বিশেষ নতুন CSP হল Trusted Types(TT) নীতি, যা একটি ডাইনামিক বিশ্লেষণকে সক্ষম করে যা পদ্ধতিগতভাবে ওয়েবসাইটে ইনজেকশন অ্যাটাকের একটি বড় শ্রেণীকে প্রতিরোধ করতে পারে। এটি করার জন্য, TT কোনও ওয়েবসাইটকে তার জাভাস্ক্রিপ্ট কোডকে পুলিশিং করতে সাহায্য করে যাতে শুধুমাত্র নির্দিষ্ট ধরনের জিনিসকে DOM সিঙ্কে অ্যাসাইন করার অনুমতি দেওয়া হয়, যেমন innerHTML।

কোনও ওয়েবসাইট নির্দিষ্ট HTTP হেডার অন্তর্ভুক্ত করে কন্টেন্ট সুরক্ষা সংক্রান্ত নীতি অ্যাক্টিভেট করতে পারে। যেমন, হেডার content-security-policy: require-trusted-types-for 'script'; trusted-types default কোনও পৃষ্ঠার জন্য TT নীতি অ্যাক্টিভেট করে।

প্রতিটি নীতি এইসব মোডের মধ্যে একটিতে কাজ করতে পারে:

  • এনফোর্সড মোড - যেখানে প্রতিটি নীতি লঙ্ঘন একটি ত্রুটি,
  • শুধুমাত্র-রিপোর্ট মোড - যা ত্রুটি মেসেজকে সতর্কতা হিসেবে রিপোর্ট করে, কিন্তু ওয়েব পেজে কোনও সমস্যা সৃষ্টি করে না।

সমস্যা ট্যাবে কন্টেন্ট নিরাপত্তা নীতি সংক্রান্ত সমস্যা প্রয়োগ করা হচ্ছে

এই কাজের লক্ষ্য ছিল CSP সংক্রান্ত সমস্যার জন্য ডিবাগিং অভিজ্ঞতা উন্নত করা। নতুন সমস্যা বিবেচনা করার সময়, DevTools টিম মোটামুটি এই প্রসেস অনুসরণ করে:

  1. ইউজার স্টোরি সংজ্ঞায়িত করা। DevTools ফ্রন্ট-এন্ডে ইউজার স্টোরির একটি সেট শনাক্ত করুন যা একজন ওয়েব ডেভেলপারকে কীভাবে সমস্যাটি তদন্ত করতে হবে তা কভার করে।
  2. ফ্রন্ট-এন্ড ইমপ্লিমেন্টেশন। ইউজার স্টোরির উপর ভিত্তি করে, ফ্রন্ট-এন্ডে সমস্যাটি তদন্ত করার জন্য কোন কোন তথ্য প্রয়োজন তা শনাক্ত করুন (যেমন, একটি সম্পর্কিত অনুরোধ, একটি কুকির নাম, একটি স্ক্রিপ্ট বা html ফাইলের একটি লাইন ইত্যাদি)।
  3. সমস্যা শনাক্তকরণ। ব্রাউজারের সেইসব জায়গা শনাক্ত করুন যেখানে Chrome-এ সমস্যাটি শনাক্ত করা যেতে পারে এবং ধাপ (২) থেকে প্রাসঙ্গিক তথ্য সহ সমস্যাটি রিপোর্ট করার জন্য জায়গাটি ইন্সট্রুমেন্ট করুন।
  4. সমস্যাগুলি সেভ করে দেখান। সমস্যাগুলি একটি উপযুক্ত জায়গায় স্টোর করুন এবং DevTools খোলা হলে সেগুলি উপলভ্য করুন
  5. সমস্যা সংক্রান্ত টেক্সট ডিজাইন করা। এমন একটি ব্যাখ্যামূলক টেক্সট তৈরি করুন যা ওয়েব ডেভেলপারকে সমস্যাটি বুঝতে এবং আরও গুরুত্বপূর্ণভাবে, তা সমাধান করতে সাহায্য করে

ধাপ ১: CSP সমস্যার জন্য ইউজার স্টোরি নির্ধারণ করা

আমরা প্রয়োগের কাজ শুরু করার আগে, আমাদের কী করতে হবে তা আরও ভালভাবে বোঝার জন্য ইউজার স্টোরি সহ একটি ডিজাইন ডকুমেন্ট তৈরি করেছি। উদাহরণস্বরূপ, আমরা নিম্নলিখিত ইউজার স্টোরি লিখেছি:

একজন ডেভেলপার হিসেবে, যিনি এইমাত্র বুঝতে পেরেছেন যে আমার ওয়েবসাইটের কিছু অংশ ব্লক করা হয়েছে, আমি চাই:- - ...আমার ওয়েবসাইটে ব্লক করা iframe / ছবির জন্য CSP একটি কারণ কিনা তা খুঁজে বের করতে - ...কোন CSP নির্দেশিকা একটি নির্দিষ্ট রিসোর্স ব্লক করার কারণ তা জানতে - ...বর্তমানে ব্লক করা রিসোর্স / বর্তমানে ব্লক করা js-এর এক্সিকিউশন দেখানোর অনুমতি দেওয়ার জন্য আমার ওয়েবসাইটের CSP কীভাবে পরিবর্তন করতে হয় তা জানতে।

এই ইউজার স্টোরি এক্সপ্লোর করতে, আমরা কিছু সহজ উদাহরণ ওয়েব পেজ তৈরি করেছি যা আমাদের আগ্রহের CSP লঙ্ঘন প্রদর্শন করেছে এবং প্রক্রিয়াটির সাথে নিজেদের পরিচিত করতে উদাহরণ পৃষ্ঠাগুলি এক্সপ্লোর করেছি। এখানে কিছু ওয়েব পৃষ্ঠার উদাহরণ দেওয়া হল (সমস্যা ট্যাব খুলে ডেমো দেখুন):

এই প্রসেস ব্যবহার করে আমরা জানতে পেরেছি যে CSP সংক্রান্ত সমস্যা ডিবাগ করার জন্য সোর্স লোকেশন হল সবচেয়ে গুরুত্বপূর্ণ তথ্য। আমরা আরও দেখেছি যে কোনও রিসোর্স ব্লক করা হলে, সংশ্লিষ্ট iframe এবং অনুরোধ দ্রুত খুঁজে পেতে এবং DevTools-এর এলিমেন্ট প্যানেলে HTML এলিমেন্টের সরাসরি লিঙ্কও উপযোগী হতে পারে।

ধাপ ২: ফ্রন্ট-এন্ড ইমপ্লিমেন্টেশন

আমরা এই ইনসাইটকে তথ্যের প্রথম ড্রাফ্টে পরিণত করেছি যা আমরা Chrome DevTools Protocol (CDP)-এর মাধ্যমে DevTools-এ উপলভ্য করতে চেয়েছিলাম:

third_party/blink/public/devtools_protocol/browser_protocol.pdl থেকে নেওয়া উদ্ধৃতি নিচে দেওয়া হল

 type ContentSecurityPolicyIssueDetails extends object
   properties
     # The url not included in allowed sources.
     optional string blockedURL
     # Specific directive that is violated, causing the CSP issue.
     string violatedDirective
     boolean isReportOnly
     ContentSecurityPolicyViolationType contentSecurityPolicyViolationType
     optional AffectedFrame frameAncestor
     optional SourceCodeLocation sourceCodeLocation
     optional DOM.BackendNodeId violatingNodeId

উপরের সংজ্ঞাটি মূলত একটি JSON ডেটা-স্ট্রাকচার এনকোড করে। এটি PDL (প্রোটোকল ডেটা ল্যাঙ্গুয়েজ) নামক একটি সহজ ভাষায় লেখা হয়। PDL দুটি উদ্দেশ্যে ব্যবহার করা হয়। প্রথমে, আমরা DevTools ফ্রন্ট-এন্ডের উপর নির্ভর করে এমন TypeScript সংজ্ঞা তৈরি করতে PDL ব্যবহার করি। যেমন, উপরে উল্লেখ করা PDL সংজ্ঞা নিম্নলিখিত TypeScript ইন্টারফেস জেনারেট করে:

export interface ContentSecurityPolicyIssueDetails {
  /**
  * The url not included in allowed sources.
  */
  blockedURL?: string;
  /**
  * Specific directive that is violated, causing the CSP issue.
  */
  violatedDirective: string;
  isReportOnly: boolean;
  contentSecurityPolicyViolationType: ContentSecurityPolicyViolationType;
  frameAncestor?: AffectedFrame;
  sourceCodeLocation?: SourceCodeLocation;
  violatingNodeId?: DOM.BackendNodeId;
}

দ্বিতীয়ত, এবং সম্ভবত আরও গুরুত্বপূর্ণভাবে, আমরা সংজ্ঞা থেকে একটি C++ লাইব্রেরি তৈরি করি যা C++ Chromium ব্যাক-এন্ড থেকে DevTools ফ্রন্ট-এন্ডে এই ডেটা স্ট্রাকচার তৈরি এবং পাঠানোর কাজ পরিচালনা করে। সেই লাইব্রেরি ব্যবহার করে, C++ কোডের নিম্নলিখিত অংশ ব্যবহার করে একটি ContentSecurityPolicyIssueDetails অবজেক্ট তৈরি করা যেতে পারে:

protocol::Audits::ContentSecurityPolicyIssueDetails::create()
  .setViolatedDirective(d->violated_directive)
  .setIsReportOnly(d->is_report_only)
  .setContentSecurityPolicyViolationType(BuildViolationType(
      d->content_security_policy_violation_type)))
  .build();

কোন তথ্য উপলভ্য করতে চাই তা স্থির করার পরে, Chromium থেকে এই তথ্য কোথায় পাওয়া যাবে তা আমাদের খুঁজে দেখতে হয়েছে।

ধাপ ৩: সমস্যা শনাক্তকরণ

শেষ বিভাগে বর্ণিত ফর্ম্যাটে Chrome DevTools Protocol (CDP)-এ তথ্য উপলভ্য করতে, ব্যাক-এন্ডে তথ্যটি আসলে কোথায় উপলভ্য ছিল তা আমাদের খুঁজে বের করতে হবে। সৌভাগ্যবশত, CSP কোডে আগে থেকেই শুধু-রিপোর্ট মোডের জন্য একটি বটল-নেক ছিল, যেখানে আমরা হুক করতে পারি: ContentSecurityPolicy::ReportViolation (ঐচ্ছিক) রিপোর্টিং এন্ড-পয়েন্টে সমস্যার রিপোর্ট করে যা CSP HTTP হেডারে কনফিগার করা যেতে পারে। আমরা যে তথ্য রিপোর্ট করতে চেয়েছিলাম তার বেশিরভাগই আগে থেকে উপলভ্য ছিল, তাই আমাদের ইনস্ট্রুমেন্টেশন কাজ করার জন্য ব্যাক-এন্ডে কোনও বড় পরিবর্তন করার প্রয়োজন হয়নি।

ধাপ ৪: সমস্যাগুলি সেভ করে দেখানো

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

এর মাধ্যমে ব্যাক-এন্ডের কাজ শেষ হয় এবং এখন আমাদের ফ্রন্ট-এন্ডে কীভাবে সমস্যাটি তুলে ধরা যায় সেদিকে মনোযোগ দিতে হবে।

ধাপ ৫: সমস্যার টেক্সট ডিজাইন করা

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

সাধারণত DevTools টিম তাদের কল্পনার একটি রাফ ড্রাফ্ট দিয়ে শুরু করবে:


## Header
Content Security Policy: include all sources of your resources in content security policy header to improve the functioning of your site

## General information
Even though some sources are included in the content security policy header, some resources accessed by your site like images, stylesheets or scripts originate from sources not included in content security policy directives.

Usage of content from not included sources is restricted to strengthen the security of your entire site.

## Specific information

### VIOLATED DIRECTIVES
`img-src 'self'`

### BLOCKED URLs
https://imgur.com/JuXCo1p.jpg

## Specific information
https://web.dev/strict-csp/

ইটারেশনের পরে, আমরা এখানে পৌঁছেছি:

ALT_TEXT_HERE

আপনি দেখতেই পাচ্ছেন, ফিচার টিম ও DevRel-কে যুক্ত করলে বিবরণ অনেক বেশি স্পষ্ট ও যথাযথ হয়!

আপনার পৃষ্ঠায় CSP সংক্রান্ত সমস্যা CSP লঙ্ঘন সংক্রান্ত নির্দিষ্ট ট্যাবেও খুঁজে পাওয়া যেতে পারে।

বিশ্বস্ত প্রকারের সমস্যা ডিবাগ করা

সঠিক ডেভেলপার টুল ছাড়া বড় স্কেলে TT-এর সাথে কাজ করা চ্যালেঞ্জিং হতে পারে।

উন্নত কনসোল প্রিন্টিং

আমরা যখন বিশ্বস্ত অবজেক্টের সাথে কাজ করি, তখন আমরা অন্তত বিশ্বস্ত নয় এমন অবজেক্টের মতো একই পরিমাণ তথ্য দেখাতে চাই। বর্তমানে, কোনও বিশ্বস্ত অবজেক্ট দেখানোর সময়, র‍্যাপ করা অবজেক্ট সম্পর্কে কোনও তথ্য দেখানো হয় না।

এর কারণ হল, কনসোলে যে ভ্যালু দেখানো হয় সেটি ডিফল্ট হিসেবে অবজেক্টে .valueOf() কল করার মাধ্যমে নেওয়া হয়। তবে, বিশ্বস্ত প্রকারের ক্ষেত্রে, রিটার্ন করা মান খুব একটা উপযোগী নয়। পরিবর্তে, আমরা এমন কিছু চাই যা .toString()-এ কল করার সময় আপনি যা পান তার মতো। এটি করার জন্য, বিশ্বস্ত ধরনের অবজেক্টের জন্য বিশেষ হ্যান্ডলিং চালু করতে আমাদের V8 এবং Blink পরিবর্তন করতে হবে।

যদিও ঐতিহাসিক কারণে এই কাস্টম হ্যান্ডলিং V8-এ করা হয়েছিল, তবে এই ধরনের পদ্ধতির গুরুত্বপূর্ণ অসুবিধা রয়েছে। এমন অনেক অবজেক্ট আছে যেগুলি কাস্টম ডিসপ্লে করার প্রয়োজন হয় কিন্তু JS লেভেলে সেগুলির ধরন একই। V8 হল পিওর JS, তাই এটি বিশ্বস্ত প্রকারের মতো ওয়েব API-এর সাথে সম্পর্কিত ধারণাগুলিকে আলাদা করতে পারে না। সেই কারণে, V8-কে তার এম্বেডার (Blink)-এর কাছে সাহায্য চাইতে হয় যাতে সেগুলিকে আলাদা করা যায়।

তাই, কোডের সেই অংশ Blink বা যেকোনও এম্বেডারে সরিয়ে নিয়ে যাওয়া যুক্তিযুক্ত বলে মনে হয়। প্রকাশিত সমস্যা ছাড়াও, আরও অনেক সুবিধা রয়েছে:

  • প্রতিটি এম্বেডারের নিজস্ব বিবরণ জেনারেশন থাকতে পারে
  • Blink API-এর মাধ্যমে বিবরণ জেনারেট করা অনেক সহজ
  • Blink-এর কাছে অবজেক্টের আসল সংজ্ঞার অ্যাক্সেস আছে। তাই, বিবরণ তৈরি করতে আমরা .toString() ব্যবহার করলে, .toString()-এর সংজ্ঞা আবার নির্ধারণ করার কোনও ঝুঁকি থাকে না।

লঙ্ঘন-হলে-বন্ধ-হবে (শুধু-রিপোর্ট-করার মোডে)

বর্তমানে, TT লঙ্ঘন ডিবাগ করার একমাত্র উপায় হল JS এক্সেপশনে ব্রেকপয়েন্ট সেট করা। যেহেতু এনফোর্স করা TT লঙ্ঘনের ফলে ব্যতিক্রম ট্রিগার হবে, তাই এই ফিচারটি কোনওভাবে উপযোগী হতে পারে। তবে, বাস্তব পরিস্থিতিতে TT লঙ্ঘনের উপর আপনার আরও সূক্ষ্ম নিয়ন্ত্রণ প্রয়োজন। বিশেষ করে, আমরা শুধুমাত্র TT লঙ্ঘনের (অন্যান্য ব্যতিক্রম নয়) ক্ষেত্রে, শুধুমাত্র রিপোর্ট করার মোডেও এবং বিভিন্ন ধরনের TT লঙ্ঘনের মধ্যে পার্থক্য করতে চাই।

DevTools-এ আগে থেকেই বিভিন্ন ধরনের ব্রেকপয়েন্টের জন্য সহায়তা রয়েছে, তাই আর্কিটেকচারটি বেশ এক্সটেনসিবল। নতুন ব্রেকপয়েন্টের ধরন যোগ করতে হলে ব্যাকএন্ড (Blink), CDP ও ফ্রন্টএন্ডে পরিবর্তন করতে হবে। আমাদের একটি নতুন CDP কমান্ড চালু করা উচিত, এটিকে setBreakOnTTViolation বলা যাক। এই কমান্ড ফ্রন্টএন্ড ব্যবহার করবে ব্যাকএন্ডকে জানাতে যে কোন ধরনের TT লঙ্ঘনের ক্ষেত্রে এটি ব্রেক করবে। ব্যাকএন্ড, বিশেষ করে InspectorDOMDebuggerAgent, একটি "প্রোব" প্রদান করবে, onTTViolation() যা প্রতিবার TT লঙ্ঘন ঘটলে কল করা হবে। তারপর, InspectorDOMDebuggerAgent চেক করবে যে সেই লঙ্ঘনের কারণে ব্রেকপয়েন্ট ট্রিগার করা উচিত কিনা এবং যদি তাই হয়, তাহলে এটি এক্সিকিউশন পজ করার জন্য ফ্রন্টএন্ডে একটি মেসেজ পাঠাবে।

কী করা হয়েছে এবং এর পরে কী করতে হবে?

এখানে বর্ণিত সমস্যাগুলি শুরু হওয়ার পর থেকে, সমস্যা ট্যাবে বেশ কিছু পরিবর্তন করা হয়েছে:

ভবিষ্যতে, আরও সমস্যা দেখানোর জন্য আমরা সমস্যা ট্যাব ব্যবহার করার পরিকল্পনা করছি, যার ফলে দীর্ঘমেয়াদে কনসোলে পড়া যায় না এমন ত্রুটি মেসেজের ফ্লো আনলোড করা সম্ভব হবে।

প্রিভিউ চ্যানেল ডাউনলোড করুন

আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসেবে Chrome Canary, Dev বা Beta ব্যবহার করার কথা বিবেচনা করুন। এইসব প্রিভিউ চ্যানেল আপনাকে লেটেস্ট DevTools ফিচার অ্যাক্সেস করতে দেয়, আপনাকে অত্যাধুনিক ওয়েব প্ল্যাটফর্ম API পরীক্ষা করতে দেয় এবং আপনার ব্যবহারকারীরা খুঁজে পাওয়ার আগেই আপনার সাইটে সমস্যা খুঁজে পেতে সাহায্য করে!

Chrome DevTools টিমের সাথে যোগাযোগ করুন

DevTools সম্পর্কিত নতুন ফিচার, আপডেট বা অন্য যেকোনও বিষয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন।