ตรวจสอบเว็บแอปพลิเคชันด้วย Reporting API

ใช้ Reporting API เพื่อตรวจสอบการละเมิดความปลอดภัย การเรียก API ที่เลิกใช้งาน และอื่นๆ

Maud Nalpas

ข้อผิดพลาดบางอย่างจะเกิดขึ้นในเวอร์ชันที่ใช้งานจริงเท่านั้น คุณจะไม่เห็นข้อบกพร่องเหล่านี้ในเครื่องหรือระหว่างการพัฒนา เนื่องจากผู้ใช้จริง เครือข่ายจริง และอุปกรณ์จริงจะเปลี่ยนแปลงสถานการณ์ Reporting API ช่วยตรวจหาข้อผิดพลาดบางรายการ เช่น การละเมิดความปลอดภัยหรือการเรียก API ที่เลิกใช้งานและกำลังจะเลิกใช้งานในเว็บไซต์ และส่งไปยังปลายทางที่คุณระบุ

ซึ่งช่วยให้คุณประกาศสิ่งที่ต้องการตรวจสอบผ่านส่วนหัว HTTP และดำเนินการโดยเบราว์เซอร์

การตั้งค่า Reporting API จะช่วยให้คุณมั่นใจได้ว่าเมื่อผู้ใช้พบข้อผิดพลาดประเภทเหล่านี้ คุณจะทราบและแก้ไขได้

โพสต์นี้จะอธิบายสิ่งที่ API นี้ทําได้และวิธีใช้ มาเริ่มกันเลย

การสาธิตและโค้ด

ดูการทำงานของ Reporting API ได้ตั้งแต่ Chrome 96 ขึ้นไป (Chrome รุ่นเบต้าหรือ Canary ณ เดือนตุลาคม 2021)

ภาพรวม

สมมติว่าเว็บไซต์ 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, รายงานการละเมิดนโยบายเอกสาร และรายงานการเลิกใช้งานที่บันทึกปัญหาเหล่านี้

จากนั้นเบราว์เซอร์จะส่งรายงานไปยังปลายทางที่กำหนดค่าไว้สําหรับการละเมิดประเภทนี้โดยมีความล่าช้าสั้นๆ ไม่เกิน 1 นาที รายงานจะส่งนอกแบนด์โดยเบราว์เซอร์เอง (ไม่ใช่จากเซิร์ฟเวอร์หรือเว็บไซต์ของคุณ)

ปลายทางจะรับรายงานเหล่านี้

ตอนนี้คุณเข้าถึงรายงานเกี่ยวกับอุปกรณ์ปลายทางเหล่านี้และตรวจสอบสิ่งที่ผิดพลาดได้แล้ว คุณพร้อมเริ่มแก้ปัญหาที่ส่งผลกระทบต่อผู้ใช้แล้ว

รายงานตัวอย่าง

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

กรณีการใช้งานและประเภทรายงาน

คุณกําหนดค่า Reporting API เพื่อช่วยตรวจสอบคําเตือนหรือปัญหาที่น่าสนใจหลายประเภทที่เกิดขึ้นทั่วทั้งเว็บไซต์ได้ ดังนี้

รายงาน

รายงานมีลักษณะอย่างไร

เบราว์เซอร์จะส่งรายงานไปยังปลายทางที่คุณกําหนดค่าไว้ โดยจะส่งคําขอดังต่อไปนี้

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

ข้อมูลที่คุณดูได้ในรายงานแต่ละฉบับมีดังนี้

รายงานที่มีข้อมูลเข้าสู่ระบบ

ปลายทางการรายงานที่มีต้นทางเดียวกันกับหน้าที่สร้างรายงานจะได้รับข้อมูลเข้าสู่ระบบ (คุกกี้) ในคําขอที่มีรายงาน

ข้อมูลเข้าสู่ระบบอาจให้บริบทเพิ่มเติมที่เป็นประโยชน์เกี่ยวกับรายงาน เช่น บัญชีของผู้ใช้รายหนึ่งทริกเกอร์ข้อผิดพลาดอย่างต่อเนื่องหรือไม่ หรือลําดับการดําเนินการบางอย่างในหน้าอื่นๆ ทริกเกอร์รายงานในหน้านี้หรือไม่

