রিপোর্টিং API এর মাধ্যমে আপনার ওয়েব অ্যাপ্লিকেশন নিরীক্ষণ করুন

নিরাপত্তা লঙ্ঘন, অবহেলিত API কল এবং আরও অনেক কিছু নিরীক্ষণ করতে রিপোর্টিং API ব্যবহার করুন।

Maud Nalpas

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

এটি আপনাকে ঘোষণা করতে দেয় যে আপনি HTTP হেডারের মাধ্যমে কী নিরীক্ষণ করতে চান এবং ব্রাউজার দ্বারা পরিচালিত হয়৷

রিপোর্টিং API সেট আপ করা আপনাকে মানসিক শান্তি দেয় যে ব্যবহারকারীরা যখন এই ধরনের ত্রুটিগুলি অনুভব করেন, তখন আপনি জানতে পারবেন, যাতে আপনি সেগুলি ঠিক করতে পারেন৷

এই APIটি কী করতে পারে এবং কীভাবে এটি ব্যবহার করতে হয় তা এই পোস্টে কভার করা হয়েছে। এর মধ্যে ডুব দেওয়া যাক!

ডেমো এবং কোড

Chrome 96 এবং নতুন (Chrome বিটা বা ক্যানারি, অক্টোবর 2021 থেকে) থেকে শুরু করে রিপোর্টিং এপিআই দেখুন।

ওভারভিউ

ধরুন আপনার সাইট, site.example , এর একটি বিষয়বস্তু-নিরাপত্তা-নীতি এবং একটি নথি-নীতি রয়েছে৷ জানিনা এগুলো কি করে? ঠিক আছে, আপনি এখনও এই উদাহরণটি বুঝতে সক্ষম হবেন।

এই নীতিগুলি কখন লঙ্ঘন করা হয় তা জানার জন্য আপনি আপনার সাইট নিরীক্ষণ করার সিদ্ধান্ত নেন, কিন্তু এছাড়াও আপনি আপনার কোডবেস ব্যবহার করা হতে পারে অবহেলিত বা শীঘ্রই-থেকে-বঞ্চিত 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"
}

কেস এবং রিপোর্টের ধরন ব্যবহার করুন

রিপোর্টিং এপিআই কনফিগার করা যেতে পারে যাতে আপনি অনেক ধরনের আকর্ষণীয় সতর্কতা বা আপনার সাইটে ঘটতে থাকা সমস্যাগুলি নিরীক্ষণ করতে পারেন:

রিপোর্ট

রিপোর্ট কেমন দেখায়?

ব্রাউজার আপনার কনফিগার করা শেষ পয়েন্টে রিপোর্ট পাঠায়। এটি এমন অনুরোধ পাঠায় যা নিম্নরূপ দেখায়:

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"
  }
]

এই প্রতিটি প্রতিবেদনে আপনি যে ডেটা খুঁজে পেতে পারেন তা এখানে:

শংসাপত্রযুক্ত প্রতিবেদন

রিপোর্টিং এন্ডপয়েন্ট যে পৃষ্ঠাটি রিপোর্ট তৈরি করে সেই পৃষ্ঠার মতোই সেই রিপোর্টগুলি ধারণ করে থাকা অনুরোধগুলিতে শংসাপত্র (কুকি) পায়।

প্রমাণপত্র প্রতিবেদন সম্পর্কে দরকারী অতিরিক্ত প্রসঙ্গ দিতে পারে; উদাহরণস্বরূপ, একটি প্রদত্ত ব্যবহারকারীর অ্যাকাউন্ট ক্রমাগত ত্রুটিগুলিকে ট্রিগার করছে কিনা বা অন্য পৃষ্ঠাগুলিতে গৃহীত পদক্ষেপের একটি নির্দিষ্ট ক্রম এই পৃষ্ঠায় একটি প্রতিবেদন ট্রিগার করছে কিনা।

কখন এবং কিভাবে ব্রাউজার রিপোর্ট পাঠায়?

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

এর মানে হল যে রিপোর্টিং API ব্যবহার করার সময় পারফরম্যান্সের উদ্বেগ নেই।

ব্যাচে রিপোর্ট পাঠানোর সুযোগ বাড়ানোর জন্য - এক মিনিট পর্যন্ত - বিলম্বের সাথে রিপোর্ট পাঠানো হয় । এটি ব্যবহারকারীর নেটওয়ার্ক সংযোগের প্রতি শ্রদ্ধাশীল হতে ব্যান্ডউইথ সংরক্ষণ করে, যা মোবাইলে বিশেষভাবে গুরুত্বপূর্ণ। ব্রাউজারটি ডেলিভারি বিলম্বিত করতে পারে যদি এটি উচ্চ অগ্রাধিকারের কাজ প্রক্রিয়াকরণে ব্যস্ত থাকে, অথবা যদি ব্যবহারকারী সেই সময়ে একটি ধীর এবং/অথবা ভিড়যুক্ত নেটওয়ার্কে থাকে।

তৃতীয় পক্ষ এবং প্রথম পক্ষের সমস্যা

আপনার পৃষ্ঠায় ঘটছে লঙ্ঘন বা অবনমনের কারণে তৈরি হওয়া প্রতিবেদনগুলি আপনার কনফিগার করা শেষ পয়েন্টে পাঠানো হবে। এতে আপনার পৃষ্ঠায় চলমান তৃতীয় পক্ষের স্ক্রিপ্টের লঙ্ঘন অন্তর্ভুক্ত রয়েছে।

আপনার পৃষ্ঠায় এম্বেড করা ক্রস-অরিজিন আইফ্রেমে ঘটে যাওয়া লঙ্ঘন বা অবমূল্যায়নগুলি আপনার এন্ডপয়েন্টে রিপোর্ট করা হবে না (অন্তত ডিফল্টরূপে নয়)। একটি আইফ্রেম তার নিজস্ব রিপোর্টিং সেট আপ করতে পারে এবং এমনকি আপনার সাইটের-অর্থাৎ, প্রথম পক্ষের-প্রতিবেদন পরিষেবাতে রিপোর্ট করতে পারে; কিন্তু এটি ফ্রেমযুক্ত সাইটের উপর নির্ভর করে। এছাড়াও মনে রাখবেন যে বেশিরভাগ রিপোর্ট শুধুমাত্র একটি পৃষ্ঠার নীতি লঙ্ঘন হলেই তৈরি হয় এবং আপনার পৃষ্ঠার নীতি এবং iframe-এর নীতিগুলি আলাদা৷

অবজ্ঞা সহ উদাহরণ

ব্রাউজার সমর্থন

নীচের সারণীটি রিপোর্টিং এপিআই v1 এর জন্য ব্রাউজার সমর্থন যোগ করে, যা Reporting-Endpoints হেডারের সাথে। রিপোর্টিং এপিআই v0 ( Report-To হেডার) এর জন্য ব্রাউজার সমর্থন একই, একটি প্রতিবেদনের ধরন ব্যতীত: নেটওয়ার্ক ত্রুটি লগিং নতুন রিপোর্টিং API-এ সমর্থিত নয়। বিস্তারিত জানার জন্য মাইগ্রেশন গাইড পড়ুন।

এই টেবিলটি শুধুমাত্র নতুন Reporting-Endpoints হেডারের সাথে report-to সমর্থনের সারসংক্ষেপ করে। আপনি যদি Reporting-Endpoints মাইগ্রেট করতে চান তাহলে CSP রিপোর্টিং মাইগ্রেশন টিপস পড়ুন।

রিপোর্টিং API ব্যবহার করে

রিপোর্ট কোথায় পাঠানো হবে তা স্থির করুন

আপনার দুটি বিকল্প আছে:

• একটি বিদ্যমান রিপোর্ট সংগ্রাহক পরিষেবাতে রিপোর্ট পাঠান।
• আপনি নিজেই তৈরি এবং পরিচালনা করেন এমন একজন রিপোর্টিং সংগ্রাহকের কাছে রিপোর্ট পাঠান।

বিকল্প 1: একটি বিদ্যমান প্রতিবেদন সংগ্রহকারী পরিষেবা ব্যবহার করুন

