নিরাপত্তা লঙ্ঘন, অবচিত API কল এবং আরও অনেক কিছু পর্যবেক্ষণ করতে রিপোর্টিং API ব্যবহার করুন।
কিছু ত্রুটি শুধুমাত্র উৎপাদনের সময় ঘটে। আপনি স্থানীয়ভাবে বা ডেভেলপমেন্টের সময় এগুলি দেখতে পাবেন না কারণ প্রকৃত ব্যবহারকারী , প্রকৃত নেটওয়ার্ক এবং প্রকৃত ডিভাইসগুলি খেলা পরিবর্তন করে। রিপোর্টিং API এই ত্রুটিগুলির কিছু ধরতে সাহায্য করে—যেমন নিরাপত্তা লঙ্ঘন বা আপনার সাইট জুড়ে অবচিত এবং শীঘ্রই অবচিত API কল, এবং সেগুলিকে আপনার নির্দিষ্ট করা একটি এন্ডপয়েন্টে প্রেরণ করে।
এটি আপনাকে HTTP হেডার ব্যবহার করে কী পর্যবেক্ষণ করতে চান তা ঘোষণা করতে দেয় এবং ব্রাউজার দ্বারা পরিচালিত হয়।
রিপোর্টিং এপিআই সেট আপ করলে আপনি মনে প্রশান্তি পাবেন যে ব্যবহারকারীরা যখন এই ধরণের ত্রুটির সম্মুখীন হবেন, তখন আপনি তা জানতে পারবেন, যাতে আপনি সেগুলি ঠিক করতে পারেন।
এই পোস্টে এই API কী করতে পারে এবং কীভাবে এটি ব্যবহার করতে হয় তা আলোচনা করা হয়েছে। আসুন আরও বিস্তারিত জানা যাক!
সংক্ষিপ্ত বিবরণ