เบราว์เซอร์จะส่งรายงานเมื่อใดและอย่างไร

รายงานจะส่งนอกแบนด์จากเว็บไซต์: เบราว์เซอร์จะควบคุมเวลาส่งรายงานไปยังอุปกรณ์ปลายทางที่กําหนดค่าไว้ นอกจากนี้ คุณยังควบคุมเวลาที่เบราว์เซอร์ส่งรายงานไม่ได้ เนื่องจากเบราว์เซอร์จะบันทึก จัดคิว และส่งรายงานโดยอัตโนมัติในเวลาที่เหมาะสม

ซึ่งหมายความว่าข้อกังวลด้านประสิทธิภาพแทบจะไม่มีเลยเมื่อใช้ Reporting API

ระบบจะส่งรายงานโดยมีความล่าช้าสูงสุด 1 นาที เพื่อเพิ่มโอกาสในการส่งรายงานเป็นกลุ่ม วิธีนี้จะช่วยประหยัดแบนด์วิดท์เพื่อไม่ให้รบกวนการเชื่อมต่อเครือข่ายของผู้ใช้ ซึ่งสำคัญอย่างยิ่งบนอุปกรณ์เคลื่อนที่ นอกจากนี้ เบราว์เซอร์ยังอาจเลื่อนเวลาการแสดงผลหากกำลังประมวลผลงานที่มีความสำคัญมากกว่า หรือหากผู้ใช้ใช้เครือข่ายที่ช้าและ/หรือแออัดอยู่ในขณะนั้น

ปัญหาของบุคคลที่สามและบุคคลที่หนึ่ง

ระบบจะส่งรายงานที่สร้างขึ้นเนื่องจากการละเมิดหรือการเลิกใช้งานที่เกิดขึ้นในหน้าเว็บของคุณไปยังปลายทางที่คุณกําหนดค่าไว้ ซึ่งรวมถึงการละเมิดที่เกิดจากสคริปต์ของบุคคลที่สามที่ทำงานอยู่ในหน้าเว็บของคุณ

การละเมิดหรือการเลิกใช้งานที่เกิดขึ้นใน iframe ข้ามแหล่งที่มาที่ฝังอยู่ในหน้าเว็บจะไม่ได้รับการรายงานไปยังปลายทาง (อย่างน้อยก็ไม่ใช่โดยค่าเริ่มต้น) เฟรม iframe อาจตั้งค่าการรายงานของตนเองและรายงานไปยังบริการการรายงานของเว็บไซต์ (นั่นคือบริการของบุคคลที่หนึ่ง) แต่ทั้งนี้ขึ้นอยู่กับเว็บไซต์ที่ฝังเฟรม นอกจากนี้ โปรดทราบว่าระบบจะสร้างรายงานส่วนใหญ่ก็ต่อเมื่อมีการละเมิดนโยบายของหน้าเว็บเท่านั้น และนโยบายของหน้าเว็บและนโยบายของ iframe นั้นแตกต่างกัน

ตัวอย่างการเลิกใช้งาน

การสนับสนุนเบราว์เซอร์

ตารางด้านล่างแสดงข้อมูลสรุปการรองรับเบราว์เซอร์สําหรับ Reporting API v1 ที่มีส่วนหัว Reporting-Endpoints การรองรับเบราว์เซอร์สําหรับ Reporting API v0 (ส่วนหัว Report-To) จะยังคงเหมือนเดิม ยกเว้นรายงานประเภทเดียวที่ Reporting API เวอร์ชันใหม่ไม่รองรับ ซึ่งก็คือการบันทึกข้อผิดพลาดของเครือข่าย อ่านรายละเอียดได้จากคำแนะนำในการย้ายข้อมูล

ตารางนี้สรุปเฉพาะการรองรับ report-to ที่มีส่วนหัว Reporting-Endpoints ใหม่เท่านั้น อ่านเคล็ดลับการย้ายข้อมูลการรายงาน CSP หากต้องการย้ายข้อมูลไปยัง Reporting-Endpoints