রিপোর্ট সংগ্রহকারী পরিষেবার কিছু উদাহরণ হল:

• রিপোর্ট-উরি
• ইউরিপোর্ট

আপনি যদি অন্য সমাধান জানেন, আমাদের জানাতে একটি সমস্যা খুলুন , এবং আমরা এই পোস্ট আপডেট করব!

মূল্যের পাশাপাশি, রিপোর্ট সংগ্রহকারী নির্বাচন করার সময় নিম্নলিখিত বিষয়গুলি বিবেচনা করুন: 🧐

• এই সংগ্রাহক সব ধরনের রিপোর্ট সমর্থন করে? উদাহরণস্বরূপ, সমস্ত রিপোর্টিং এন্ডপয়েন্ট সমাধান COOP/COEP রিপোর্ট সমর্থন করে না।
• আপনি কি তৃতীয় পক্ষের প্রতিবেদন সংগ্রাহকের সাথে আপনার অ্যাপ্লিকেশনের কোনো URL ভাগ করতে স্বাচ্ছন্দ্যবোধ করেন? ব্রাউজার এই URL গুলি থেকে সংবেদনশীল তথ্য ছিনিয়ে নিলেও, সংবেদনশীল তথ্য এভাবে ফাঁস হতে পারে ৷ যদি এটি আপনার অ্যাপ্লিকেশনের জন্য খুব ঝুঁকিপূর্ণ মনে হয়, তাহলে আপনার নিজস্ব রিপোর্টিং এন্ডপয়েন্ট পরিচালনা করুন।

বিকল্প 2: আপনার নিজস্ব প্রতিবেদন সংগ্রহকারী তৈরি করুন এবং পরিচালনা করুন

আপনার নিজস্ব সার্ভার তৈরি করা যা প্রতিবেদনগুলি গ্রহণ করে তা তুচ্ছ নয়। শুরু করতে, আপনি আমাদের লাইটওয়েট বয়লারপ্লেট কাঁটাচামচ করতে পারেন। এটি এক্সপ্রেস দিয়ে তৈরি এবং প্রতিবেদনগুলি গ্রহণ এবং প্রদর্শন করতে পারে।

1. বয়লারপ্লেট রিপোর্ট সংগ্রহকারীর কাছে যান।

2. প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷

3. আপনি এখন আপনার ক্লোন আছে! আপনি আপনার নিজের উদ্দেশ্যে এটি কাস্টমাইজ করতে পারেন.

আপনি যদি বয়লারপ্লেট ব্যবহার না করেন এবং স্ক্র্যাচ থেকে আপনার নিজস্ব সার্ভার তৈরি করছেন:

• আপনার এন্ডপয়েন্টে ব্রাউজার দ্বারা প্রেরিত প্রতিবেদনের অনুরোধগুলি সনাক্ত করতে একটি Content-Type application/reports+json সহ POST অনুরোধগুলি পরীক্ষা করুন৷
• যদি আপনার এন্ডপয়েন্ট আপনার সাইটের থেকে ভিন্ন কোনো উৎসে থাকে, তাহলে নিশ্চিত করুন যে এটি CORS প্রিফ্লাইট অনুরোধ সমর্থন করে।

বিকল্প 3: বিকল্প 1 এবং 2 একত্রিত করুন

আপনি একটি নির্দিষ্ট প্রদানকারীকে কিছু ধরণের রিপোর্টের যত্ন নিতে দিতে চাইতে পারেন, তবে অন্যদের জন্য একটি ইন-হাউস সমাধান আছে।

এই ক্ষেত্রে, নিম্নলিখিত হিসাবে একাধিক শেষ পয়েন্ট সেট করুন:

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"

আপনি যদি লিগ্যাসি রিপোর্টিং এপিআই থেকে নতুন রিপোর্টিং এপিআইতে স্থানান্তরিত হন, 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 আপনি ধাপ 1-এ কী সিদ্ধান্ত নিয়েছেন তার উপর নির্ভর করে।

একটি শেষবিন্দু URL:

• একটি স্ল্যাশ ( / ) দিয়ে শুরু করতে হবে। আপেক্ষিক পাথ সমর্থিত হয় না .
• ক্রস-অরিজিন হতে পারে; কিন্তু সেই ক্ষেত্রে রিপোর্টের সাথে প্রমাণপত্র পাঠানো হয় না ।

উদাহরণ

Reporting-Endpoints: my-coop-endpoint="https://reports.example/coop", my-csp-endpoint="https://reports.example/csp", default="https://reports.example/default"

তারপরে আপনি উপযুক্ত নীতিতে প্রতিটি নামযুক্ত এন্ডপয়েন্ট ব্যবহার করতে পারেন, বা সমস্ত নীতি জুড়ে একটি একক শেষ পয়েন্ট ব্যবহার করতে পারেন।

হেডার কোথায় সেট করবেন?

নতুন রিপোর্টিং এপিআই-এ যা এই পোস্টে কভার করা হয়েছে- রিপোর্টগুলি নথিতে স্কোপ করা হয়েছে। এর মানে হল যে একটি প্রদত্ত উত্সের জন্য, বিভিন্ন নথি, যেমন 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

উদাহরণ কোড

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

আপনার রিপোর্টিং সেটআপ ডিবাগ করুন

ইচ্ছাকৃতভাবে প্রতিবেদন তৈরি করা

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

সময় বাঁচান

প্রতিবেদনগুলি বিলম্বের সাথে পাঠানো হতে পারে - প্রায় এক মিনিট, যা ডিবাগ করার সময় একটি দীর্ঘ সময়। 😴 সৌভাগ্যবশত, Chrome-এ ডিবাগ করার সময়, রিপোর্ট তৈরি হওয়ার সাথে সাথে আপনি ফ্ল্যাগ --short-reporting-delay ব্যবহার করতে পারেন।

এই পতাকা চালু করতে আপনার টার্মিনালে এই কমান্ডটি চালান:

YOUR_PATH/TO/EXECUTABLE/Chrome --short-reporting-delay

DevTools ব্যবহার করুন

Chrome-এ, পাঠানো হয়েছে বা পাঠানো হবে এমন রিপোর্ট দেখতে DevTools ব্যবহার করুন।

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

