Alert on attempt to use Topics API

As multiple third-party scripts might be added to a site during development, it can be difficult to see when a script is attempting to use new browser features that might have privacy consequences. Consider adding a simple alert so that scripts can be checked and/or the site Permissions-Policy set before deploying to production. The "alert" is for development purposes, and could be replaced with an analytics event if a site wants to monitor attempted use of Topics API by third parties in production. Related: h5bp#2459
dmarti · May 5, 2022 · b3e9c04 · b3e9c04
1 parent 5382f78
commit b3e9c04
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/docs/html.md b/docs/html.md
@@ -39,6 +39,20 @@ potential
 [encoding-related security issue](https://code.google.com/archive/p/doctype-mirror/wikis/ArticleUtf7.wiki)
 in Internet Explorer.
 
+### document.browsingTopics alert
+
+In some cases, a third-party script can collect browsing interest information about users
+using new experimental functionality called Topics API. The first script in the page header
+will alert you if a script is attempting to do this.  The line can be removed if your site
+is turning off Topics API with a Permissions-Policy, running without third-party scripts,
+or if you are using Topics API.
+
+The line can be changed to send an analytics event to check if third-party scripts begin trying
+to use Topics API in production.
+
+For more information, see [Google's Topics API: Rebranding FLoC Without Addressing Key 
+Privacy Issues](https://brave.com/web-standards-at-brave/7-googles-topics-api/)
+
 ### Meta Description
 
 The `description` meta tag provides a short description of the page. In some

diff --git a/src/index.html b/src/index.html
@@ -3,6 +3,7 @@
 
 <head>
   <meta charset="utf-8">
+  <script>document.browsingTopics=()=>{alert('Topics API called: check third-party scripts.'}</script>
   <title></title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">