ধরে নেওয়া যাক আপনার সাইট, site.example , এর একটি Content-Security-Policy এবং একটি Document-Policy আছে। এগুলোর কাজ কী তা আপনি জানেন না? ঠিক আছে, আপনি এখনও এই উদাহরণটি বুঝতে পারবেন।
এই নীতিগুলি কখন লঙ্ঘিত হচ্ছে তা জানার জন্য আপনি আপনার সাইটটি পর্যবেক্ষণ করার সিদ্ধান্ত নেন, এবং আপনার কোডবেস ব্যবহার করা হতে পারে এমন অবচিত বা শীঘ্রই অবচিত হতে যাওয়া API গুলির উপর নজর রাখতে চান বলেও।
এটি করার জন্য, আপনি একটি Reporting-Endpoints হেডার কনফিগার করুন এবং প্রয়োজনে আপনার নীতিতে report-to নির্দেশিকা ব্যবহার করে এই এন্ডপয়েন্টের নামগুলি ম্যাপ করুন।
Reporting-Endpoints: main-endpoint="https://reports.example/main", default="https://reports.example/default"
# Content-Security-Policy violations and Document-Policy violations
# will be sent to main-endpoint
Content-Security-Policy: script-src 'self'; object-src 'none'; report-to main-endpoint;
Document-Policy: document-write=?0; report-to=main-endpoint;
# Deprecation reports don't need an explicit endpoint because
# these reports are always sent to the `default` endpoint
অপ্রত্যাশিত কিছু ঘটে, এবং আপনার কিছু ব্যবহারকারীর ক্ষেত্রে এই নীতিগুলি লঙ্ঘিত হয়।
উদাহরণ লঙ্ঘন
index.html
<script src="script.js"></script>
<!-- CSP VIOLATION: Try to load a script that's forbidden as per the Content-Security-Policy -->
<script src="https://example.com/script.js"></script>
script.js , index.html দ্বারা লোড করা হয়েছে
// DOCUMENT-POLICY VIOLATION: Attempt to use document.write despite the document policy
try {
document.write('<h1>hi</h1>');
} catch (e) {
console.log(e);
}
// DEPRECATION: Call a deprecated API
const webkitStorageInfo = window.webkitStorageInfo;
ব্রাউজারটি একটি CSP লঙ্ঘন প্রতিবেদন, একটি ডকুমেন্ট-নীতি লঙ্ঘন প্রতিবেদন এবং একটি অবচয় প্রতিবেদন তৈরি করে যা এই সমস্যাগুলি ক্যাপচার করে।
অল্প সময়ের জন্য বিলম্বের সাথে—এক মিনিট পর্যন্ত—ব্রাউজারটি তারপর রিপোর্টগুলিকে এই লঙ্ঘনের ধরণের জন্য কনফিগার করা এন্ডপয়েন্টে পাঠায়। রিপোর্টগুলি ব্রাউজার নিজেই (আপনার সার্ভার বা আপনার সাইট দ্বারা নয়) ব্যান্ডের বাইরে পাঠানো হয়।
শেষবিন্দু(গুলি) এই প্রতিবেদনগুলি গ্রহণ করে।
আপনি এখন এই এন্ডপয়েন্টগুলির প্রতিবেদনগুলি অ্যাক্সেস করতে পারবেন এবং কী ভুল হয়েছে তা পর্যবেক্ষণ করতে পারবেন। আপনার ব্যবহারকারীদের প্রভাবিত করছে এমন সমস্যার সমাধান শুরু করার জন্য আপনি প্রস্তুত।
উদাহরণ প্রতিবেদন
{
"age": 2,
"body": {
"blockedURL": "https://site2.example/script.js",
"disposition": "enforce",
"documentURL": "https://site.example",
"effectiveDirective": "script-src-elem",
"originalPolicy": "script-src 'self'; object-src 'none'; report-to main-endpoint;",
"referrer": "https://site.example",
"sample": "",
"statusCode": 200
},
"type": "csp-violation",
"url": "https://site.example",
"user_agent": "Mozilla/5.0... Chrome/92.0.4504.0"
}
ব্যবহারের কেস এবং রিপোর্টের ধরণ
আপনার সাইট জুড়ে ঘটে যাওয়া বিভিন্ন ধরণের আকর্ষণীয় সতর্কতা বা সমস্যাগুলি পর্যবেক্ষণ করতে আপনাকে সাহায্য করার জন্য রিপোর্টিং API কনফিগার করা যেতে পারে:
| রিপোর্টের ধরণ | এমন একটি পরিস্থিতির উদাহরণ যেখানে একটি প্রতিবেদন তৈরি করা হবে |
|---|---|
| CSP লঙ্ঘন (শুধুমাত্র স্তর 3) | আপনি আপনার একটি পৃষ্ঠায় একটি Content-Security-Policy (CSP) সেট করেছেন, কিন্তু পৃষ্ঠাটি এমন একটি স্ক্রিপ্ট লোড করার চেষ্টা করছে যা আপনার CSP দ্বারা অনুমোদিত নয়। |
| COOP লঙ্ঘন | আপনি একটি পৃষ্ঠায় একটি Cross-Origin-Opener-Policy সেট করেছেন, কিন্তু একটি ক্রস-অরিজিন উইন্ডো ডকুমেন্টের সাথে সরাসরি ইন্টারঅ্যাক্ট করার চেষ্টা করছে। |
| COEP লঙ্ঘন | আপনি একটি পৃষ্ঠায় একটি Cross-Origin-Embedder-Policy সেট করেছেন, কিন্তু ডকুমেন্টটিতে একটি ক্রস-অরিজিন আইফ্রেম রয়েছে যা ক্রস-অরিজিন ডকুমেন্ট দ্বারা লোড করা বেছে নেওয়া হয়নি। |
| ডকুমেন্ট নীতি লঙ্ঘন | পৃষ্ঠাটিতে একটি ডকুমেন্ট নীতি রয়েছে যা document.write ব্যবহার নিষিদ্ধ করে, কিন্তু একটি স্ক্রিপ্ট document.write কল করার চেষ্টা করে। |
| অনুমতি নীতি লঙ্ঘন | পৃষ্ঠাটিতে একটি অনুমতি নীতি রয়েছে যা মাইক্রোফোন ব্যবহার রোধ করে এবং একটি স্ক্রিপ্ট রয়েছে যা অডিও ইনপুট অনুরোধ করে। |
| বন্ধ করার সতর্কতা | এই পৃষ্ঠাটি এমন একটি API ব্যবহার করছে যা বন্ধ করা হয়েছে অথবা বন্ধ করা হবে; এটি সরাসরি কল করে অথবা একটি শীর্ষ-স্তরের তৃতীয়-পক্ষের স্ক্রিপ্ট ব্যবহার করে। |
| হস্তক্ষেপ | এই পৃষ্ঠাটি এমন কিছু করার চেষ্টা করছে যা ব্রাউজার নিরাপত্তা, কর্মক্ষমতা বা ব্যবহারকারীর অভিজ্ঞতার কারণে মেনে না নেওয়ার সিদ্ধান্ত নেয়। Chrome-এ উদাহরণ: পৃষ্ঠাটি ধীর নেটওয়ার্কে document.write ব্যবহার করে অথবা একটি ক্রস-অরিজিন ফ্রেমে navigator.vibrate কল করে যার সাথে ব্যবহারকারী এখনও ইন্টারঅ্যাক্ট করেননি। |
| ক্র্যাশ | আপনার সাইট খোলা থাকাকালীন ব্রাউজারটি ক্র্যাশ করে। |
প্রতিবেদন
রিপোর্টগুলো কেমন দেখাচ্ছে?
ব্রাউজারটি আপনার কনফিগার করা এন্ডপয়েন্টে রিপোর্ট পাঠায়। এটি এমন অনুরোধ পাঠায় যা দেখতে নিচের মতো:
POST
Content-Type: application/reports+json
এই অনুরোধগুলির পেলোড হল রিপোর্টের একটি তালিকা।
প্রতিবেদনের উদাহরণ তালিকা
[
{
"age": 420,
"body": {
"columnNumber": 12,
"disposition": "enforce",
"lineNumber": 11,
"message": "Document policy violation: document-write is not allowed in this document.",
"policyId": "document-write",
"sourceFile": "https://site.example/script.js"
},
"type": "document-policy-violation",
"url": "https://site.example/",
"user_agent": "Mozilla/5.0... Chrome/92.0.4504.0"
},
{
"age": 510,
"body": {
"blockedURL": "https://site.example/img.jpg",
"destination": "image",
"disposition": "enforce",
"type": "corp"
},
"type": "coep",
"url": "https://dummy.example/",
"user_agent": "Mozilla/5.0... Chrome/92.0.4504.0"
}
]
এই প্রতিটি প্রতিবেদনে আপনি যে তথ্যগুলি পেতে পারেন তা এখানে:
| মাঠ | বিবরণ |
|---|---|
age | রিপোর্টের টাইমস্ট্যাম্প এবং বর্তমান সময়ের মধ্যে মিলিসেকেন্ডের সংখ্যা। |
body | প্রকৃত রিপোর্ট ডেটা, একটি JSON স্ট্রিংয়ে সিরিয়ালাইজ করা হয়। রিপোর্টের body থাকা ক্ষেত্রগুলি রিপোর্টের type দ্বারা নির্ধারিত হয়। ⚠️ বিভিন্ন ধরণের রিপোর্টের বিভিন্ন বডি থাকে । |
type | একটি রিপোর্টের ধরণ, উদাহরণস্বরূপ csp-violation বা coep । |
url | যে ডকুমেন্ট বা কর্মী থেকে রিপোর্টটি তৈরি করা হয়েছে তার ঠিকানা। এই URL থেকে ব্যবহারকারীর নাম, পাসওয়ার্ড এবং টুকরোর মতো সংবেদনশীল ডেটা বাদ দেওয়া হয়েছে। |
user_agent | যে অনুরোধ থেকে রিপোর্টটি তৈরি করা হয়েছে তার User-Agent শিরোনাম। |
প্রমাণপত্রাদি
যে পৃষ্ঠার প্রতিবেদন তৈরি করে তার সাথে একই উৎসের প্রতিবেদনের শেষ বিন্দুগুলি প্রতিবেদন ধারণকারী অনুরোধগুলিতে শংসাপত্র (কুকি) গ্রহণ করে।
শংসাপত্রগুলি প্রতিবেদন সম্পর্কে দরকারী অতিরিক্ত প্রসঙ্গ দিতে পারে; উদাহরণস্বরূপ, কোনও নির্দিষ্ট ব্যবহারকারীর অ্যাকাউন্ট ধারাবাহিকভাবে ত্রুটি ট্রিগার করছে কিনা, অথবা অন্যান্য পৃষ্ঠাগুলিতে নেওয়া পদক্ষেপের একটি নির্দিষ্ট ক্রম এই পৃষ্ঠায় একটি প্রতিবেদন ট্রিগার করছে কিনা।
ব্রাউজার কখন এবং কীভাবে রিপোর্ট পাঠায়?
আপনার সাইট থেকে রিপোর্টগুলি ব্যান্ডের বাইরে ডেলিভারি করা হয় : ব্রাউজার কখন কনফিগার করা এন্ডপয়েন্ট(গুলি) এ পাঠানো হয় তা নিয়ন্ত্রণ করে। ব্রাউজার কখন রিপোর্ট পাঠায় তা নিয়ন্ত্রণ করার কোনও উপায় নেই; এটি ক্যাপচার করে, সারিবদ্ধ করে এবং উপযুক্ত সময়ে স্বয়ংক্রিয়ভাবে পাঠায়।
এর মানে হল যে রিপোর্টিং এপিআই ব্যবহার করার সময় পারফরম্যান্সের কোনও উদ্বেগ নেই।
প্রতিবেদনগুলি এক মিনিট পর্যন্ত বিলম্বে পাঠানো হয় যাতে ব্যাচে রিপোর্ট পাঠানোর সম্ভাবনা বৃদ্ধি পায়। এটি ব্যবহারকারীর নেটওয়ার্ক সংযোগের প্রতি শ্রদ্ধাশীল হতে ব্যান্ডউইথ সাশ্রয় করে, যা মোবাইলের ক্ষেত্রে বিশেষভাবে গুরুত্বপূর্ণ। ব্রাউজারটি যদি উচ্চতর অগ্রাধিকারের কাজ প্রক্রিয়াকরণে ব্যস্ত থাকে, অথবা ব্যবহারকারী যদি সেই সময়ে ধীর বা ব্যস্ত নেটওয়ার্কে থাকে তবে বিতরণ বিলম্বিত করতে পারে।
তৃতীয় পক্ষ এবং প্রথম পক্ষের সমস্যা
আপনার পৃষ্ঠায় লঙ্ঘন বা অবচয় হ্রাসের কারণে তৈরি হওয়া প্রতিবেদনগুলি আপনার কনফিগার করা শেষ বিন্দুতে পাঠানো হবে। এর মধ্যে আপনার পৃষ্ঠায় চলমান তৃতীয় পক্ষের স্ক্রিপ্টগুলির দ্বারা সংঘটিত লঙ্ঘন অন্তর্ভুক্ত।
আপনার পৃষ্ঠায় এমবেড করা ক্রস-অরিজিন আইফ্রেমে লঙ্ঘন বা অবচয় আপনার এন্ডপয়েন্ট(গুলি) তে রিপোর্ট করা হবে না (অন্তত ডিফল্টভাবে নয়)। একটি আইফ্রেম নিজস্ব রিপোর্টিং সেট আপ করতে পারে এবং এমনকি আপনার সাইটের—অর্থাৎ, প্রথম পক্ষের—রিপোর্টিং পরিষেবাতেও রিপোর্ট করতে পারে; তবে এটি ফ্রেম করা সাইটের উপর নির্ভর করে। এছাড়াও মনে রাখবেন যে বেশিরভাগ রিপোর্ট শুধুমাত্র তখনই তৈরি হয় যখন কোনও পৃষ্ঠার নীতি লঙ্ঘন করা হয় এবং আপনার পৃষ্ঠার নীতি এবং আইফ্রেমের নীতি আলাদা।
অবচয় সহ উদাহরণ