1. Chrome সংস্করণ 96 এবং নতুন ব্যবহার করুন (আপনার ব্রাউজারে chrome://version লিখে চেক করুন)
2. Chrome এর URL বারে chrome://flags/#enable-experimental-web-platform-features টাইপ বা পেস্ট করুন।
3. সক্রিয় ক্লিক করুন.
4. আপনার ব্রাউজার রিস্টার্ট করুন।
5. Chrome DevTools খুলুন।
6. Chrome DevTools-এ, সেটিংস খুলুন। পরীক্ষা-নিরীক্ষার অধীনে, অ্যাপ্লিকেশন প্যানেলে রিপোর্টিং API প্যানেল সক্ষম করুন ক্লিক করুন।
7. DevTools পুনরায় লোড করুন।
8. আপনার পৃষ্ঠা পুনরায় লোড করুন. DevTools যে পৃষ্ঠাটিতে উন্মুক্ত রয়েছে তার দ্বারা তৈরি প্রতিবেদনগুলি রিপোর্টিং API-এর অধীনে Chrome DevTools-এর অ্যাপ্লিকেশন প্যানেলে তালিকাভুক্ত করা হবে৷

অবস্থা রিপোর্ট করুন

একটি রিপোর্ট সফলভাবে পাঠানো হয়েছে কিনা স্ট্যাটাস কলাম আপনাকে বলে।

প্রতিবেদনগুলি সফলভাবে পাঠানো হোক বা না হোক, কিছুক্ষণ পরে সরানো হয়৷

সমস্যা সমাধান

রিপোর্ট তৈরি হয় না বা আপনার শেষ পয়েন্টে প্রত্যাশিত হিসাবে পাঠানো হয় না? এই সমস্যা সমাধানের জন্য এখানে কয়েকটি টিপস রয়েছে৷

রিপোর্ট তৈরি হয় না

DevTools-এ দেখানো রিপোর্টগুলি সঠিকভাবে তৈরি করা হয়েছে। আপনি যে রিপোর্ট আশা করছেন তা এই তালিকায় না থাকলে:

• আপনার পলিসিতে report-to চেক করুন। যদি এটি ভুল কনফিগার করা হয়, একটি প্রতিবেদন তৈরি করা হবে না। এটি ঠিক করতে আপনার নীতিগুলি সম্পাদনা করুন । এটির সমস্যা সমাধানের একটি অতিরিক্ত উপায় হল Chrome-এ DevTools কনসোল চেক করা: আপনার প্রত্যাশিত লঙ্ঘনের জন্য কনসোলে কোনো ত্রুটি দেখা দিলে, এর মানে হল আপনার নীতি সম্ভবত সঠিকভাবে কনফিগার করা হয়েছে৷
• মনে রাখবেন যে DevTools ডকুমেন্টের জন্য তৈরি করা হয়েছে শুধুমাত্র সেই রিপোর্টই এই তালিকায় দেখা যাবে। একটি উদাহরণ: যদি আপনার সাইট site1.example একটি iframe site2.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"

• default শেষ বিন্দু অনুপস্থিত. কিছু রিপোর্টের ধরন, যেমন অবচয় এবং হস্তক্ষেপ রিপোর্ট, শুধুমাত্র default নামে শেষ পয়েন্টে পাঠানো হবে। রিপোর্টিং-এন্ডপয়েন্ট হেডার কনফিগার করুন -এ আরও পড়ুন।

• আপনার নীতি শিরোনাম সিনট্যাক্সে সমস্যাগুলি দেখুন, যেমন অনুপস্থিত উদ্ধৃতি। বিস্তারিত দেখুন .

• আপনার এন্ডপয়েন্ট ইনকামিং অনুরোধগুলি পরিচালনা করতে পারে তা পরীক্ষা করুন।

  • নিশ্চিত করুন যে আপনার এন্ডপয়েন্ট সমর্থন CORS preflight অনুরোধ. এটি না হলে, এটি রিপোর্ট গ্রহণ করতে পারে না।

  • আপনার এন্ডপয়েন্টের আচরণ পরীক্ষা করুন। এটি করার জন্য, ম্যানুয়ালি রিপোর্ট তৈরি করার পরিবর্তে, আপনি আপনার এন্ডপয়েন্ট অনুরোধগুলি পাঠিয়ে ব্রাউজারটিকে অনুকরণ করতে পারেন যা দেখতে ব্রাউজারটি কী পাঠাবে। নিম্নলিখিত চালান:

  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 দ্বারা নায়কের ছবি, সম্পাদিত। এই নিবন্ধে তাদের পর্যালোচনা এবং পরামর্শের জন্য ইয়ান ক্লেল্যান্ড, ইজি কিতামুরা এবং মিলিকা মিহাজলিজাকে অনেক ধন্যবাদ।

নিরাপত্তা লঙ্ঘন, অবহেলিত API কল এবং আরও অনেক কিছু নিরীক্ষণ করতে রিপোর্টিং API ব্যবহার করুন।

Maud Nalpas

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

এটি আপনাকে ঘোষণা করতে দেয় যে আপনি HTTP হেডারের মাধ্যমে কী নিরীক্ষণ করতে চান এবং ব্রাউজার দ্বারা পরিচালিত হয়৷

রিপোর্টিং API সেট আপ করা আপনাকে মানসিক শান্তি দেয় যে ব্যবহারকারীরা যখন এই ধরনের ত্রুটিগুলি অনুভব করেন, তখন আপনি জানতে পারবেন, যাতে আপনি সেগুলি ঠিক করতে পারেন৷

এই APIটি কী করতে পারে এবং কীভাবে এটি ব্যবহার করতে হয় তা এই পোস্টে কভার করা হয়েছে। এর মধ্যে ডুব দেওয়া যাক!

ডেমো এবং কোড

Chrome 96 এবং নতুন (Chrome বিটা বা ক্যানারি, অক্টোবর 2021 থেকে) থেকে শুরু করে রিপোর্টিং এপিআই দেখুন।

ওভারভিউ

ধরুন আপনার সাইট, site.example , এর একটি বিষয়বস্তু-নিরাপত্তা-নীতি এবং একটি নথি-নীতি রয়েছে৷ জানিনা এগুলো কি করে? ঠিক আছে, আপনি এখনও এই উদাহরণটি বুঝতে সক্ষম হবেন।

এই নীতিগুলি কখন লঙ্ঘন করা হয় তা জানার জন্য আপনি আপনার সাইট নিরীক্ষণ করার সিদ্ধান্ত নেন, কিন্তু এছাড়াও আপনি আপনার কোডবেস ব্যবহার করা হতে পারে অবহেলিত বা শীঘ্রই-থেকে-বঞ্চিত 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"
}

কেস এবং রিপোর্টের ধরন ব্যবহার করুন

রিপোর্টিং এপিআই কনফিগার করা যেতে পারে যাতে আপনি অনেক ধরনের আকর্ষণীয় সতর্কতা বা আপনার সাইটে ঘটতে থাকা সমস্যাগুলি নিরীক্ষণ করতে পারেন:

রিপোর্ট

রিপোর্ট কেমন দেখায়?

ব্রাউজার আপনার কনফিগার করা শেষ পয়েন্টে রিপোর্ট পাঠায়। এটি এমন অনুরোধ পাঠায় যা নিম্নরূপ দেখায়:

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"
  }
]

এই প্রতিটি প্রতিবেদনে আপনি যে ডেটা খুঁজে পেতে পারেন তা এখানে:

শংসাপত্রযুক্ত প্রতিবেদন

রিপোর্টিং এন্ডপয়েন্ট যে পৃষ্ঠাটি রিপোর্ট তৈরি করে সেই পৃষ্ঠার মতোই সেই রিপোর্টগুলি ধারণ করে থাকা অনুরোধগুলিতে শংসাপত্র (কুকি) পায়।

প্রমাণপত্র প্রতিবেদন সম্পর্কে দরকারী অতিরিক্ত প্রসঙ্গ দিতে পারে; উদাহরণস্বরূপ, একটি প্রদত্ত ব্যবহারকারীর অ্যাকাউন্ট ক্রমাগত ত্রুটিগুলিকে ট্রিগার করছে কিনা বা অন্য পৃষ্ঠাগুলিতে গৃহীত পদক্ষেপের একটি নির্দিষ্ট ক্রম এই পৃষ্ঠায় একটি প্রতিবেদন ট্রিগার করছে কিনা।

কখন এবং কিভাবে ব্রাউজার রিপোর্ট পাঠায়?

প্রতিবেদনগুলি আপনার সাইট থেকে আউট-অফ-ব্যান্ড বিতরণ করা হয় : ব্রাউজার নিয়ন্ত্রণ করে যখন সেগুলি কনফিগার করা এন্ডপয়েন্টে পাঠানো হয়। ব্রাউজার কখন রিপোর্ট পাঠায় তা নিয়ন্ত্রণ করার কোন উপায় নেই; এটি ক্যাপচার করে, সারিবদ্ধ করে এবং একটি উপযুক্ত সময়ে স্বয়ংক্রিয়ভাবে পাঠায়।

এর মানে হল যে রিপোর্টিং API ব্যবহার করার সময় পারফরম্যান্সের উদ্বেগ নেই।

ব্যাচে রিপোর্ট পাঠানোর সুযোগ বাড়ানোর জন্য - এক মিনিট পর্যন্ত - বিলম্বের সাথে রিপোর্ট পাঠানো হয় । এটি ব্যবহারকারীর নেটওয়ার্ক সংযোগের প্রতি শ্রদ্ধাশীল হতে ব্যান্ডউইথ সংরক্ষণ করে, যা মোবাইলে বিশেষভাবে গুরুত্বপূর্ণ। ব্রাউজারটি ডেলিভারি বিলম্বিত করতে পারে যদি এটি উচ্চ অগ্রাধিকারের কাজ প্রক্রিয়াকরণে ব্যস্ত থাকে, অথবা যদি ব্যবহারকারী সেই সময়ে একটি ধীর এবং/অথবা ভিড়যুক্ত নেটওয়ার্কে থাকে।