การใช้ Reporting API

เลือกปลายทางที่จะส่งรายงาน

คุณมี 2 ตัวเลือกต่อไปนี้

• ส่งรายงานไปยังบริการรวบรวมรายงานที่มีอยู่
• ส่งรายงานไปยังเครื่องมือรวบรวมข้อมูลการรายงานที่คุณสร้างและดําเนินการเอง

ตัวเลือกที่ 1: ใช้บริการรวบรวมรายงานที่มีอยู่

ตัวอย่างบริการรวบรวมรายงาน ได้แก่

• report-uri
• uriports

หากทราบวิธีแก้ปัญหาอื่นๆ โปรดเปิดปัญหาเพื่อแจ้งให้เราทราบ แล้วเราจะอัปเดตโพสต์นี้

นอกเหนือจากราคาแล้ว ให้พิจารณาประเด็นต่อไปนี้เมื่อเลือกเครื่องมือรวบรวมรายงาน 🧐

• ตัวรวบรวมนี้รองรับรายงานทุกประเภทไหม ตัวอย่างเช่น โซลูชันปลายทางการรายงานบางรายการไม่รองรับรายงาน COOP/COEP
• คุณสะดวกใจที่จะแชร์ URL ของแอปพลิเคชันกับเครื่องมือรวบรวมรายงานของบุคคลที่สามไหม แม้ว่าเบราว์เซอร์จะนําข้อมูลที่ละเอียดอ่อนออกจาก URL เหล่านี้ แต่ข้อมูลที่ละเอียดอ่อนก็อาจรั่วไหลด้วยวิธีนี้ หากฟังดูมีความเสี่ยงเกินไปสําหรับแอปพลิเคชัน ให้ใช้ปลายทางการรายงานของคุณเอง

ตัวเลือกที่ 2: สร้างและใช้งานเครื่องมือรวบรวมรายงานของคุณเอง

การสร้างเซิร์ฟเวอร์ของคุณเองซึ่งจะรับรายงานนั้นไม่ใช่เรื่องง่าย หากต้องการเริ่มต้นใช้งาน ให้ฟอร์กไฟล์ต้นฉบับแบบเบาของเรา ซึ่งสร้างขึ้นด้วย Express และสามารถรับและแสดงรายงานได้

1. ไปที่เครื่องมือรวบรวมรายงานแบบทั่วไป

2. คลิกรีมิกซ์เพื่อแก้ไขเพื่อให้โปรเจ็กต์แก้ไขได้

3. ตอนนี้คุณก็มีข้อมูลโคลนแล้ว คุณปรับแต่งเพื่อวัตถุประสงค์ของคุณเองได้

หากคุณไม่ได้ใช้ไฟล์ต้นฉบับและสร้างเซิร์ฟเวอร์ของคุณเองตั้งแต่ต้น ให้ทำดังนี้

• ตรวจสอบคําขอ POST ที่มี Content-Type เป็น application/reports+json เพื่อจดจํารายงานคำขอที่เบราว์เซอร์ส่งไปยังปลายทาง
• หากปลายทางอยู่ในต้นทางอื่นที่ไม่ใช่เว็บไซต์ของคุณ ให้ตรวจสอบว่าปลายทางรองรับคำขอ CORS ก่อนเข้าสู่โหมดเที่ยวบิน

ตัวเลือกที่ 3: รวมตัวเลือกที่ 1 และ 2

คุณอาจต้องให้ผู้ให้บริการบางรายดูแลรายงานบางประเภท แต่มีโซลูชันสำหรับรายงานประเภทอื่นๆ ดำเนินการเอง

ในกรณีนี้ ให้ตั้งค่าปลายทางหลายรายการดังนี้

Reporting-Endpoints: endpoint-1="https://reports-collector.example", endpoint-2="https://my-custom-endpoint.example"

กำหนดค่าส่วนหัว Reporting-Endpoints

ตั้งค่าส่วนหัวการตอบกลับ Reporting-Endpoints ค่าต้องเป็นคู่คีย์-ค่า 1 รายการหรือชุดที่คั่นด้วยคอมมา ดังนี้

