Representative interview topic

Reporting API: How do you build controllable frontend security and deprecation observability?

FrontendHard
Offer.cc Editorial TeamPublished Updated

Question

Design a frontend Reporting API solution that collects CSP, Permissions-Policy, deprecation, and crash reports, and explain compatibility, noise control, and privacy risks.

Prompt and context

The Reporting API gives browsers a common mechanism for CSP, Permissions-Policy, Integrity-Policy, COEP, deprecation, and intervention reports. Reports can be read in-page with ReportingObserver or POSTed by the browser to a remote endpoint. The interview tests whether you can turn browser signals into reliable observability without copying user data into long-lived logs.

What the interviewer evaluates

  • Whether you distinguish the reliability boundaries of in-page observers and remote endpoints.
  • Whether you design Reporting-Endpoints, report-type routing, sampling, and deduplication.
  • Whether you handle privacy risks in URLs, user agents, and business parameters.
  • Whether you connect report-only rollout, alerts, fixes, and regression verification.

Questions to clarify first

Confirm whether the goal is security-policy migration, browser deprecation upgrades, or crash clues. Clarify browser support, cross-origin pages, retention, compliance, endpoint burst capacity, and whether raw URLs may be sent to a third party.

A 30-second answer

I would use four layers: collection, transport, processing, and governance. Start policies in report-only mode, route types through Reporting-Endpoints, use observers for immediate debugging, and use remote reports for aggregation outside the page lifecycle. The server applies rate limits, deduplication, redaction, and sampling before alerting and regression tests. Delivery is not guaranteed, so this cannot replace real error monitoring.

Step-by-step deep dive

1. Choose collection paths

ReportingObserver fits development and in-page diagnosis with types and buffered options. A remote endpoint receives application/reports+json POSTs from the user agent; it can preserve clues after a page crash and is better for production aggregation. Both paths still need browser-compatibility and loss handling.

2. Design endpoints and routing

Declare named endpoints with Reporting-Endpoints, then select destinations from CSP, COEP, or Permissions-Policy reporting directives. Route by type into security, deprecation, and reliability pipelines. Provide a default endpoint for reports such as crash and deprecation that lack a dedicated header. Validate content type and body size at ingestion.

3. Control noise and privacy

Deduplicate by site, version, report type, and error fingerprint; rate-limit each source; and remove query parameters, account identifiers, and sensitive paths before aggregation. Keep only diagnostic fields, enforce short retention, and audit access. Adjust sampling by severity and new-version deltas so one compatibility issue does not become an alert storm.

4. Close the governance loop

Establish a baseline in report-only mode before tightening policies. Correlate new deprecation reports with browser versions and release batches, then verify fixes with automated regression or WebDriver-generated test reports. Monitor endpoint success, latency, drops, and time to repair. Keep a degraded path that cannot block the page.

Example of a strong answer

I would first constrain the collection goal and data boundary. For a policy migration, I would start in report-only mode, send CSP, Permissions-Policy, and deprecation reports to a controlled endpoint via Reporting-Endpoints, and route them by type. ReportingObserver is for immediate diagnosis; production facts come from remote aggregation, with an explicit caveat that browsers do not guarantee delivery.

The server validates application/reports+json, enforces size and rate limits, and deduplicates by site, version, type, and fingerprint. It strips URL query parameters and account identifiers, keeps only a version-level user-agent dimension, and applies short retention with access audit. Alerts use severity, release deltas, and impacted pages for sampling. After a fix, regression tests confirm the report rate falls. The pipeline must not block page execution or replace frontend error and real-user monitoring.

Common mistakes

  • Using only ReportingObserver and losing clues when the page crashes.
  • Writing raw URLs, query parameters, or complete user agents into long-term logs.
  • Assuming an endpoint guarantees delivery without monitoring drops, throttling, and browser differences.
  • Treating report-only findings as blocking policy without a baseline or staged rollout.

Follow-up questions and responses

How do you choose between an in-page observer and a remote endpoint?

An observer is easy to debug and process with page code but depends on the page staying alive. A remote endpoint aggregates independently and preserves production or crash clues. They can run together, with a deduplication key preventing double counting.

How do you prevent the reporting system from leaking user information?

Apply field allowlists, URL redaction, size limits, and rate controls at ingestion. Keep version dimensions rather than complete identifiers, use short retention with encryption and audit, and restrict cross-team access.

Why might report volume suddenly spike?

Slice by release, browser, site, type, and fingerprint to separate a new regression, policy misconfiguration, bot traffic, and retries. Check endpoint throttling and sampling before escalating or rolling back a release.

Public sources

Related questions