তৃতীয় পক্ষ এবং প্রথম পক্ষের সমস্যা

আপনার পৃষ্ঠায় ঘটছে লঙ্ঘন বা অবনমনের কারণে তৈরি হওয়া প্রতিবেদনগুলি আপনার কনফিগার করা শেষ পয়েন্টে পাঠানো হবে। এতে আপনার পৃষ্ঠায় চলমান তৃতীয় পক্ষের স্ক্রিপ্টের লঙ্ঘন অন্তর্ভুক্ত রয়েছে।

আপনার পৃষ্ঠায় এম্বেড করা ক্রস-অরিজিন আইফ্রেমে ঘটে যাওয়া লঙ্ঘন বা অবমূল্যায়নগুলি আপনার এন্ডপয়েন্টে রিপোর্ট করা হবে না (অন্তত ডিফল্টরূপে নয়)। একটি আইফ্রেম তার নিজস্ব রিপোর্টিং সেট আপ করতে পারে এবং এমনকি আপনার সাইটের-অর্থাৎ, প্রথম পক্ষের-প্রতিবেদন পরিষেবাতে রিপোর্ট করতে পারে; কিন্তু এটি ফ্রেমযুক্ত সাইটের উপর নির্ভর করে। এছাড়াও মনে রাখবেন যে বেশিরভাগ রিপোর্ট শুধুমাত্র একটি পৃষ্ঠার নীতি লঙ্ঘন হলেই তৈরি হয় এবং আপনার পৃষ্ঠার নীতি এবং iframe-এর নীতিগুলি আলাদা৷

অবজ্ঞা সহ উদাহরণ

ব্রাউজার সমর্থন

নীচের টেবিলটি প্রতিবেদনের এপিআই ভি 1 এর জন্য ব্রাউজার সমর্থন যোগ করে, এটি Reporting-Endpoints শিরোনাম সহ। রিপোর্টিং এপিআই ভি 0 ( Report-To হেডার) এর জন্য ব্রাউজার সমর্থন একই, একটি প্রতিবেদনের ধরণ ব্যতীত: নেটওয়ার্ক ত্রুটি লগিং নতুন রিপোর্টিং এপিআইতে সমর্থিত নয়। বিশদ জন্য মাইগ্রেশন গাইড পড়ুন।

এই টেবিলটি কেবল নতুন Reporting-Endpoints শিরোনামের সাথে report-to জন্য সহায়তার সংক্ষিপ্তসার করেছে। আপনি যদি Reporting-Endpoints স্থানান্তরিত করতে চান তবে সিএসপি রিপোর্টিং মাইগ্রেশন টিপস পড়ুন।

রিপোর্টিং এপিআই ব্যবহার করে

কোথায় রিপোর্ট পাঠানো উচিত তা স্থির করুন

আপনার দুটি বিকল্প আছে:

• বিদ্যমান প্রতিবেদন সংগ্রাহক পরিষেবায় প্রতিবেদন প্রেরণ করুন।
• আপনি নিজের তৈরি এবং পরিচালনা করেন এমন কোনও প্রতিবেদন সংগ্রাহককে প্রতিবেদন প্রেরণ করুন।

বিকল্প 1: একটি বিদ্যমান প্রতিবেদন সংগ্রাহক পরিষেবা ব্যবহার করুন

প্রতিবেদন সংগ্রাহক পরিষেবার কয়েকটি উদাহরণ হ'ল:

• রিপোর্ট-উরি
• ইউরিপোর্টস

আপনি যদি অন্যান্য সমাধানগুলি সম্পর্কে জানেন তবে আমাদের জানাতে কোনও সমস্যা খুলুন এবং আমরা এই পোস্টটি আপডেট করব!

মূল্য নির্ধারণের পাশাপাশি, প্রতিবেদন সংগ্রাহক নির্বাচন করার সময় নিম্নলিখিত বিষয়গুলি বিবেচনা করুন: 🧐

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

বিকল্প 2: আপনার নিজস্ব প্রতিবেদন সংগ্রাহক তৈরি এবং পরিচালনা করুন

আপনার নিজস্ব সার্ভার তৈরি করা যা প্রতিবেদনগুলি গ্রহণ করে তা তুচ্ছ নয়। শুরু করার জন্য, আপনি আমাদের লাইটওয়েট বয়লারপ্লেটটি কাঁটাচামচ করতে পারেন। এটি এক্সপ্রেস দিয়ে নির্মিত এবং প্রতিবেদনগুলি গ্রহণ এবং প্রদর্শন করতে পারে।

1. বয়লারপ্লেট রিপোর্ট সংগ্রাহকের দিকে যান।

2. প্রকল্পটি সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্স ক্লিক করুন।

3. আপনার এখন আপনার ক্লোন আছে! আপনি এটি নিজের উদ্দেশ্যে কাস্টমাইজ করতে পারেন।

যদি আপনি বয়লারপ্লেট ব্যবহার না করে থাকেন এবং স্ক্র্যাচ থেকে আপনার নিজস্ব সার্ভার তৈরি করছেন:

• ব্রাউজারের মাধ্যমে আপনার শেষ পয়েন্টে প্রেরিত প্রতিবেদনগুলির অনুরোধগুলি সনাক্ত করতে application/reports+json এর Content-Type সাথে POST অনুরোধগুলির জন্য পরীক্ষা করুন।
• যদি আপনার শেষ পয়েন্টটি আপনার সাইটের চেয়ে আলাদা উত্সে বাস করে তবে এটি নিশ্চিত করুন যে এটি কর্স প্রিফ্লাইটের অনুরোধগুলি সমর্থন করে।

বিকল্প 3: বিকল্প 1 এবং 2 একত্রিত করুন

আপনি কোনও নির্দিষ্ট সরবরাহকারীকে কিছু ধরণের প্রতিবেদনের যত্ন নিতে দিতে চাইতে পারেন তবে অন্যের জন্য অভ্যন্তরীণ সমাধান রাখতে পারেন।

এই ক্ষেত্রে, নিম্নলিখিত হিসাবে একাধিক শেষ পয়েন্ট সেট করুন:

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"

আপনি যদি লিগ্যাসি রিপোর্টিং এপিআই থেকে নতুন রিপোর্টিং এপিআইতে স্থানান্তরিত করছেন, তবে Reporting-Endpoints এবং Report-To উভয়ই সেট করা বোধগম্য হতে পারে। মাইগ্রেশন গাইডে বিশদ দেখুন। বিশেষত, আপনি যদি কেবল report-uri নির্দেশকের মাধ্যমে Content-Security-Policy লঙ্ঘনের জন্য প্রতিবেদন ব্যবহার করছেন তবে সিএসপি রিপোর্টিংয়ের জন্য মাইগ্রেশন পদক্ষেপগুলি পরীক্ষা করুন।

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 এন্ডপয়েন্টকে সংজ্ঞায়িত করে না, তবে এই ধরণের প্রতিবেদনগুলি প্রেরণ করা হবে না (যদিও তারা উত্পন্ন হবে)।

মান (urls)

প্রতিটি মান আপনার পছন্দের একটি ইউআরএল, যেখানে প্রতিবেদনগুলি প্রেরণ করা হবে। এখানে সেট করা ইউআরএল আপনি ধাপ 1 এ কী সিদ্ধান্ত নিয়েছেন তার উপর নির্ভর করে।

একটি শেষ পয়েন্ট ইউআরএল:

• একটি স্ল্যাশ ( / ) দিয়ে শুরু করতে হবে। আপেক্ষিক পাথ সমর্থিত নয় ।
• ক্রস-অরিজিন হতে পারে; তবে সেক্ষেত্রে শংসাপত্রগুলি প্রতিবেদনগুলি সহ প্রেরণ করা হয় না ।

উদাহরণ

Reporting-Endpoints: my-coop-endpoint="https://reports.example/coop", my-csp-endpoint="https://reports.example/csp", default="https://reports.example/default"