Reporting-Endpoints: main-endpoint="https://reports.example/main", default="https://reports.example/default"

หากคุณจะย้ายข้อมูลจาก Reporting API เดิมไปยัง Reporting API ใหม่ คุณอาจต้องตั้งค่า Reporting-Endpoints และ Report-To ทั้ง 2 รายการ ดูรายละเอียดได้ในคำแนะนำในการย้ายข้อมูล โดยเฉพาะอย่างยิ่ง หากคุณใช้การรายงานการละเมิดContent-Security-Policyผ่านคำสั่ง report-uri เท่านั้น โปรดดูขั้นตอนการย้ายข้อมูลสำหรับการรายงาน 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"

จากนั้นคุณจะใช้ปลายทางที่มีชื่อแต่ละรายการในนโยบายที่เหมาะสม หรือใช้ปลายทางเดียวในนโยบายทั้งหมดก็ได้

ตั้งค่าส่วนหัวที่ใด

ใน Reporting API เวอร์ชันใหม่ ซึ่งเป็นเวอร์ชันที่กล่าวถึงในโพสต์นี้ รายงานจะมีขอบเขตเป็นเอกสาร ซึ่งหมายความว่าเอกสารต่างๆ เช่น site.example/page1 และ site.example/page2 สามารถส่งรายงานไปยังปลายทางที่แตกต่างกันได้สำหรับต้นทางหนึ่งๆ

หากต้องการรับรายงานการละเมิดหรือการเลิกใช้งานที่เกิดขึ้นในหน้าใดก็ได้ของเว็บไซต์ ให้ตั้งค่าส่วนหัวเป็นมิดเดิลแวร์ในการตอบกลับทั้งหมด

ตัวอย่างใน Express

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

โค้ดตัวอย่าง

หากต้องการดูทั้งหมดนี้ในบริบท ด้านล่างนี้คือตัวอย่างเซิร์ฟเวอร์ Node ที่ใช้ Express และรวมชิ้นส่วนทั้งหมดที่กล่าวถึงในบทความนี้เข้าด้วยกัน โดยจะแสดงวิธีกำหนดค่าการรายงานสําหรับรายงานประเภทต่างๆ และแสดงผลลัพธ์

แก้ไขข้อบกพร่องในการตั้งค่าการรายงาน

สร้างรายงานโดยเจตนา

เมื่อตั้งค่า Reporting API คุณอาจต้องจงใจละเมิดนโยบายเพื่อตรวจสอบว่าระบบสร้างและส่งรายงานตามที่คาดไว้หรือไม่ หากต้องการดูตัวอย่างโค้ดที่ละเมิดนโยบายและทําสิ่งอื่นๆ ที่ไม่ดีซึ่งจะสร้างรายงานทุกประเภท ให้ดูเดโม

ประหยัดเวลา

ระบบอาจส่งรายงานล่าช้าประมาณ 1 นาที ซึ่งถือว่านานเมื่อแก้ไขข้อบกพร่อง 😴 แต่โชคดีที่เมื่อแก้ไขข้อบกพร่องใน Chrome คุณสามารถใช้ Flag --short-reporting-delay เพื่อรับรายงานทันทีที่สร้างขึ้น

เรียกใช้คําสั่งนี้ในเทอร์มินัลเพื่อเปิดใช้ Flag นี้

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

ใช้เครื่องมือสำหรับนักพัฒนาเว็บ

ใน Chrome ให้ใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อดูรายงานที่ส่งหรือจะส่ง

ฟีเจอร์นี้อยู่ในขั้นทดลองตั้งแต่เดือนตุลาคม 2021 หากต้องการใช้ฟีเจอร์นี้ ให้ทำตามขั้นตอนต่อไปนี้