ব্রাউজার সাপোর্ট
নিম্নলিখিত টেবিলে Reporting API v1 এর জন্য ব্রাউজার সাপোর্টের সারসংক্ষেপ দেওয়া হয়েছে, অর্থাৎ Reporting-Endpoints হেডারের সাথে। Reporting API v0 ( Report-To header) এর জন্য ব্রাউজার সাপোর্ট একই রকম, শুধুমাত্র একটি রিপোর্ট টাইপ বাদে: নতুন Reporting API তে Network Error Logging সমর্থিত নয়। বিস্তারিত জানার জন্য মাইগ্রেশন গাইডটি পড়ুন।
| রিপোর্টের ধরণ | ক্রোম | ক্রোম আইওএস | সাফারি | ফায়ারফক্স | প্রান্ত |
|---|---|---|---|---|---|
| CSP লঙ্ঘন (শুধুমাত্র লেভেল ৩)* | ✔ হ্যাঁ | ✔ হ্যাঁ | ✔ হ্যাঁ | ✘ না | ✔ হ্যাঁ |
| নেটওয়ার্ক ত্রুটি লগিং | ✘ না | ✘ না | ✘ না | ✘ না | ✘ না |
| COOP/COEP লঙ্ঘন | ✔ হ্যাঁ | ✘ না | ✔ হ্যাঁ | ✘ না | ✔ হ্যাঁ |
| অন্যান্য সকল প্রকার: ডকুমেন্ট নীতি লঙ্ঘন, অবচয়, হস্তক্ষেপ, ক্র্যাশ | ✔ হ্যাঁ | ✘ না | ✘ না | ✘ না | ✔ হ্যাঁ |
এই টেবিলটি শুধুমাত্র নতুন Reporting-Endpoints হেডারের সাহায্যে report-to জন্য সমর্থনের সারসংক্ষেপ তুলে ধরে। আপনি যদি Reporting-Endpoints এ মাইগ্রেট করতে চান তবে CSP রিপোর্টিং মাইগ্রেশন টিপস পড়ুন।
রিপোর্টিং API ব্যবহার করা হচ্ছে
রিপোর্ট কোথায় পাঠানো উচিত তা নির্ধারণ করুন
তোমার কাছে দুটি বিকল্প আছে:
- বিদ্যমান রিপোর্ট সংগ্রাহক পরিষেবাতে রিপোর্ট পাঠান।
- আপনার নিজের তৈরি এবং পরিচালনা করা একজন রিপোর্টিং সংগ্রাহকের কাছে রিপোর্ট পাঠান।
বিকল্প ১: একটি বিদ্যমান রিপোর্ট সংগ্রাহক পরিষেবা ব্যবহার করুন
রিপোর্ট সংগ্রাহক পরিষেবার কিছু উদাহরণ হল:
যদি আপনার অন্য সমাধানের কথা জানা থাকে, তাহলে আমাদের জানাতে একটি সমস্যা খুলুন , এবং আমরা এই পোস্টটি আপডেট করব!
মূল্য নির্ধারণের পাশাপাশি, রিপোর্ট সংগ্রাহক নির্বাচন করার সময় নিম্নলিখিত বিষয়গুলি বিবেচনা করুন: 🧐
- এই সংগ্রাহক কি সকল ধরণের রিপোর্ট সমর্থন করে? উদাহরণস্বরূপ, সকল রিপোর্টিং এন্ডপয়েন্ট সমাধান COOP/COEP রিপোর্ট সমর্থন করে না।
- আপনার অ্যাপ্লিকেশনের URL গুলি কি তৃতীয় পক্ষের রিপোর্ট সংগ্রাহকের সাথে শেয়ার করতে স্বাচ্ছন্দ্য বোধ করেন? এমনকি যদি ব্রাউজার এই URL গুলি থেকে সংবেদনশীল তথ্য সরিয়ে নেয়, তবুও সংবেদনশীল তথ্য এইভাবে ফাঁস হতে পারে । যদি এটি আপনার অ্যাপ্লিকেশনের জন্য খুব ঝুঁকিপূর্ণ মনে হয়, তাহলে আপনার নিজস্ব রিপোর্টিং এন্ডপয়েন্ট পরিচালনা করুন।
বিকল্প ২: আপনার নিজস্ব রিপোর্ট সংগ্রাহক তৈরি এবং পরিচালনা করুন
রিপোর্ট গ্রহণ করে এমন নিজস্ব সার্ভার তৈরি করা খুব একটা সহজ কাজ নয়। শুরু করার জন্য, আপনি আমাদের হালকা বয়লারপ্লেটটি ব্যবহার করতে পারেন। এটি এক্সপ্রেস দিয়ে তৈরি এবং রিপোর্ট গ্রহণ এবং প্রদর্শন করতে পারে।
যখন আপনি নিজের রিপোর্ট সংগ্রাহক তৈরি করেন:
- আপনার এন্ডপয়েন্টে ব্রাউজার কর্তৃক প্রেরিত রিপোর্ট অনুরোধগুলি সনাক্ত করতে
Content-Typeofapplication/reports+jsonব্যবহার করেPOSTঅনুরোধগুলি পরীক্ষা করুন। - যদি আপনার এন্ডপয়েন্ট আপনার সাইটের থেকে ভিন্ন কোন অরিজিনে থাকে, তাহলে নিশ্চিত করুন যে এটি CORS প্রিফ্লাইট অনুরোধ সমর্থন করে।
বিকল্প ৩: বিকল্প ১ এবং ২ একত্রিত করুন
আপনি হয়তো নির্দিষ্ট কোনও প্রদানকারীকে কিছু ধরণের প্রতিবেদনের দায়িত্ব দিতে চাইতে পারেন, কিন্তু অন্যদের জন্য অভ্যন্তরীণ সমাধান থাকতে পারে।
এই ক্ষেত্রে, নিম্নলিখিতভাবে একাধিক এন্ডপয়েন্ট সেট করুন:
Reporting-Endpoints: endpoint-1="https://reports-collector.example", endpoint-2="https://my-custom-endpoint.example"
Reporting-Endpoints হেডার কনফিগার করুন
একটি Reporting-Endpoints রেসপন্স হেডার সেট করুন। এর মান অবশ্যই এক বা কমা দ্বারা পৃথক করা কী-মান জোড়ার একটি সিরিজ হতে হবে:
Reporting-Endpoints: main-endpoint="https://reports.example/main", default="https://reports.example/default"
যদি আপনি লিগ্যাসি রিপোর্টিং API থেকে নতুন রিপোর্টিং API-তে মাইগ্রেট করেন, তাহলে Reporting-Endpoints এবং Report-To উভয় সেট করা যুক্তিসঙ্গত হতে পারে। মাইগ্রেশন গাইডে বিস্তারিত দেখুন। বিশেষ করে, যদি আপনি শুধুমাত্র report-uri নির্দেশিকা ব্যবহার করে Content-Security-Policy লঙ্ঘনের জন্য রিপোর্টিং ব্যবহার করেন, তাহলে CSP রিপোর্টিংয়ের জন্য মাইগ্রেশন ধাপগুলি পরীক্ষা করুন।
Reporting-Endpoints: main-endpoint="https://reports.example/main", default="https://reports.example/default"
Report-To: ...
কী (শেষবিন্দুর নাম)
প্রতিটি কী আপনার পছন্দের নাম হতে পারে, যেমন main-endpoint অথবা endpoint-1 । আপনি বিভিন্ন ধরণের রিপোর্টের জন্য বিভিন্ন নামযুক্ত এন্ডপয়েন্ট সেট করার সিদ্ধান্ত নিতে পারেন—যেমন, my-coop-endpoint , my-csp-endpoint । এর সাহায্যে, আপনি রিপোর্টগুলিকে তাদের ধরণের উপর নির্ভর করে বিভিন্ন এন্ডপয়েন্টে রুট করতে পারেন।
যদি আপনি হস্তক্ষেপ , অবচয় , ক্র্যাশ রিপোর্ট বা এগুলির সংমিশ্রণ পেতে চান, তাহলে default নামে একটি এন্ডপয়েন্ট সেট করুন।
যদি Reporting-Endpoints হেডার কোনও default এন্ডপয়েন্ট সংজ্ঞায়িত না করে, তাহলে এই ধরণের রিপোর্ট পাঠানো হবে না (যদিও সেগুলি তৈরি করা হবে)।
মান (URL)
প্রতিটি মান আপনার পছন্দের একটি URL, যেখানে প্রতিবেদনগুলি পাঠানো হবে। এখানে কোন URL সেট করবেন তা ধাপ ১-এ আপনি কী সিদ্ধান্ত নিয়েছেন তার উপর নির্ভর করে।
একটি এন্ডপয়েন্ট URL:
- স্ল্যাশ (
/) দিয়ে শুরু করতে হবে। আপেক্ষিক পাথ সমর্থিত নয় । - ক্রস-অরিজিন হতে পারে; কিন্তু সেই ক্ষেত্রে রিপোর্টের সাথে শংসাপত্র পাঠানো হয় না ।
উদাহরণ
Reporting-Endpoints: my-coop-endpoint="https://reports.example/coop", my-csp-endpoint="https://reports.example/csp", default="https://reports.example/default"
এরপর আপনি যথাযথ নীতিতে প্রতিটি নামযুক্ত এন্ডপয়েন্ট ব্যবহার করতে পারেন, অথবা সমস্ত নীতিতে একটি একক এন্ডপয়েন্ট ব্যবহার করতে পারেন।
হেডার কোথায় সেট করবেন?
নতুন রিপোর্টিং API-তে—যা এই পোস্টে আলোচনা করা হয়েছে— রিপোর্টগুলি documents- এর মধ্যে সীমাবদ্ধ। এর অর্থ হল একটি নির্দিষ্ট উৎসের জন্য, বিভিন্ন ডকুমেন্ট, যেমন site.example/page1 এবং site.example/page2 , বিভিন্ন এন্ডপয়েন্টে রিপোর্ট পাঠাতে পারে।
আপনার সাইটের যেকোনো পৃষ্ঠায় লঙ্ঘন বা অবচয় রোধের প্রতিবেদন পেতে, সমস্ত প্রতিক্রিয়ার জন্য হেডারটিকে মিডলওয়্যার হিসেবে সেট করুন।
এক্সপ্রেসের একটি উদাহরণ এখানে দেওয়া হল:
const REPORTING_ENDPOINT_BASE = 'https://report.example';
const REPORTING_ENDPOINT_MAIN = `${REPORTING_ENDPOINT_BASE}/main`;
const REPORTING_ENDPOINT_DEFAULT = `${REPORTING_ENDPOINT_BASE}/default`;
app.use(function (request, response, next) {
// Set up the Reporting API
response.set(
'Reporting-Endpoints',
`main-endpoint="${REPORTING_ENDPOINT_MAIN}", default="${REPORTING_ENDPOINT_DEFAULT}"`,
);
next();
});
আপনার নীতিগুলি সম্পাদনা করুন
এখন যেহেতু Reporting-Endpoints হেডারটি কনফিগার করা হয়েছে, প্রতিটি পলিসি হেডারে একটি report-to নির্দেশিকা যোগ করুন যার জন্য আপনি লঙ্ঘনের রিপোর্ট পেতে চান। report-to এর মান আপনার কনফিগার করা নামযুক্ত এন্ডপয়েন্টগুলির মধ্যে একটি হওয়া উচিত।
আপনি একাধিক পলিসির জন্য একাধিক এন্ডপয়েন্ট ব্যবহার করতে পারেন, অথবা পলিসি জুড়ে বিভিন্ন এন্ডপয়েন্ট ব্যবহার করতে পারেন।