তারপরে আপনি উপযুক্ত নীতিতে প্রতিটি নামযুক্ত এন্ডপয়েন্ট ব্যবহার করতে পারেন, বা সমস্ত নীতিমালায় একটি একক এন্ডপয়েন্ট ব্যবহার করতে পারেন।

কোথায় শিরোনাম সেট করবেন?

নতুন প্রতিবেদনে এপিআই - এই পোস্টে আচ্ছাদিত একটি - প্রতিবেদনগুলি নথিগুলিতে স্কোপ করা হয়েছে। এর অর্থ হ'ল একটি প্রদত্ত উত্সের জন্য, বিভিন্ন নথি যেমন 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

উদাহরণ কোড

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

আপনার রিপোর্টিং সেটআপটি ডিবাগ করুন

ইচ্ছাকৃতভাবে প্রতিবেদন তৈরি

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

সময় বাঁচান

প্রতিবেদনগুলি বিলম্বের সাথে প্রেরণ করা যেতে পারে - প্রায় এক মিনিট, যা ডিবাগ করার সময় দীর্ঘ সময়। 😴 ভাগ্যক্রমে, ক্রোমে ডিবাগ করার সময়, আপনি পতাকাটি ব্যবহার করতে পারেন --short-reporting-delay তারা উত্পন্ন হওয়ার সাথে সাথেই প্রতিবেদনগুলি গ্রহণ করতে পারে।

এই পতাকাটি চালু করতে আপনার টার্মিনালে এই কমান্ডটি চালান:

YOUR_PATH/TO/EXECUTABLE/Chrome --short-reporting-delay

ডিভটুল ব্যবহার করুন

ক্রোমে, পাঠানো হয়েছে বা প্রেরণ করা হবে এমন প্রতিবেদনগুলি দেখতে ডেভটুলগুলি ব্যবহার করুন।

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

