shadcn.io is not affiliated with official shadcn/ui
Content Security Policy Violations Lanes Block for Ark UI
Four directive lanes of policy reports over 24 hours with ticks that grow where reports burst, a pin on the post-deploy burst, a chosen lane's blocked sources in a table and a switch that hides inline sources.
Installation
Overview
See when a policy started blocking things, and what, with this violations panel for React with Ark UI. It is Policyward, a content-security-policy reporter. In a hairline frame with a plus mark on each corner, four directive lanes (script-src, img-src, style-src, connect-src) cover 24 hours in ten-minute steps; every step with reports is a tick, taller where reports burst, on one log scale. A diamond marks the burst after the 14:03 deploy and selects its lane. The lanes are one radio group, and the chosen lane lists the sources it blocked: host, inline or eval, pages affected, reports and first seen. A Switch hides inline sources and the counts, ticks and rows re-derive. Guides draw the frame and its bands; the entrance is CSS only. For teams rolling out or tightening a content security policy.
FAQ
How do I load my own reports?
Edit LANES (sources with counts, pages, first seen and kind) and BURSTS (the step, count and source of each burst). The per-step ticks are spread from the totals by a fixed pseudo-random run, so lane totals, the table and the ticks always agree.
What does Hide inline do?
It removes sources of kind inline from the table, the lane counts and the ticks. The table always holds six rows; a lane left with nothing says so in its first row.
How do I use it with a keyboard?
The lanes are a radio group: Tab enters it and the arrow keys move between lanes. The diamond is a button that jumps to the burst's lane. A polite status line reads the lane or the burst.