cookiebanner: broaden resource detection via PerformanceObserver

ThirdPartyDetector previously only saw <script src> and <iframe src>
because it scanned the DOM and watched mutations. Add a single
PerformanceObserver({type:'resource', buffered:true}) that picks up
everything the browser actually loaded:

  - tracking pixels (<img>, <picture>, srcset)
  - cross-origin stylesheets and web fonts
  - fetch / XHR / sendBeacon / ping calls (SDK call-homes)
  - video, audio, embed, object media

initiatorType is mapped to six new tracker_resource_type enum values
(IMAGE, STYLESHEET, FONT, BEACON, FETCH, MEDIA) and the existing
upsert path in tracker_resources picks them up unchanged.

Closes a real gap with headless cookie scanners: most SDKs phone home
via beacons after their script is gone, and the DOM scan never saw it.

Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-05-11 10:46:11 +04:00
parent d17c8ba044
commit 2b3449de1a
9 changed files with 201 additions and 15 deletions

View File

@@ -164,6 +164,12 @@ export default function CookieBannerResourcesPage({
<Option value="ALL">{__("All types")}</Option>
<Option value="SCRIPT">{__("Script")}</Option>
<Option value="IFRAME">{__("Iframe")}</Option>
<Option value="IMAGE">{__("Image")}</Option>
<Option value="STYLESHEET">{__("Stylesheet")}</Option>
<Option value="FONT">{__("Font")}</Option>
<Option value="BEACON">{__("Beacon")}</Option>
<Option value="FETCH">{__("Fetch")}</Option>
<Option value="MEDIA">{__("Media")}</Option>
</Select>
</div>
@@ -202,7 +208,7 @@ export default function CookieBannerResourcesPage({
{__("No uncategorised resources")}
</h3>
<p className="text-txt-tertiary">
{__("All detected scripts and iframes have been categorised. New resources will appear here when detected.")}
{__("All detected resources have been categorised. New resources will appear here when detected.")}
</p>
</div>
</Card>

View File

@@ -127,6 +127,12 @@ function resourceTypeLabel(type: string, __: (s: string) => string): string {
switch (type) {
case "SCRIPT": return __("Script");
case "IFRAME": return __("Iframe");
case "IMAGE": return __("Image");
case "STYLESHEET": return __("Stylesheet");
case "FONT": return __("Font");
case "BEACON": return __("Beacon");
case "FETCH": return __("Fetch");
case "MEDIA": return __("Media");
default: return type;
}
}