1. Chrome সংস্করণ 96 এবং আরও নতুন ব্যবহার করুন (আপনার ব্রাউজারে chrome://version টাইপ করে চেক করুন)
2. chrome://flags/#enable-experimental-web-platform-features ।
3. সক্ষম ক্লিক করুন।
4. আপনার ব্রাউজার রিস্টার্ট করুন।
5. ক্রোম ডিভটুলগুলি খুলুন।
6. ক্রোম ডিভটুলগুলিতে, সেটিংস খুলুন। পরীক্ষা -নিরীক্ষার অধীনে, অ্যাপ্লিকেশন প্যানেলে এপিআই প্যানেল রিপোর্টিং সক্ষম করুন ক্লিক করুন।
7. ডেভটুলগুলি পুনরায় লোড করুন।
8. আপনার পৃষ্ঠা পুনরায় লোড করুন। পৃষ্ঠাগুলি দ্বারা উত্পাদিত প্রতিবেদনগুলি খোলা রয়েছে এপিআই রিপোর্টিংয়ের অধীনে ক্রোম ডেভটুলসের অ্যাপ্লিকেশন প্যানেলে তালিকাভুক্ত করা হবে।

অবস্থা রিপোর্ট করুন

কোনও প্রতিবেদন সফলভাবে প্রেরণ করা হয়েছে কিনা তা স্থিতি কলাম আপনাকে বলে।

প্রতিবেদনগুলি কিছুক্ষণ পরে সরানো হয়, তারা সফলভাবে প্রেরণ করা হয় কি না।

সমস্যা সমাধান

প্রতিবেদনগুলি কি আপনার শেষ পয়েন্টে প্রত্যাশিত হিসাবে উত্পন্ন হয় না বা প্রেরণ করা হয় না? এটি সমস্যা সমাধানের জন্য কয়েকটি টিপস এখানে।

রিপোর্ট উত্পন্ন হয় না

ডেভটুলগুলিতে প্রদর্শিত প্রতিবেদনগুলি সঠিকভাবে উত্পন্ন হয়েছে। আপনি যে প্রতিবেদনটি প্রত্যাশা করছেন তা যদি এই তালিকায় প্রদর্শিত না হয়:

• আপনার নীতিমালায় report-to পরীক্ষা করুন। যদি এটি ভুল কনফিগার করা হয় তবে একটি প্রতিবেদন উত্পন্ন হবে না। এটি ঠিক করার জন্য আপনার নীতিগুলি সম্পাদনা করতে যান। এটি সমস্যার সমাধানের একটি অতিরিক্ত উপায় হ'ল ক্রোমে ডেভটুলস কনসোলটি পরীক্ষা করা: যদি আপনার প্রত্যাশিত লঙ্ঘনের জন্য কোনও ত্রুটি কনসোলে পপ আপ হয় তবে এর অর্থ আপনার নীতি সম্ভবত সঠিকভাবে কনফিগার করা হয়েছে।
• মনে রাখবেন যে ডকুমেন্টের জন্য যে প্রতিবেদনগুলি তৈরি করা হয়েছিল সেগুলি কেবল এই তালিকায় প্রদর্শিত হবে। একটি উদাহরণ: যদি আপনার সাইটের সাইট site1.example একটি আইএফআরএমই site2.example এম্বেড করে যা কোনও নীতি লঙ্ঘন করে এবং তাই একটি প্রতিবেদন তৈরি করে, এই প্রতিবেদনটি কেবল তখনই ডিভটুলগুলিতে প্রদর্শিত হবে যদি আপনি তার নিজস্ব উইন্ডোতে আইফ্রেমটি খুলুন এবং সেই উইন্ডোটির জন্য ডেভটুলগুলি খুলুন।

প্রতিবেদনগুলি উত্পন্ন হয় তবে প্রেরণ করা হয় না বা প্রাপ্ত হয় না

আপনি যদি ডেভটুলসে কোনও প্রতিবেদন দেখতে পান তবে কী হবে তবে আপনার শেষ পয়েন্টটি এটি পায় না?

• সংক্ষিপ্ত বিলম্ব ব্যবহার নিশ্চিত করুন। আপনি কোনও প্রতিবেদন দেখতে না পারার কারণটি হ'ল এটি এখনও প্রেরণ করা হয়নি!

• আপনার Reporting-Endpoints শিরোনাম কনফিগারেশন পরীক্ষা করুন। যদি এটির সাথে কোনও সমস্যা থাকে তবে একটি প্রতিবেদন যা সঠিকভাবে উত্পন্ন হয়েছে তা প্রেরণ করা হবে না। ডেভটুলগুলিতে, প্রতিবেদনের স্থিতি এই ক্ষেত্রে Queued থাকবে (এটি Pending থাকতে পারে এবং তারপরে দ্রুত প্রসবের চেষ্টা করা হলে দ্রুত Queued হয়ে ফিরে যায়)। কিছু সাধারণ ভুল যা এর কারণ হতে পারে:

• শেষ পয়েন্টটি ব্যবহৃত হয় তবে কনফিগার করা হয় না। উদাহরণ:

 Document-Policy: document-write=?0;report-to=endpoint-1;
 Reporting-Endpoints: default="https://reports.example/default"

• default এন্ডপয়েন্টটি অনুপস্থিত। কিছু প্রতিবেদনের ধরণগুলি যেমন অবমূল্যায়ন এবং হস্তক্ষেপের প্রতিবেদনগুলি কেবল default নামের শেষ পয়েন্টে প্রেরণ করা হবে। রিপোর্টিং-এন্ডপয়েন্টস শিরোনাম কনফিগার করতে আরও পড়ুন।

• আপনার নীতিমালা শিরোনাম সিনট্যাক্সের সমস্যাগুলি সন্ধান করুন, যেমন নিখোঁজ উদ্ধৃতি। বিস্তারিত দেখুন .

• আপনার শেষ পয়েন্টটি আগত অনুরোধগুলি পরিচালনা করতে পারে তা পরীক্ষা করে দেখুন।

  • নিশ্চিত হয়ে নিন যে আপনার এন্ডপয়েন্ট সমর্থন কর্স প্রিফাইট অনুরোধগুলি সমর্থন করে। যদি এটি না হয় তবে এটি প্রতিবেদনগুলি পেতে পারে না।

  • আপনার শেষ পয়েন্টের আচরণ পরীক্ষা করুন। এটি করার জন্য, ম্যানুয়ালি প্রতিবেদন তৈরি করার পরিবর্তে, আপনি ব্রাউজারটি আপনার শেষ পয়েন্ট অনুরোধগুলিতে প্রেরণ করে অনুকরণ করতে পারেন যা ব্রাউজারটি কী প্রেরণ করবে তার মতো দেখায় । নিম্নলিখিত চালান:

  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 ফিল্ডে কনফিগার করা শেষ পয়েন্টগুলি, এই নীতিগুলি লঙ্ঘিত হলে প্রতিবেদনগুলি পাবেন।

report-to Reporting-Endpoints কনফিগার করা এন্ডপয়েন্টগুলি Content-Security-Policy-Report-Only , Cross-Origin-Embedder-Policy-Report-Only এবং Cross-Origin-Opener-Policy-Report-Only . এই নীতিগুলি লঙ্ঘন করা হলে তারা প্রতিবেদনগুলিও পাবেন।

উভয় ক্ষেত্রেই প্রতিবেদনগুলি প্রেরণ করা হলেও, -Report-Only শিরোনামগুলি নীতিগুলি প্রয়োগ করে না: কিছুই ভাঙবে না বা আসলে অবরুদ্ধ হবে না, তবে আপনি কী ভাঙা বা অবরুদ্ধ হয়ে পড়েছেন তার প্রতিবেদন পাবেন।

ReportingObserver

ReportingObserver জাভাস্ক্রিপ্ট এপিআই আপনাকে ক্লায়েন্ট-সাইড সতর্কতাগুলি পর্যবেক্ষণ করতে সহায়তা করতে পারে।

ReportingObserver এবং Reporting-Endpoints শিরোনামগুলি এমন প্রতিবেদন তৈরি করে যা একই দেখায় তবে তারা কিছুটা আলাদা ব্যবহারের ক্ষেত্রে সক্ষম করে।

যদি ReportingObserver ব্যবহার করুন:

• আপনি কেবল অবচয় এবং/অথবা ব্রাউজারের হস্তক্ষেপগুলি পর্যবেক্ষণ করতে চান। ReportingObserver ক্লায়েন্ট-সাইড সতর্কতা যেমন অবমূল্যায়ন এবং ব্রাউজারের হস্তক্ষেপের পৃষ্ঠতল করে, তবে Reporting-Endpoints বিপরীতে, এটি অন্য কোনও ধরণের প্রতিবেদন যেমন সিএসপি বা সিওপি/কোইপি লঙ্ঘনের মতো ক্যাপচার করে না।
• রিয়েল-টাইমে আপনাকে এই লঙ্ঘনের প্রতিক্রিয়া জানাতে হবে। ReportingObserver কোনও লঙ্ঘন ইভেন্টে কলব্যাক সংযুক্ত করা সম্ভব করে তোলে।
• আপনি কাস্টম কলব্যাকের মাধ্যমে ডিবাগিংয়ে সহায়তা করার জন্য একটি প্রতিবেদনে অতিরিক্ত তথ্য সংযুক্ত করতে চান।

আরেকটি পার্থক্য হ'ল ReportingObserver কেবল ক্লায়েন্ট-সাইড কনফিগার করা হয়েছে: সার্ভার-সাইড শিরোনামগুলির উপর আপনার কোনও নিয়ন্ত্রণ না থাকলেও আপনি এটি ব্যবহার করতে পারেন এবং Reporting-Endpoints সেট করতে না পারেন।

আরও পড়া

• এপিআই ভি 0 থেকে ভি 1 তে প্রতিবেদন করা থেকে মাইগ্রেশন গাইড
• রিপোর্টিং অবজারভার
• স্পেসিফিকেশন: উত্তরাধিকার প্রতিবেদন এপিআই (ভি 0)
• স্পেসিফিকেশন: নতুন প্রতিবেদন এপিআই (ভি 1)

হিরো ইমেজ নাইন কোয়েফার / @এনকা 80 এ আনস্প্ল্যাশে সম্পাদিত। এই নিবন্ধে তাদের পর্যালোচনা এবং পরামর্শের জন্য ইয়ান ক্লেল্যান্ড, আইজি কিতামুরা এবং মিলিকা মিহাজলিজাকে অনেক ধন্যবাদ।

সুরক্ষা লঙ্ঘন, অবমূল্যায়িত এপিআই কলগুলি এবং আরও অনেক কিছু পর্যবেক্ষণ করতে প্রতিবেদন এপিআই ব্যবহার করুন।

Maud Nalpas

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

এটি আপনাকে এইচটিটিপি হেডারগুলির মাধ্যমে কী নিরীক্ষণ করতে চান তা ঘোষণা করতে দেয় এবং ব্রাউজার দ্বারা পরিচালিত হয়।

রিপোর্টিং এপিআই সেট আপ করা আপনাকে মনের শান্তি দেয় যে ব্যবহারকারীরা যখন এই ধরণের ত্রুটিগুলি অনুভব করেন, আপনি জানতে পারবেন, যাতে আপনি সেগুলি ঠিক করতে পারেন।

এই পোস্টটি এই এপিআই কী করতে পারে এবং কীভাবে এটি ব্যবহার করতে পারে তা কভার করে। এর মধ্যে ডুব দেওয়া যাক!

ডেমো এবং কোড

ক্রোম 96 এবং আরও নতুন (ক্রোম বিটা বা ক্যানারি, 2021 সালের অক্টোবর পর্যন্ত) থেকে শুরু করে অ্যাকশনে রিপোর্টিং এপিআই দেখুন।

ওভারভিউ

আসুন ধরে নেওয়া যাক আপনার সাইট, site.example -এর একটি সামগ্রী-সুরক্ষা-নীতি এবং একটি নথি-নীতি রয়েছে। এগুলি কি জানেন না? এটি ঠিক আছে, আপনি এখনও এই উদাহরণটি বুঝতে সক্ষম হবেন।

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

এটি করার জন্য, আপনি একটি 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;

ব্রাউজারটি একটি সিএসপি লঙ্ঘন প্রতিবেদন, একটি ডকুমেন্ট-পলিসি লঙ্ঘন প্রতিবেদন এবং এই বিষয়গুলি ক্যাপচার করে এমন একটি অবমূল্যায়ন প্রতিবেদন তৈরি করে।

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

শেষ পয়েন্ট (গুলি) এই প্রতিবেদনগুলি গ্রহণ করে।

আপনি এখন এই শেষ পয়েন্টগুলিতে প্রতিবেদনগুলি অ্যাক্সেস করতে পারেন এবং কী ভুল হয়েছে তা পর্যবেক্ষণ করতে পারেন। আপনি আপনার ব্যবহারকারীদের প্রভাবিত করে এমন সমস্যা সমাধান শুরু করতে প্রস্তুত।

উদাহরণ রিপোর্ট

{
  "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"
}

কেস এবং রিপোর্ট প্রকার ব্যবহার করুন

আপনার সাইট জুড়ে ঘটে যাওয়া বিভিন্ন ধরণের আকর্ষণীয় সতর্কতা বা সমস্যাগুলি পর্যবেক্ষণ করতে আপনাকে প্রতিবেদন করা এপিআই কনফিগার করা যেতে পারে:

রিপোর্ট

রিপোর্টগুলি দেখতে কেমন?

ব্রাউজারটি আপনি কনফিগার করা শেষ পয়েন্টে প্রতিবেদনগুলি প্রেরণ করে। এটি অনুরোধগুলি প্রেরণ করে যা নিম্নলিখিত চেহারা:

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"
  }
]

এই প্রতিবেদনের প্রতিটিতে আপনি যে ডেটা খুঁজে পেতে পারেন তা এখানে:

শংসাপত্রিত প্রতিবেদন

প্রতিবেদনগুলি তৈরি করে এমন পৃষ্ঠার সমান পয়েন্টগুলি রিপোর্টিং যা প্রতিবেদন উত্পন্ন করে এমন অনুরোধগুলিতে শংসাপত্রগুলি (কুকিজ) গ্রহণ করে যাতে প্রতিবেদনগুলি রয়েছে।