1. ใช้ Chrome เวอร์ชัน 96 ขึ้นไป (ตรวจสอบโดยพิมพ์ chrome://version ในเบราว์เซอร์)
2. พิมพ์หรือวาง chrome://flags/#enable-experimental-web-platform-features ในแถบ URL ของ Chrome
3. คลิกเปิดใช้
4. รีสตาร์ทเบราว์เซอร์
5. เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
6. เปิดการตั้งค่าในเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome ในส่วนการทดสอบ ให้คลิกเปิดใช้แผง Reporting API ในแผงแอปพลิเคชัน
7. โหลดเครื่องมือสำหรับนักพัฒนาเว็บซ้ำ
8. โหลดหน้าเว็บซ้ำ รายงานที่สร้างขึ้นจากหน้าเว็บที่เครื่องมือสำหรับนักพัฒนาเว็บเปิดอยู่จะแสดงในแผงแอปพลิเคชันของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ในส่วน Reporting API

รายงานสถานะ

คอลัมน์สถานะจะแจ้งให้ทราบว่ารายงานส่งสำเร็จหรือไม่

ระบบจะนำรายงานออกหลังจากผ่านไประยะหนึ่ง ไม่ว่าจะส่งรายงานสำเร็จหรือไม่ก็ตาม

การแก้ปัญหา

ระบบไม่สร้างหรือส่งรายงานไปยังอุปกรณ์ปลายทางตามที่คาดไว้ใช่ไหม เคล็ดลับในการแก้ปัญหามีดังนี้

ระบบไม่สร้างรายงาน

รายงานที่แสดงในเครื่องมือสําหรับนักพัฒนาเว็บสร้างขึ้นอย่างถูกต้อง หากรายงานที่คุณต้องการไม่ปรากฏในรายการนี้ ให้ทำดังนี้

• ตรวจสอบ report-to ในนโยบาย หากกําหนดค่าไม่ถูกต้อง ระบบจะไม่สร้างรายงาน โปรดไปที่แก้ไขนโยบายเพื่อแก้ไขปัญหานี้ อีกวิธีในการแก้ปัญหานี้คือการตรวจสอบคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome หากข้อผิดพลาดปรากฏขึ้นในคอนโซลสำหรับการละเมิดที่คุณคาดไว้ แสดงว่านโยบายอาจได้รับการกําหนดค่าอย่างถูกต้อง
• โปรดทราบว่าเฉพาะรายงานที่สร้างสําหรับเอกสารที่เครื่องมือสํารวจเว็บเปิดอยู่เท่านั้นที่จะปรากฏในรายการนี้ ตัวอย่างหนึ่งคือ หากเว็บไซต์ของคุณsite1.exampleฝัง iframe site2.example ที่ละเมิดนโยบายและสร้างรายงานขึ้นมา รายงานนี้จะปรากฏในเครื่องมือสำหรับนักพัฒนาเว็บก็ต่อเมื่อคุณเปิด iframe ในหน้าต่างของตัวเองและเปิดเครื่องมือสำหรับนักพัฒนาเว็บสําหรับหน้าต่างนั้น

ระบบสร้างรายงานแล้วแต่ไม่ได้ส่งหรือไม่ได้รับรายงาน

จะเกิดอะไรขึ้นหากคุณเห็นรายงานในเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ แต่ปลายทางไม่ได้รับการรายงาน

• โปรดใช้การหน่วงเวลาสั้นๆ สาเหตุที่คุณไม่เห็นรายงานอาจเป็นเพราะยังไม่มีการส่งรายงาน

• ตรวจสอบการกำหนดค่าส่วนหัว Reporting-Endpoints หากมีปัญหา ระบบจะไม่ส่งรายงานที่สร้างขึ้นอย่างถูกต้อง ในกรณีนี้ สถานะของรายงานในเครื่องมือสำหรับนักพัฒนาเว็บจะยังคงเป็น Queued (อาจเปลี่ยนเป็น Pending แล้วกลับไปเป็น Queued อย่างรวดเร็วเมื่อมีการพยายามนำส่ง) ข้อผิดพลาดที่พบบ่อยซึ่งอาจทำให้เกิดปัญหานี้ ได้แก่

• มีการใช้ปลายทางแต่ไม่ได้กําหนดค่า ตัวอย่าง

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

• ไม่มีปลายทาง default ระบบจะส่งรายงานบางประเภท เช่น รายงานการเลิกใช้งานและการแทรกแซง ไปยังปลายทางที่มีชื่อว่า default เท่านั้น อ่านเพิ่มเติมในกําหนดค่าส่วนหัว Reporting-Endpoints

• มองหาปัญหาในไวยากรณ์ส่วนหัวของนโยบาย เช่น ไม่มีเครื่องหมายคำพูด ดูรายละเอียด

• ตรวจสอบว่าปลายทางสามารถจัดการคําขอขาเข้าได้

  • ตรวจสอบว่าปลายทางรองรับคำขอ 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 และระบุไว้ในช่อง report-to ของ Content-Security-Policy, Cross-Origin-Embedder-Policy และ Cross-Origin-Opener-Policy จะได้รับรายงานเมื่อมีการละเมิดนโยบายเหล่านี้

คุณยังระบุปลายทางที่กําหนดค่าใน Reporting-Endpoints ได้ในช่อง report-to ของ Content-Security-Policy-Report-Only, Cross-Origin-Embedder-Policy-Report-Only และ Cross-Origin-Opener-Policy-Report-Only นอกจากนี้ ผู้ดูแลระบบยังจะได้รับรายงานเมื่อมีการละเมิดนโยบายเหล่านี้ด้วย

แม้ว่าระบบจะส่งรายงานในทั้ง 2 กรณี แต่ส่วนหัว -Report-Only จะไม่บังคับใช้นโยบาย: จะไม่มีสิ่งใดขัดข้องหรือถูกบล็อก แต่คุณจะได้รับรายงานเกี่ยวกับสิ่งที่ควรจะขัดข้องหรือถูกบล็อก

ReportingObserver

ReportingObserver JavaScript API ช่วยให้คุณสังเกตเห็นคำเตือนฝั่งไคลเอ็นต์ได้

ส่วนส่วนหัว ReportingObserver และ Reporting-Endpoints จะสร้างรายงานที่ดูเหมือนกัน แต่มีกรณีการใช้งานที่แตกต่างกันเล็กน้อย

ใช้ ReportingObserver ในกรณีต่อไปนี้

• คุณต้องการติดตามการเลิกใช้งานและ/หรือการแทรกแซงเบราว์เซอร์เท่านั้น ReportingObserver จะแสดงคำเตือนฝั่งไคลเอ็นต์ เช่น การเลิกใช้งานและการแทรกแซงเบราว์เซอร์ แต่จะไม่แสดงรายงานประเภทอื่นๆ เช่น การละเมิด CSP หรือ COOP/COEP ซึ่งต่างจาก Reporting-Endpoints
• คุณต้องดำเนินการกับกรณีการละเมิดเหล่านี้แบบเรียลไทม์ ReportingObserver ช่วยให้คุณแนบการเรียกกลับกับเหตุการณ์การละเมิดได้
• คุณต้องการแนบข้อมูลเพิ่มเติมในรายงานเพื่อช่วยในการแก้ไขข้อบกพร่องผ่านการเรียกกลับที่กําหนดเอง

อีกความแตกต่างหนึ่งคือ ReportingObserver จะกําหนดค่าได้เฉพาะฝั่งไคลเอ็นต์เท่านั้น คุณจึงใช้ ReportingObserver ได้แม้ว่าจะควบคุมส่วนหัวฝั่งเซิร์ฟเวอร์ไม่ได้และไม่สามารถตั้งค่า Reporting-Endpoints ได้

อ่านเพิ่มเติม

• คู่มือการย้ายข้อมูลจาก Reporting API v0 ไปยัง v1
• ReportingObserver
• ข้อกําหนด: Reporting API เดิม (v0)
• ข้อกําหนด: Reporting API เวอร์ชันใหม่ (v1)

รูปภาพหลักโดย Nine Koepfer / @enka80 จาก Unsplash ผ่านการแก้ไข ขอขอบคุณ Ian Clelland, Eiji Kitamura และ Milica Mihajlija ที่ให้การตรวจสอบและคำแนะนำเกี่ยวกับบทความนี้