이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Reporting API를 사용하여 웹 애플리케이션 모니터링

Reporting API를 사용하여 보안 위반, 지원 중단된 API 호출 등을 모니터링하세요.

Maud Nalpas

일부 오류는 프로덕션에서만 발생합니다. 로컬 또는 세션 중에 표시되지 않습니다. 실제 사용자, 실제 네트워크, 실제 기기가 포함되어 있기 때문에 게임을 바꿔놓고 싶다고 했죠. Reporting API를 사용하면 다음과 같은 오류를 잡아낼 수 있습니다. 보안 위반 또는 지원 중단 및 곧 지원 중단될 API 등 엔드포인트로 전송합니다. 지정합니다.

이를 통해 HTTP 헤더를 통해 모니터링하고자 하는 내용을 선언할 수 있습니다. 브라우저에 의해 작동됩니다.

Reporting API를 설정하면 사용자가 안심하고 이러한 유형의 오류를 알 수 있으므로 이를 수정할 수 있습니다.

이 게시물에서는 이 API의 기능과 사용 방법을 다룹니다. 시작해 볼까요?

데모 및 코드

먼저 Reporting API의 실제 작동 방식을 확인하세요. Chrome 96 이상 (Chrome 베타 또는 카나리아(2021년 10월 기준)).

개요

보고서 생성부터 개발자의 보고서 액세스까지 아래 단계를 요약한 다이어그램 — </ph> 보고서 생성 및 전송 방법

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 위반 보고서, 문서 정책 위반 보고서, 지원 중단을 생성합니다. 보고서를 작성해야 합니다

최대 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를 구성할 수 있습니다. 사이트 전반에 걸쳐 발생하는 일들입니다.

보고서 유형	보고서가 생성되는 상황의 예
CSP 위반 (수준 3만 해당)	페이지 중 하나에 `Content-Security-Policy` (CSP)를 설정했지만 페이지에서 CSP에서 허용하지 않는 스크립트를 로드하려고 합니다.
COOP 위반	페이지에 `Cross-Origin-Opener-Policy`를 설정했지만 교차 출처 창에서 문서와 직접 상호작용하려고 합니다.
COEP 위반	페이지에 `Cross-Origin-Embedder-Policy`를 설정했지만 문서에 교차 출처 문서에 의해 로드되도록 선택하지 않은 교차 출처 iframe이 포함되어 있습니다.
문서 정책 위반	페이지에 `document.write` 사용을 금지하는 문서 정책이 있지만 스크립트에서 `document.write`를 호출하려고 합니다.
권한 정책 위반	페이지에 마이크 사용을 방지하는 권한 정책과 오디오 입력을 요청하는 스크립트가 있습니다.
지원 중단 경고	페이지에서 지원 중단되었거나 지원 중단될 API를 사용하고 있습니다. 직접 또는 최상위 제3자 스크립트를 통해 호출합니다.
개입	페이지에서 보안, 성능 또는 사용자 환경상의 이유로 브라우저에서 따르지 않기로 결정한 작업을 수행하려고 합니다. 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를 사용할 때 성능 문제가 거의 또는 전혀 없습니다.

보고서를 일괄적으로 전송할 가능성을 높이기 위해 보고서는 최대 1분 지연되어 전송됩니다. 이렇게 하면 사용자의 네트워크 연결을 존중하기 위해 대역폭을 절약할 수 있습니다. 특히 매우 중요합니다. 또한 브라우저에서 더 높은 우선순위를 처리 중인 경우 전송을 지연시킬 수 있습니다. 또는 사용자가 그 시간에 느리거나 혼잡한 네트워크를 사용하고 있는 경우입니다.

서드 파티 및 퍼스트 파티 문제

페이지에서 발생한 위반 또는 지원 중단으로 인해 생성된 보고서가 전송됩니다. 액세스할 수 있습니다 서드 파티 스크립트에 의해 발생한 위반도 여기에 포함됩니다. 이 문제를 해결할 수 있습니다

페이지에 삽입된 교차 출처 iframe에서 발생한 위반 또는 지원 중단은 않습니다(최소한 기본적으로는 보고되지 않음). iframe은 자체 사이트(당사자)의 보고 서비스에 보고하고 다 됐어 유틸리티가 될 수 있습니다. 또한 대부분의 보고서는 페이지 정책을 위반한 경우에만 생성됩니다. 페이지의 정책과 iframe의 정책이 다르다는 것을 기억하세요.

지원 중단 예시

</ph> 보고-엔드포인트 헤더가 페이지에 설정된 경우 페이지에서 실행 중인 서드 파티 스크립트에 의해 호출되는 지원 중단된 API가 엔드포인트에 보고됩니다. 페이지에 삽입된 iframe에서 호출된 지원 중단된 API는 엔드포인트에 보고되지 않습니다. 지원 중단 보고서는 iframe 서버가 보고 엔드포인트를 설정한 경우에만 생성되며 iframe 서버가 설정한 엔드포인트로 전송됩니다.