শংসাপত্রগুলি প্রতিবেদন সম্পর্কে দরকারী অতিরিক্ত প্রসঙ্গ দিতে পারে; উদাহরণস্বরূপ, প্রদত্ত ব্যবহারকারীর অ্যাকাউন্টটি ধারাবাহিকভাবে ত্রুটিগুলি ট্রিগার করছে কিনা, বা অন্য পৃষ্ঠাগুলিতে নেওয়া কোনও নির্দিষ্ট ক্রম যদি এই পৃষ্ঠায় একটি প্রতিবেদনকে ট্রিগার করছে।

ব্রাউজার কখন এবং কীভাবে প্রতিবেদন প্রেরণ করে?

প্রতিবেদনগুলি আপনার সাইট থেকে বাইরে-ব্যান্ড সরবরাহ করা হয় : ব্রাউজারটি কনফিগার করা শেষ পয়েন্টগুলিতে প্রেরণ করা হলে নিয়ন্ত্রণ করে। ব্রাউজার যখন প্রতিবেদনগুলি প্রেরণ করে তখন নিয়ন্ত্রণের কোনও উপায়ও নেই; এটি ক্যাপচার করে, সারি করে এবং উপযুক্ত সময়ে তাদের স্বয়ংক্রিয়ভাবে প্রেরণ করে।

এর অর্থ হ'ল রিপোর্টিং এপিআই ব্যবহার করার সময় পারফরম্যান্সের কোনও উদ্বেগ নেই।

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

তৃতীয় পক্ষ এবং প্রথম পক্ষের সমস্যা

আপনার পৃষ্ঠায় ঘটে যাওয়া লঙ্ঘন বা অবমূল্যায়নের কারণে উত্পন্ন প্রতিবেদনগুলি আপনি কনফিগার করা শেষ পয়েন্টগুলিতে প্রেরণ করা হবে। এর মধ্যে আপনার পৃষ্ঠায় চলমান তৃতীয় পক্ষের স্ক্রিপ্টগুলি দ্বারা প্রতিশ্রুতিবদ্ধ লঙ্ঘন অন্তর্ভুক্ত রয়েছে।

আপনার পৃষ্ঠায় এম্বেড করা ক্রস-উত্স আইফ্রেমে ঘটে যাওয়া লঙ্ঘন বা অবমূল্যায়নগুলি আপনার শেষ পয়েন্ট (গুলি) (কমপক্ষে ডিফল্টরূপে নয়) হিসাবে রিপোর্ট করা হবে না । একজন আইফ্রেমে তার নিজস্ব প্রতিবেদন সেট আপ করতে পারে এবং এমনকি আপনার সাইটের কাছে রিপোর্ট করতে পারে-এটি হ'ল প্রথম পক্ষের-রিপোর্টিং পরিষেবা; তবে এটি ফ্রেমযুক্ত সাইট পর্যন্ত। এছাড়াও নোট করুন যে বেশিরভাগ প্রতিবেদনগুলি কেবল তখনই উত্পন্ন হয় যদি কোনও পৃষ্ঠার নীতি লঙ্ঘিত হয় এবং আপনার পৃষ্ঠার নীতিগুলি এবং আইফ্রেমের নীতিগুলি আলাদা।

অবমূল্যায়নের সাথে উদাহরণ

ব্রাউজার সমর্থন

নীচের টেবিলটি প্রতিবেদনের এপিআই ভি 1 এর জন্য ব্রাউজার সমর্থন যোগ করে, এটি Reporting-Endpoints শিরোনাম সহ। রিপোর্টিং এপিআই ভি 0 ( Report-To হেডার) এর জন্য ব্রাউজার সমর্থন একই, একটি প্রতিবেদনের ধরণ ব্যতীত: নেটওয়ার্ক ত্রুটি লগিং নতুন রিপোর্টিং এপিআইতে সমর্থিত নয়। বিশদ জন্য মাইগ্রেশন গাইড পড়ুন।

এই টেবিলটি কেবল নতুন Reporting-Endpoints শিরোনামের সাথে report-to জন্য সহায়তার সংক্ষিপ্তসার করেছে। আপনি যদি Reporting-Endpoints স্থানান্তরিত করতে চান তবে সিএসপি রিপোর্টিং মাইগ্রেশন টিপস পড়ুন।

রিপোর্টিং এপিআই ব্যবহার করে

কোথায় রিপোর্ট পাঠানো উচিত তা স্থির করুন

আপনার দুটি বিকল্প আছে:

• বিদ্যমান প্রতিবেদন সংগ্রাহক পরিষেবায় প্রতিবেদন প্রেরণ করুন।
• আপনি নিজের তৈরি এবং পরিচালনা করেন এমন কোনও প্রতিবেদন সংগ্রাহককে প্রতিবেদন প্রেরণ করুন।

বিকল্প 1: একটি বিদ্যমান প্রতিবেদন সংগ্রাহক পরিষেবা ব্যবহার করুন

প্রতিবেদন সংগ্রাহক পরিষেবার কয়েকটি উদাহরণ হ'ল:

• রিপোর্ট-উরি
• ইউরিপোর্টস

আপনি যদি অন্যান্য সমাধানগুলি সম্পর্কে জানেন তবে আমাদের জানাতে কোনও সমস্যা খুলুন এবং আমরা এই পোস্টটি আপডেট করব!

মূল্য নির্ধারণের পাশাপাশি, প্রতিবেদন সংগ্রাহক নির্বাচন করার সময় নিম্নলিখিত বিষয়গুলি বিবেচনা করুন: 🧐

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

বিকল্প 2: আপনার নিজস্ব প্রতিবেদন সংগ্রাহক তৈরি এবং পরিচালনা করুন

আপনার নিজস্ব সার্ভার তৈরি করা যা প্রতিবেদনগুলি গ্রহণ করে তা তুচ্ছ নয়। শুরু করার জন্য, আপনি আমাদের লাইটওয়েট বয়লারপ্লেটটি কাঁটাচামচ করতে পারেন। এটি এক্সপ্রেস দিয়ে নির্মিত এবং প্রতিবেদনগুলি গ্রহণ এবং প্রদর্শন করতে পারে।

1. বয়লারপ্লেট রিপোর্ট সংগ্রাহকের দিকে যান।

2. প্রকল্পটি সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্স ক্লিক করুন।

3. আপনার এখন আপনার ক্লোন আছে! আপনি এটি নিজের উদ্দেশ্যে কাস্টমাইজ করতে পারেন।

যদি আপনি বয়লারপ্লেট ব্যবহার না করে থাকেন এবং স্ক্র্যাচ থেকে আপনার নিজস্ব সার্ভার তৈরি করছেন:

• ব্রাউজারের মাধ্যমে আপনার শেষ পয়েন্টে প্রেরিত প্রতিবেদনগুলির অনুরোধগুলি সনাক্ত করতে application/reports+json এর Content-Type সাথে POST অনুরোধগুলির জন্য পরীক্ষা করুন।
• যদি আপনার শেষ পয়েন্টটি আপনার সাইটের চেয়ে আলাদা উত্সে বাস করে তবে এটি নিশ্চিত করুন যে এটি কর্স প্রিফ্লাইটের অনুরোধগুলি সমর্থন করে।

বিকল্প 3: বিকল্প 1 এবং 2 একত্রিত করুন

আপনি কোনও নির্দিষ্ট সরবরাহকারীকে কিছু ধরণের প্রতিবেদনের যত্ন নিতে দিতে চাইতে পারেন তবে অন্যের জন্য অভ্যন্তরীণ সমাধান রাখতে পারেন।

এই ক্ষেত্রে, নিম্নলিখিত হিসাবে একাধিক শেষ পয়েন্ট সেট করুন:

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"

