fix popup auth broken due to new COOP header

k-yle · bhousel · commit 07fb418eefef · 2025-07-11T15:33:31.000-04:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,11 @@ _Breaking changes, which may affect downstream projects, are marked with a_ ⚠
 
 [#xxx]: https://github.com/osmlab/osm-auth/issues/xxx
 -->
+## 3.0.0
+##### 2025-Jul-08
+* Fix authentication broken when using the `popup` method due to [security changes on 8 July 2025](https://github.com/openstreetmap/openstreetmap-website/commit/2ff4d6) ([#138], thanks [@k-yle])
+
+[#138]: https://github.com/osmlab/osm-auth/issues/138
 
 ## 2.6.0
 ##### 2025-Jan-17
diff --git a/README.md b/README.md
@@ -6,6 +6,13 @@
 Easy authentication with [OpenStreetMap](http://www.openstreetmap.org/) over [OAuth 2.0](https://oauth.net/2/).<br/>
 See also: https://wiki.openstreetmap.org/wiki/OAuth
 
+> [!IMPORTANT]
+> Due to [security changes on 8 July 2025](https://github.com/openstreetmap/openstreetmap-website/commit/2ff4d6), authentication using the `popup` mode will not work until you:
+>
+> 1. update this library to v3.0.0
+> 2. AND update the code snippet in your `land.html` file to the latest version (see [this example](https://github.com/osmlab/osm-auth/tree/master/land.html))
+
+
 Note that openstreetmap.org currently only supports OAuth2.0. [OAuth1.0 is turned off](https://github.com/openstreetmap/operations/issues/867). If you want the older version of this library that supports **OAuth 1.0a** (e.g. for a sister project that uses an older OSM-stack), use [the v1 branch](https://github.com/osmlab/osm-auth/tree/v1) and pin your software to older [release versions <2](https://github.com/osmlab/osm-auth/releases).  Going forward, the v1 branch will receive limited attention.
 
 
diff --git a/dist/osm-auth.cjs b/dist/osm-auth.cjs
@@ -22,6 +22,7 @@ __export(osm_auth_exports, {
 module.exports = __toCommonJS(osm_auth_exports);
 function osmAuth(o) {
   var oauth = {};
+  var CHANNEL_ID = "osm-api-auth-complete";
   var _store = null;
   try {
     _store = window.localStorage;
@@ -150,20 +151,12 @@ function osmAuth(o) {
         window.location = url;
       }
     } else {
-      var popupClosedWatcher = setInterval(function() {
-        if (popup.closed) {
-          var error2 = new Error("Popup was closed prematurely");
-          error2.status = "popup-closed";
-          callback(error2);
-          window.clearInterval(popupClosedWatcher);
-          delete window.authComplete;
-        }
-      }, 1e3);
       oauth.popupWindow = popup;
       popup.location = url;
     }
-    window.authComplete = function(url2) {
-      clearTimeout(popupClosedWatcher);
+    var bc = new BroadcastChannel(CHANNEL_ID);
+    bc.addEventListener("message", (event) => {
+      var url2 = event.data;
       var params2 = utilStringQs(url2.split("?")[1]);
       if (params2.state !== state) {
         var error2 = new Error("Invalid state");
@@ -172,8 +165,8 @@ function osmAuth(o) {
         return;
       }
       _getAccessToken(params2.code, pkce.code_verifier, accessTokenDone);
-      delete window.authComplete;
-    };
+      bc.close();
+    });
     function accessTokenDone(err, xhr) {
       o.done();
       if (err) {
diff --git a/dist/osm-auth.cjs.map b/dist/osm-auth.cjs.map
diff --git a/dist/osm-auth.iife.js b/dist/osm-auth.iife.js
diff --git a/dist/osm-auth.iife.js.map b/dist/osm-auth.iife.js.map
diff --git a/land.html b/land.html
@@ -2,8 +2,10 @@
 <html><head></head>
   <body>
     <script>
-      opener.authComplete(window.location.href);
-      window.close();
+      if (new URLSearchParams(location.search).has("code")) {
+        new BroadcastChannel("osm-api-auth-complete").postMessage(location.href);
+        window.close();
+      }
     </script>
   </body>
-</html>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "osm-auth",
-  "version": "2.6.0",
+  "version": "3.0.0",
   "license": "ISC",
   "repository": "github:osmlab/osm-auth",
   "description": "A usable example of JavaScript OAuth 2.0 with OpenStreetMap",
diff --git a/src/osm-auth.mjs b/src/osm-auth.mjs
@@ -21,6 +21,8 @@
 export function osmAuth(o) {
   var oauth = {};
 
+  var CHANNEL_ID = 'osm-api-auth-complete';
+
   // Mock localStorage if needed.
   // Note that accessing localStorage may throw a `SecurityError`, so wrap in a try/catch.
   var _store = null;
@@ -236,23 +238,15 @@ export function osmAuth(o) {
         window.location = url;
       }
     } else {
-      var popupClosedWatcher = setInterval(function() {
-        if (popup.closed) {
-          var error = new Error('Popup was closed prematurely');
-          error.status = 'popup-closed';
-          callback(error);
-          window.clearInterval(popupClosedWatcher);
-          delete window.authComplete;
-        }
-      }, 1000);
       oauth.popupWindow = popup;
       popup.location = url;
     }
 
     // Called by a function in the redirect URL page, in the popup window. The
     // window closes itself.
-    window.authComplete = function (url) {
-      clearTimeout(popupClosedWatcher);
+    var bc = new BroadcastChannel(CHANNEL_ID);
+    bc.addEventListener('message', (event) => {
+      var url = event.data;
       var params = utilStringQs(url.split('?')[1]);
       if (params.state !== state) {
         var error = new Error('Invalid state');
@@ -261,8 +255,8 @@ export function osmAuth(o) {
         return;
       }
       _getAccessToken(params.code, pkce.code_verifier, accessTokenDone);
-      delete window.authComplete;
-    };
+      bc.close();
+    });
 
     function accessTokenDone(err, xhr) {
       o.done();

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "osm-auth",`
`3`		`- "version": "2.6.0",`
	`3`	`+ "version": "3.0.0",`
`4`	`4`	`"license": "ISC",`
`5`	`5`	`"repository": "github:osmlab/osm-auth",`
`6`	`6`	`"description": "A usable example of JavaScript OAuth 2.0 with OpenStreetMap",`