브라우저 지원

아래 표에는 Reporting API v1에 대한 브라우저 지원이 요약되어 있으며, Reporting-Endpoints 헤더. 브라우저의 보고서 API v0 지원 (Report-To 헤더)은 다음과 같습니다. 한 가지 보고서 유형을 제외하고는 동일합니다. 새 Reporting API에서는 네트워크 오류 로깅이 지원되지 않습니다. 자세한 내용은 이전 가이드를 참고하세요.

보고서 유형	Chrome	Chrome iOS	Safari	Firefox	에지
CSP 위반 (수준 3만 해당)*	✔ 예	✔ 예	✔ 예	✘ 아니요	✔ 예
네트워크 오류 로깅	✘ 아니요	✘ 아니요	✘ 아니요	✘ 아니요	✘ 아니요
COOP/COEP 위반	✔ 예	✘ 아니요	✔ 예	✘ 아니요	✔ 예
기타 모든 유형: 문서 정책 위반, 지원 중단, 개입, 비정상 종료	✔ 예	✘ 아니요	✘ 아니요	✘ 아니요	✔ 예

이 표에는 새로운 Reporting-Endpoints 헤더와 함께 report-to에 대한 지원만 요약되어 있습니다. Reporting-Endpoints로 이전하려면 CSP 보고 이전 도움말을 참고하세요.

Reporting API 사용

보고서를 보낼 위치 결정

다음 두 가지 옵션이 있습니다.

기존 보고서 수집기 서비스로 보고서를 전송합니다.
직접 구축 및 운영하는 보고서 수집기에 보고서를 전송합니다.

옵션 1: 기존 보고서 수집기 서비스 사용

보고서 수집기 서비스의 예는 다음과 같습니다.

다른 솔루션을 알고 있는 경우 문제를 열어 알려 주시면 이 게시물을 업데이트하겠습니다.

보고서 수집기를 선택할 때는 가격 책정 외에 다음 사항을 고려하세요. 🧐

이 수집기는 모든 보고서 유형을 지원하나요? 예를 들어 모든 보고 엔드포인트 솔루션이 COOP/COEP 보고서를 지원합니다.
애플리케이션의 URL을 제3자 보고서 수집기와 공유할 수 있나요? 브라우저가 이러한 URL에서 민감한 정보를 제거하더라도 민감한 정보가 이러한 방식으로 유출될 수 있습니다. 위험도가 높은 것으로 여겨지면 자체 보고 엔드포인트를 운영할 수 있습니다

옵션 2: 자체 보고서 수집기 구축 및 운영

보고서를 수신하는 자체 서버를 구축하는 것은 그리 간단한 일이 아닙니다. 시작하려면 경량형 상용구입니다. 익스프레스로 구축되었으며 보고서를 수신하고 표시할 수 있습니다.

상용구 보고서 수집기로 이동합니다.
수정할 리믹스를 클릭하여 프로젝트를 수정할 수 있도록 합니다.
클론이 완료되었습니다. 각자의 목적에 맞게 맞춤설정할 수 있습니다.

상용구를 사용하지 않고 자체 서버를 처음부터 빌드하는 경우:

보고서를 인식하려면 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 응답 헤더를 설정합니다. 값은 1이거나 쉼표로 구분된 일련의 값이어야 합니다. 키-값 쌍:

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

기존 Reporting API에서 새 Reporting 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 엔드포인트를 정의하지 않으면 생성되더라도 이 유형의 보고서는 전송되지 않습니다.

핵심 사항: default는 이름에도 불구하고 대체가 아닙니다. 할 수 있습니다 예를 들어 report-to my-endpoint Document-Policy로 설정하고 생략하여 my-endpoint를 Reporting-Endpoints, 위반 Document-Policy개 보고서는 생성되지만 전송되지 않습니다. 브라우저는 파일을 어디로 보내야 할지 알지 못합니다.