অবচয় , হস্তক্ষেপ এবং ক্র্যাশ রিপোর্টের জন্য report-to প্রয়োজন হয় না। এই রিপোর্টগুলি কোনও নীতির সাথে আবদ্ধ নয়। যতক্ষণ পর্যন্ত একটি default এন্ডপয়েন্ট সেট আপ করা থাকে এবং এই default এন্ডপয়েন্টে পাঠানো হয় ততক্ষণ পর্যন্ত এগুলি তৈরি হয়।
উদাহরণ
# Content-Security-Policy violations and Document-Policy violations
# will be sent to main-endpoint
Content-Security-Policy: script-src 'self'; object-src 'none'; report-to main-endpoint;
Document-Policy: document-write=?0;report-to=main-endpoint;
# Deprecation reports don't need an explicit endpoint because
# these reports are always sent to the default endpoint
আপনার রিপোর্টিং সেটআপ ডিবাগ করুন
ইচ্ছাকৃতভাবে প্রতিবেদন তৈরি করা
রিপোর্টিং API সেট আপ করার সময়, রিপোর্ট তৈরি হচ্ছে কিনা এবং প্রত্যাশা অনুযায়ী পাঠানো হচ্ছে কিনা তা পরীক্ষা করার জন্য আপনাকে সম্ভবত ইচ্ছাকৃতভাবে আপনার নীতি লঙ্ঘন করতে হবে।
সময় বাঁচান
রিপোর্টগুলি বিলম্বের সাথে পাঠানো হতে পারে - প্রায় এক মিনিট, যা ডিবাগ করার সময় অনেক সময় নেয়। 😴 ভাগ্যক্রমে, Chrome এ ডিবাগ করার সময়, আপনি --short-reporting-delay পতাকা ব্যবহার করে রিপোর্টগুলি তৈরি হওয়ার সাথে সাথেই তা পেতে পারেন।
এই পতাকাটি চালু করতে আপনার টার্মিনালে এই কমান্ডটি চালান:
YOUR_PATH/TO/EXECUTABLE/Chrome --short-reporting-delay
DevTools ব্যবহার করুন
Chrome-এ, DevTools ব্যবহার করে পাঠানো হয়েছে বা পাঠানো হবে এমন রিপোর্টগুলি দেখুন।
২০২১ সালের অক্টোবর থেকে, এই বৈশিষ্ট্যটি পরীক্ষামূলক। এটি ব্যবহার করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
- Chrome ভার্সন 96 এবং তার পরবর্তী ভার্সন ব্যবহার করুন (আপনার ব্রাউজারে
chrome://versionলিখে চেক করুন) - Chrome এর ঠিকানা বারে
chrome://flags/#enable-experimental-web-platform-featuresটাইপ করুন বা পেস্ট করুন। - সক্রিয় করা হয়েছে ক্লিক করুন।
- আপনার ব্রাউজারটি পুনরায় চালু করুন।
- Chrome DevTools খুলুন।
- Chrome DevTools-এ, সেটিংস খুলুন। Experiments-এর অধীনে, Application প্যানেলে Enable Reporting API প্যানেলে ক্লিক করুন।
- DevTools পুনরায় লোড করুন।
- আপনার পৃষ্ঠাটি পুনরায় লোড করুন। DevTools খোলা থাকা পৃষ্ঠাটি দ্বারা তৈরি প্রতিবেদনগুলি Chrome DevTools এর অ্যাপ্লিকেশন প্যানেলে, Reporting API এর অধীনে তালিকাভুক্ত করা হবে।

রিপোর্ট স্ট্যাটাস
স্ট্যাটাস কলাম আপনাকে জানাবে যে কোনও রিপোর্ট সফলভাবে পাঠানো হয়েছে কিনা।
| অবস্থা | বিবরণ |
|---|---|
Success | ব্রাউজারটি রিপোর্টটি পাঠিয়েছে এবং এন্ডপয়েন্টটি একটি সাফল্য কোড ( 200 অথবা অন্য কোনও সাফল্য প্রতিক্রিয়া কোড 2xx ) দিয়ে উত্তর দিয়েছে। |
Pending | ব্রাউজারটি রিপোর্টটি পাঠানোর চেষ্টা করছে। |
Queued | রিপোর্টটি তৈরি করা হয়েছে এবং ব্রাউজারটি এটি পাঠানোর চেষ্টা করছে না। এই দুটি ক্ষেত্রে একটিতে একটি রিপোর্ট Queued হিসাবে প্রদর্শিত হয়:
|
MarkedForRemoval | কিছুক্ষণ পুনরায় চেষ্টা করার পর ( Queued ), ব্রাউজারটি রিপোর্ট পাঠানোর চেষ্টা বন্ধ করে দিয়েছে এবং শীঘ্রই এটি পাঠানোর জন্য রিপোর্টের তালিকা থেকে সরিয়ে দেবে। |
রিপোর্টগুলি সফলভাবে পাঠানো হোক বা না হোক, কিছুক্ষণ পরে মুছে ফেলা হয়।
সমস্যা সমাধান
রিপোর্টগুলি কি তৈরি হচ্ছে না অথবা আপনার শেষ বিন্দুতে প্রত্যাশা অনুযায়ী পাঠানো হচ্ছে না? এটি সমাধানের জন্য এখানে কিছু টিপস দেওয়া হল।
প্রতিবেদন তৈরি করা হয় না
DevTools-এ প্রদর্শিত রিপোর্টগুলি সঠিকভাবে তৈরি করা হয়েছে। যদি আপনার প্রত্যাশিত রিপোর্টটি এই তালিকায় না দেখায়:
- আপনার নীতিমালায়
report-toচেক করুন। যদি এটি ভুলভাবে কনফিগার করা থাকে, তাহলে একটি প্রতিবেদন তৈরি হবে না। এটি ঠিক করতে আপনার নীতিমালা সম্পাদনা করুন বিভাগে যান। এটির সমস্যা সমাধানের একটি অতিরিক্ত উপায় হল Chrome-এ DevTools কনসোল পরীক্ষা করা: যদি আপনার প্রত্যাশিত লঙ্ঘনের জন্য কনসোলে একটি ত্রুটি পপ আপ হয়, তাহলে এর অর্থ হল আপনার নীতি সম্ভবত সঠিকভাবে কনফিগার করা হয়েছে। - মনে রাখবেন যে DevTools খোলা ডকুমেন্টের জন্য তৈরি করা রিপোর্টগুলিই এই তালিকায় প্রদর্শিত হবে। একটি উদাহরণ: যদি আপনার সাইট
site1.exampleএকটি iframesite2.exampleএম্বেড করে যা একটি নীতি লঙ্ঘন করে এবং তাই একটি রিপোর্ট তৈরি করে, তাহলে এই রিপোর্টটি DevTools এ তখনই প্রদর্শিত হবে যখন আপনি iframeটিকে তার নিজস্ব উইন্ডোতে খুলবেন এবং সেই উইন্ডোর জন্য DevTools খুলবেন।
প্রতিবেদন তৈরি করা হয় কিন্তু পাঠানো হয় না বা গ্রহণ করা হয় না
যদি আপনি DevTools-এ একটি রিপোর্ট দেখতে পান, কিন্তু আপনার এন্ডপয়েন্টটি তা না পায়?
- সংক্ষিপ্ত বিলম্ব ব্যবহার করতে ভুলবেন না। হয়তো আপনি রিপোর্ট দেখতে না পাওয়ার কারণ হল এটি এখনও পাঠানো হয়নি!
আপনার
Reporting-Endpointsহেডার কনফিগারেশনটি পরীক্ষা করুন। যদি এতে কোনও সমস্যা থাকে, তাহলে সঠিকভাবে তৈরি করা রিপোর্ট পাঠানো হবে না। DevTools-এ, রিপোর্টের অবস্থাQueuedথাকবে (এটিPendingএ যেতে পারে, এবং তারপর ডেলিভারির চেষ্টা করা হলে দ্রুতQueuedএ ফিরে যেতে পারে)। কিছু সাধারণ ভুল যা এর কারণ হতে পারে:এন্ডপয়েন্টটি ব্যবহার করা হয়েছে কিন্তু কনফিগার করা হয়নি। উদাহরণ:
Document-Policy: document-write=?0;report-to=endpoint-1; Reporting-Endpoints: default="https://reports.example/default"
ডকুমেন্ট-পলিসি লঙ্ঘনের রিপোর্টগুলি endpoint-1 এ পাঠানো উচিত, কিন্তু এই endpoint নামটি Reporting-Endpoints এ কনফিগার করা নেই।
defaultএন্ডপয়েন্টটি অনুপস্থিত। কিছু ধরণের রিপোর্ট, যেমন অবচয় এবং হস্তক্ষেপ প্রতিবেদন, শুধুমাত্রdefaultনামক এন্ডপয়েন্টে পাঠানো হবে। রিপোর্টিং-এন্ডপয়েন্টস হেডার কনফিগার করুন -এ আরও পড়ুন।আপনার পলিসি হেডার সিনট্যাক্সে সমস্যাগুলি দেখুন, যেমন উদ্ধৃতি চিহ্ন বাদ দেওয়া। বিস্তারিত দেখুন ।
আপনার এন্ডপয়েন্ট আগত অনুরোধগুলি পরিচালনা করতে পারে কিনা তা পরীক্ষা করুন।
নিশ্চিত করুন যে আপনার এন্ডপয়েন্ট CORS প্রিফ্লাইট অনুরোধগুলিকে সমর্থন করে। যদি এটি না করে, তবে এটি রিপোর্ট গ্রহণ করতে পারবে না।
আপনার এন্ডপয়েন্টের আচরণ পরীক্ষা করুন। এটি করার জন্য, ম্যানুয়ালি রিপোর্ট তৈরি করার পরিবর্তে, আপনি আপনার এন্ডপয়েন্টে অনুরোধগুলি পাঠিয়ে ব্রাউজারটিকে অনুকরণ করতে পারেন যা ব্রাউজার যা পাঠাবে তার মতো দেখতে । নিম্নলিখিতটি চালান:
curl --header "Content-Type: application/reports+json" \ --request POST \ --data '[{"age":420,"body":{"columnNumber":12,"disposition":"enforce","lineNumber":11,"message":"Document policy violation: document-write is not allowed in this document.","policyId":"document-write","sourceFile":"https://dummy.example/script.js"},"type":"document-policy-violation","url":"https://dummy.example/","user_agent":"xxx"},{"age":510,"body":{"blockedURL":"https://dummy.example/img.jpg","destination":"image","disposition":"enforce","type":"corp"},"type":"coep","url":"https://dummy.example/","user_agent":"xxx"}]' \ YOUR_ENDPOINTআপনার এন্ডপয়েন্টটি একটি সাকসেস কোড (
200অথবা অন্য কোন সাকসেস রেসপন্স কোড2xx) দিয়ে সাড়া দেবে। যদি তা না হয়, তাহলে এর কনফিগারেশনে সমস্যা আছে।
সম্পর্কিত রিপোর্টিং প্রক্রিয়া
শুধুমাত্র রিপোর্ট করুন
-Report-Only পলিসি হেডার এবং Reporting-Endpoints একসাথে কাজ করে।
Reporting-Endpoints এ কনফিগার করা এবং Content-Security-Policy , Cross-Origin-Embedder-Policy এবং Cross-Origin-Opener-Policy এর report-to ক্ষেত্রে নির্দিষ্ট করা এন্ডপয়েন্টগুলি, এই নীতিগুলি লঙ্ঘন করা হলে রিপোর্ট পাবে।
Reporting-Endpoints এ কনফিগার করা এন্ডপয়েন্টগুলি Content-Security-Policy-Report-Only , Cross-Origin-Embedder-Policy-Report-Only এবং Cross-Origin-Opener-Policy-Report-Only এর report-to ক্ষেত্রেও নির্দিষ্ট করা যেতে পারে। এই নীতিগুলি লঙ্ঘন করা হলে তারা প্রতিবেদনও পাবে।
উভয় ক্ষেত্রেই প্রতিবেদন পাঠানো হলেও, -Report-Only হেডারগুলি নীতিগুলি প্রয়োগ করে না: কিছুই ভাঙবে না বা আসলে ব্লক হবে না, তবে আপনি কী ভাঙা বা ব্লক করা হয়েছে তার প্রতিবেদন পাবেন।
ReportingObserver
ReportingObserver JavaScript API আপনাকে ক্লায়েন্ট-সাইড সতর্কতাগুলি পর্যবেক্ষণ করতে সাহায্য করতে পারে।
ReportingObserver এবং Reporting-Endpoints হেডার এমন রিপোর্ট তৈরি করে যা দেখতে একই রকম, কিন্তু তারা ব্যবহারের ক্ষেত্রে কিছুটা ভিন্নতা সক্ষম করে।
ReportingObserver ব্যবহার করুন যদি:
- আপনি কেবল অবচয় বা ব্রাউজার হস্তক্ষেপ পর্যবেক্ষণ করতে চান।
ReportingObserverক্লায়েন্ট-সাইড সতর্কতা যেমন অবচয় এবং ব্রাউজার হস্তক্ষেপ প্রকাশ করে, কিন্তুReporting-Endpointsবিপরীতে, এটি CSP বা COOP/COEP লঙ্ঘনের মতো অন্য কোনও ধরণের প্রতিবেদন ধারণ করে না। - এই লঙ্ঘনের ক্ষেত্রে আপনাকে রিয়েল-টাইমে প্রতিক্রিয়া জানাতে হবে।
ReportingObserverএকটি লঙ্ঘনের ঘটনার সাথে একটি কলব্যাক সংযুক্ত করা সম্ভব করে তোলে। - আপনি কাস্টম কলব্যাক ব্যবহার করে ডিবাগিংয়ে সহায়তা করার জন্য একটি প্রতিবেদনে অতিরিক্ত তথ্য সংযুক্ত করতে চান।
আরেকটি পার্থক্য হল ReportingObserver শুধুমাত্র ক্লায়েন্ট-সাইড কনফিগার করা হয়েছে: সার্ভার-সাইড হেডারের উপর আপনার কোন নিয়ন্ত্রণ না থাকলেও এবং Reporting-Endpoints সেট করতে না পারলেও আপনি এটি ব্যবহার করতে পারেন।
আরও পড়া
- রিপোর্টিং API v0 থেকে v1 তে মাইগ্রেশন নির্দেশিকা
- রিপোর্টিং অবজারভার
- স্পেসিফিকেশন: লিগ্যাসি রিপোর্টিং API (v0)
- স্পেসিফিকেশন: নতুন রিপোর্টিং API (v1)
হিরো ছবিটি নাইন কোয়েফার / @enka80 দ্বারা আনস্প্ল্যাশে সম্পাদিত। এই নথিতে পর্যালোচনা এবং পরামর্শের জন্য ইয়ান ক্লেল্যান্ড, এইজি কিতামুরা এবং মিলিকা মিহাজলিজাকে অনেক ধন্যবাদ।