আপনি যদি লিগ্যাসি রিপোর্টিং এপিআই থেকে নতুন রিপোর্টিং এপিআইতে স্থানান্তরিত করছেন, তবে Reporting-Endpoints এবং Report-To উভয়ই সেট করা বোধগম্য হতে পারে। মাইগ্রেশন গাইডে বিশদ দেখুন। বিশেষত, আপনি যদি কেবল report-uri নির্দেশকের মাধ্যমে Content-Security-Policy লঙ্ঘনের জন্য প্রতিবেদন ব্যবহার করছেন তবে সিএসপি রিপোর্টিংয়ের জন্য মাইগ্রেশন পদক্ষেপগুলি পরীক্ষা করুন।

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 এন্ডপয়েন্টকে সংজ্ঞায়িত করে না, তবে এই ধরণের প্রতিবেদনগুলি প্রেরণ করা হবে না (যদিও তারা উত্পন্ন হবে)।

মান (urls)

প্রতিটি মান আপনার পছন্দের একটি ইউআরএল, যেখানে প্রতিবেদনগুলি প্রেরণ করা হবে। এখানে সেট করা ইউআরএল আপনি ধাপ 1 এ কী সিদ্ধান্ত নিয়েছেন তার উপর নির্ভর করে।

একটি শেষ পয়েন্ট ইউআরএল:

• একটি স্ল্যাশ ( / ) দিয়ে শুরু করতে হবে। আপেক্ষিক পাথ সমর্থিত নয় ।
• ক্রস-অরিজিন হতে পারে; তবে সেক্ষেত্রে শংসাপত্রগুলি প্রতিবেদনগুলি সহ প্রেরণ করা হয় না ।

উদাহরণ

Reporting-Endpoints: my-coop-endpoint="https://reports.example/coop", my-csp-endpoint="https://reports.example/csp", default="https://reports.example/default"

তারপরে আপনি উপযুক্ত নীতিতে প্রতিটি নামযুক্ত এন্ডপয়েন্ট ব্যবহার করতে পারেন, বা সমস্ত নীতিমালায় একটি একক এন্ডপয়েন্ট ব্যবহার করতে পারেন।

কোথায় শিরোনাম সেট করবেন?

নতুন প্রতিবেদনে এপিআই - এই পোস্টে আচ্ছাদিত একটি - প্রতিবেদনগুলি নথিগুলিতে স্কোপ করা হয়েছে। এর অর্থ হ'ল একটি প্রদত্ত উত্সের জন্য, বিভিন্ন নথি যেমন 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

উদাহরণ কোড

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

আপনার রিপোর্টিং সেটআপটি ডিবাগ করুন

ইচ্ছাকৃতভাবে প্রতিবেদন তৈরি

রিপোর্টিং এপিআই সেট আপ করার সময়, প্রতিবেদনগুলি উত্পন্ন হয়েছে এবং প্রত্যাশার মতো প্রেরণ করা হয়েছে কিনা তা পরীক্ষা করার জন্য আপনাকে সম্ভবত আপনার নীতিগুলি ইচ্ছাকৃতভাবে লঙ্ঘন করতে হবে। To see example code that violates policies and does other bad things that will generate reports of all types, check out the demo .

সময় বাঁচান

Reports may be sent with a delay—about a minute, which is a long time when debugging. 😴 Luckily, when debugging in Chrome, you can use the flag --short-reporting-delay to receive reports as soon as they're generated.

Run this command in your terminal to turn on this flag:

YOUR_PATH/TO/EXECUTABLE/Chrome --short-reporting-delay

Use DevTools

In Chrome, use DevTools to see the reports that have been sent or will be sent.

As of October 2021, this feature is experimental. এটি ব্যবহার করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

1. Use Chrome version 96 and newer (check by typing chrome://version in your browser)
2. Type or paste chrome://flags/#enable-experimental-web-platform-features in Chrome's URL bar.
3. Click Enabled .
4. আপনার ব্রাউজার রিস্টার্ট করুন।
5. Open Chrome DevTools.
6. In Chrome DevTools, open the Settings. Under Experiments, click Enable Reporting API panel in the Application panel .
7. Reload DevTools.
8. Reload your page. Reports generated by the page DevTools is open in will be listed in Chrome DevTools' Application panel, under Reporting API .

অবস্থা রিপোর্ট করুন

The Status column tells you if a report has been successfully sent.

Reports are removed after a while, whether or not they're successfully sent.

সমস্যা সমাধান

Are reports not generated or not sent as expected to your endpoint? Here are a few tips to troubleshoot this.

Reports are not generated

Reports that show up in DevTools have been correctly generated. If the report you expect does not show up in this list:

• Check report-to in your policies. If this is misconfigured, a report won't be generated. Head over to Edit your policies to fix this. An additional way to troubleshoot this is to check the DevTools console in Chrome: if an error pops up in the console for the violation you expected, this means your policy is probably properly configured.
• Keep in mind that only the reports that were generated for the document DevTools is open in will show up in this list. One example: if your site site1.example embeds an iframe site2.example that violates a policy and hence generates a report, this report will show up in DevTools only if you open the iframe in its own window and open DevTools for that window.

Reports are generated but not sent or not received

What if you can see a report in DevTools, but your endpoint doesn't receive it?

• Make sure to use short delays . Maybe the reason you can't see a report is because it hasn't been sent yet!

• Check your Reporting-Endpoints header configuration. If there's an issue with it, a report that has been generated correctly will not be sent. In DevTools, the report's status will remain Queued (it might jump to Pending , and then quickly back to Queued when a delivery attempt is made) in this case. Some common mistakes that may cause this:

• The endpoint is used but not configured. উদাহরণ:

 Document-Policy: document-write=?0;report-to=endpoint-1;
 Reporting-Endpoints: default="https://reports.example/default"

• The default endpoint is missing. Some reports types, such as deprecation and intervention reports, will only be sent to the endpoint named default . Read more in Configure the Reporting-Endpoints header .

• Look for issues in your policy headers syntax, such as missing quotes. বিস্তারিত দেখুন .

• Check that your endpoint can handle incoming requests.

  • Make sure that your endpoint support CORS preflight requests. If it doesn't, it can't receive reports.

  • Test your endpoint's behavior. To do so, instead of generating reports manually, you can emulate the browser by sending to your endpoint requests that look like what the browser would send. নিম্নলিখিত চালান:

  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
  

  Your endpoint should respond with a success code ( 200 or another success response code 2xx ). If it doesn't, there's an issue with its configuration.

Related reporting mechanisms

Report-Only

-Report-Only policy headers and the Reporting-Endpoints work together.

Endpoints configured in Reporting-Endpoints and specified in the report-to field of Content-Security-Policy , Cross-Origin-Embedder-Policy and Cross-Origin-Opener-Policy , will receive reports when these policies are violated.

Endpoints configured in Reporting-Endpoints can also be specified in the report-to field of Content-Security-Policy-Report-Only , Cross-Origin-Embedder-Policy-Report-Only and Cross-Origin-Opener-Policy-Report-Only . They'll also receive reports when these policies are violated.

While reports are sent in both cases, -Report-Only headers do not enforce the policies: nothing will break or actually get blocked, but you will receive reports of what would have broken or been blocked.

ReportingObserver

The ReportingObserver JavaScript API can help you observe client-side warnings.

ReportingObserver and the Reporting-Endpoints header generate reports that look the same, but they enable slightly different uses cases.

Use ReportingObserver if:

• You only want to monitor deprecations and/or browser interventions. ReportingObserver surfaces client-side warnings such as deprecations and browser interventions, but unlike Reporting-Endpoints , it doesn't capture any other types of reports such as CSP or COOP/COEP violations.
• You need to react to these violations in real-time. ReportingObserver makes it possible to attach a callback to a violation event.
• You want to attach additional information to a report to aid in debugging, via the custom callback .

Another difference is that ReportingObserver is configured only client-side: you can use it even if you have no control over server-side headers and can't set Reporting-Endpoints .

আরও পড়া

• Migration guide from Reporting API v0 to v1
• রিপোর্টিং অবজারভার
• Specification: legacy Reporting API (v0)
• Specification: new Reporting API (v1)

Hero image by Nine Koepfer / @enka80 on Unsplash , edited. Many thanks to Ian Clelland, Eiji Kitamura and Milica Mihajlija for their reviews and suggestions on this article.