값 (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에서는 post — 보고서의 범위는 문서로 지정됩니다. 즉, 주어진 한 개의 원본, 다양한 문서(예: 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 API (Report-To 헤더)와는 다릅니다. '대기'를 설정할 수 있음 엔드포인트로 이동하고, 각 엔드포인트에 대한 보고서를 동일한 출처의 모든 페이지 기존 Reporting API에서 이전하는 경우 새 Reporting API로 이전하려면 이전 가이드를 확인하세요.

정책 수정

이제 Reporting-Endpoints 헤더가 구성되었으므로 report-to를 추가합니다. 명령어를 있습니다. 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

드림

경고: report-to 구문을 올바르게 만드는 것은 까다로울 수 있습니다. 모든 정책에서 동일한 헤더 구조로 되어 있습니다 정책에 따라 올바른 구문은 report-to=main-endpoint 또는 report-to main-endpoint 먼저 demo를 참조하세요.

예시 코드

이 모든 내용을 맥락에서 살펴볼 수 있도록, 아래는 Express를 사용하는 노드 서버의 예입니다. 이 글에서 다룬 모든 내용을 종합해 봅니다. 이를 통해 다양한 보고서 유형에 대한 보고서를 설정하고 결과를 표시합니다.

보고서 설정 디버그

의도적으로 보고서 생성

Reporting API를 설정할 때 정책을 확인하여 보고서가 정상적으로 생성되고 전송되는지 확인하세요. 정책을 위반하고 영향을 미칠 수 있는 기타 악의적인 행위를 하는 코드 예를 보기 위해 데모를 확인해 보세요.

시간 절약

보고서는 약 1분 정도 지연되어 발송될 수 있으며, 이는 긴 시간임 을 참조하세요. BIN 다행히 Chrome에서 디버깅할 때는 --short-reporting-delay: 보고서가 생성되는 즉시 이를 수신할 수 있습니다.

터미널에서 다음 명령어를 실행하여 이 플래그를 사용 설정합니다.

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

드림

DevTools 사용

Chrome에서 DevTools를 사용하여 전송되었거나 전송될 보고서를 확인합니다.

2021년 10월 현재, 이 기능은 실험용입니다. 사용하려면 다음 단계를 따르세요.

Chrome 버전 96 이상을 사용합니다 (브라우저에 chrome://version를 입력하여 확인).
Chrome URL 입력란에 chrome://flags/#enable-experimental-web-platform-features을(를) 입력하거나 붙여넣습니다.
사용 설정됨을 클릭합니다.
브라우저를 다시 시작합니다.
Chrome DevTools를 엽니다.
Chrome DevTools에서 설정을 엽니다. 실험 아래에서 보고서 API 사용 설정 패널 Application 패널을 엽니다.
DevTools를 새로고침합니다.
페이지를 새로고침합니다. DevTools가 열려 있는 페이지에서 생성한 보고서는 'Chrome DevTools에 나열되어 있습니다.'라는 Application 패널(Reporting API 아래)

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

보고서 목록을 표시하는 DevTools의 스크린샷 — </ph> Chrome DevTools는 페이지에서 생성된 보고서와 그 상태를 표시합니다.

보고서 상태

상태 열에서 보고서가 성공적으로 전송되었는지를 확인할 수 있습니다.

상태	설명
`Success`	브라우저에서 보고서를 전송했고 엔드포인트가 성공 코드 (`200` 또는 다른 성공 응답 코드 `2xx`)로 응답했습니다.
`Pending`	브라우저에서 현재 보고서 전송을 시도하고 있습니다.
`Queued`	보고서가 생성되었으며 현재 브라우저에서 보고서를 전송하려고 시도하고 있지 않습니다. 다음 두 가지 경우 중 하나에서 보고서가 `Queued`로 표시됩니다. <ph type="x-smartling-placeholder"> </ph> 보고서가 새로 생성되었으며 브라우저에서 추가 보고서가 도착했는지 확인한 후 전송을 시도하고 있습니다. 새로운 보고서가 아닙니다. 브라우저에서 이미 이 보고서 전송을 시도했지만 실패했으며, 대기 후 다시 시도합니다.
`MarkedForRemoval`	잠시 (`Queued`) 다시 시도한 후 브라우저에서 보고서 전송 시도를 중단했으며 곧 전송할 보고서 목록에서 삭제할 예정입니다.

보고서는 성공적으로 전송되었는지 여부와 관계없이 일정 시간이 지나면 삭제됩니다.

핵심사항: Queued 상태는 전송에 실패했는지 아직 시도되었는지 여부를 정확하게 나타내지 않으므로 항상 유용한 것은 아닙니다. 짧은 보고 지연을 사용하면 도움이 됩니다. 이 경우 보고서가 Queued으로 유지되면 전송에 실패했음을 나타낼 수 있습니다.

문제 해결

보고서가 생성되지 않거나 예상대로 엔드포인트로 전송되지 않나요? 다음은 이 문제를 해결하기 위한 몇 가지 도움말입니다.

보고서가 생성되지 않음

DevTools에 표시되는 보고서가 올바르게 생성되었습니다. 예상한 보고서가 이 목록에 표시되지 않는 경우:

정책에서 report-to을(를) 확인하세요. 잘못 구성된 경우 보고서가 생성되지 않습니다. 정책 수정으로 이동하여 해결할 수 있습니다 이 문제를 해결하기 위한 또 다른 방법은 Chrome에서 DevTools 콘솔을 확인하는 것입니다. 오류가 표시되고 해당 정책 위반이 구성되어야 합니다
DevTools가 열려 있는 문서에 대해 생성된 보고서만 이 목록에 표시됩니다. 한 가지 예: 사이트 site1.example에서 iframe을 삽입한 경우site2.example 보고서를 생성하는 경우 이 보고서는 자체 창에 iframe하고 해당 창에서 DevTools를 엽니다.

보고서가 생성되지만 전송되거나 수신되지 않음

DevTools에서 보고서를 볼 수 있지만 엔드포인트는 보고서를 수신하지 못하면 어떻게 해야 할까요?

핵심 사항: 보고서가 대역 외로 전송되어 보고서가 포함된 POST 요청은 표시되지 않습니다. 개발자 도구의 네트워크 패널에 연결됩니다.

짧은 지연 시간을 사용해야 합니다. 보고서가 보이지 않는 이유는 아직 전송되지 않았습니다.
Reporting-Endpoints 헤더 구성을 확인합니다. 문제가 있는 경우 전송되지 않습니다. DevTools에서는 보고서 상태가 Queued (전송 시도가 다음인 경우 Pending로 이동했다가 Queued로 빠르게 돌아갈 수 있음) 만든 것입니다. 이러한 문제의 일반적인 원인은 다음과 같습니다.
엔드포인트가 사용되지만 구성되지는 않습니다. 예:

코드에 오류가 있는 경우

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

문서 정책 위반 보고서는 endpoint-1에 전송해야 하지만 이 엔드포인트 이름이 다음에서 구성되지 않았습니다. Reporting-Endpoints

default 엔드포인트가 누락되었습니다. 지원 중단, 개입과 같은 일부 보고서 유형 default라는 엔드포인트로만 전송됩니다. Reporting-Endpoint 헤더 구성에서 자세히 알아보세요.
정책 헤더 구문에서 따옴표 누락과 같은 문제가 있는지 확인합니다. 세부정보 보기
엔드포인트가 수신 요청을 처리할 수 있는지 확인합니다.
- 엔드포인트가 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)로 응답해야 합니다. 표시되지 않는 경우 구성에 문제가 있는 것입니다

추가 자료

히어로 이미지: Nine Koepfer / @enka80 Unsplash, 수정됨. 이 글에 대한 리뷰와 제안에 이안 클레랜드, 키타무라 에이지, 밀리카 미하즐리야에게 감사의 말을 전합니다.

Reporting API를 사용하여 웹 애플리케이션 모니터링

데모 및 코드

개요

사용 사례 및 보고서 유형

보고서

보고서는 어떻게 표시되나요?

사용자 인증 정보 보고서

브라우저는 언제 어떻게 보고서를 전송하나요?

서드 파티 및 퍼스트 파티 문제

지원 중단 예시

브라우저 지원

Reporting API 사용

보고서를 보낼 위치 결정

옵션 1: 기존 보고서 수집기 서비스 사용

옵션 2: 자체 보고서 수집기 구축 및 운영

옵션 3: 옵션 1과 2 결합

`Reporting-Endpoints` 헤더 구성

키 (엔드포인트 이름)

값 (URL)

예

헤더 설정 위치

정책 수정

예

예시 코드

보고서 설정 디버그

의도적으로 보고서 생성

시간 절약

DevTools 사용

보고서 상태

문제 해결

보고서가 생성되지 않음

보고서가 생성되지만 전송되거나 수신되지 않음

관련 보고 메커니즘

보고서 전용

`ReportingObserver`

추가 자료

Reporting API를 사용하여 웹 애플리케이션 모니터링

데모 및 코드

개요

사용 사례 및 보고서 유형

보고서

보고서는 어떻게 표시되나요?

사용자 인증 정보 보고서

브라우저는 언제 어떻게 보고서를 전송하나요?

서드 파티 및 퍼스트 파티 문제

지원 중단 예시

브라우저 지원

Reporting API 사용

보고서를 보낼 위치 결정

옵션 1: 기존 보고서 수집기 서비스 사용

옵션 2: 자체 보고서 수집기 구축 및 운영

옵션 3: 옵션 1과 2 결합

Reporting-Endpoints 헤더 구성

키 (엔드포인트 이름)

값 (URL)

예

헤더 설정 위치

정책 수정

예

예시 코드

보고서 설정 디버그

의도적으로 보고서 생성

시간 절약

DevTools 사용

보고서 상태

문제 해결

보고서가 생성되지 않음

보고서가 생성되지만 전송되거나 수신되지 않음

관련 보고 메커니즘

보고서 전용

ReportingObserver

추가 자료

`Reporting-Endpoints` 헤더 구성

`ReportingObserver`