saasufy-components 10.5.4 → 10.5.5

package/README.md

@@ -990,7 +990,7 @@ Logging out of Keycloak as well as of the app:
 
 **Attributes**
 
-- `logout-url`: The log out endpoint of the OAuth provider; for OpenID Connect providers this is the `end_session_endpoint`. If it is not specified, the component only deauthenticates the socket. The redirect is skipped if the user did not log in via an OAuth provider.
+- `logout-url`: The log out endpoint of the OAuth provider; for OpenID Connect providers this is the `end_session_endpoint`. If it is not specified, the component only deauthenticates the socket. The redirect is skipped if the user did not log in via an OAuth provider. It must be an `http` or `https` URL; relative paths are supported and are resolved against your app's origin.
 - `provider`: The name of the OAuth provider, as specified on the `Authentication` page of your Saasufy control panel. If it is set, the redirect only happens when the user logged in via that specific provider; this is useful when your app offers several different ways to log in.
 - `client-id`: The client ID to pass to the provider as the `client_id` query parameter. OpenID Connect providers require either this or an ID token in order to log the user out without asking them to confirm.
 - `post-logout-redirect-uri`: The URL to send the user back to once the provider has logged them out, passed as the `post_logout_redirect_uri` query parameter. It usually needs to be registered with the provider in advance. If it is not specified, the user is left on the provider's own logged out page.
@@ -1051,7 +1051,7 @@ When using an OAuth provider, the callback URL which you register with the provi
 
 - `provider` (required): The name of the provider. It must match the provider name specified on the `Authentication` page of your Saasufy control panel and also the value provided to the `oauth-link` component at the start of the OAuth flow.
 - `success-location-hash`: If authentication is successful, the browser's `location.hash` will be set to this value. It can be used to redirect the user to their dashboard, for example.
-- `success-url`: If authentication is successful, the browser's `location.href` will be set to this value. It can be used to redirect the user to their dashboard, for example.
+- `success-url`: If authentication is successful, the browser's `location.href` will be set to this value. It can be used to redirect the user to their dashboard, for example. It must be an `http` or `https` URL; relative paths are supported and are resolved against the current page.
 - `redirect-uri`: A URI to redirect the user to once OAuth is successful. This attribute may be required depending on the OAuth provider/client.
 - `extra-data`: This attribute can be used to pass additional data to the OAuth `getAccessTokenURL` endpoint. For Google OAuth, for example, an additional `redirect_uri` field is required, so it should be set using `extra-data="redirect_uri=http://localhost.com:8000/"` (substitute the URI with your own).
 - `navigate-event-path`: If authentication is successful and a path is set via this attribute, the component will emit a `navigate` event which will bubble up the component hierarchy and can be used by a parent component to perform the success redirection. This approach can be used as an alternative to `success-location-hash` or `success-url` for doing the final redirect.

package/log-out.js

@@ -20,6 +20,16 @@ class LogOut extends SocketConsumer {
       );
     }
 
+    // A javascript: or data: URL would execute when assigned to location.href.
+    if (
+      providerLogOutURL.protocol !== 'https:' &&
+      providerLogOutURL.protocol !== 'http:'
+    ) {
+      throw new Error(
+        'The logout-url attribute of log-out must be an http or https URL'
+      );
+    }
+
     let clientId = this.getAttribute('client-id');
     let postLogoutRedirectURI = this.getAttribute('post-logout-redirect-uri');
     let searchParams = providerLogOutURL.searchParams;

package/oauth-handler.js

@@ -12,7 +12,25 @@ class OAuthHandler extends SocketConsumer {
     if (successLocationHash) {
       location.hash = successLocationHash;
     } else if (successURL) {
-      location.href = successURL;
+      let resolvedURL;
+      // Resolved against the document URL so relative paths behave as they did
+      // with the plain assignment; only an absolute URL brings its own scheme.
+      try {
+        resolvedURL = new URL(successURL, location.href);
+      } catch (error) {
+        throw new Error(
+          'The success-url attribute of oauth-handler was not a valid URL'
+        );
+      }
+      if (
+        resolvedURL.protocol !== 'https:' &&
+        resolvedURL.protocol !== 'http:'
+      ) {
+        throw new Error(
+          'The success-url attribute of oauth-handler must be an http or https URL'
+        );
+      }
+      location.href = resolvedURL.href;
     } else {
       this.dispatchEvent(
         new CustomEvent('navigate', {
@@ -42,7 +60,8 @@ class OAuthHandler extends SocketConsumer {
 
     let useLocalStorage = !this.hasAttribute('use-session-storage');
     let storageKey = this.getAttribute('state-storage-key') || 'oauth.state';
-    let expectedOAuthState = (useLocalStorage ? localStorage : sessionStorage).getItem(storageKey);
+    let storage = useLocalStorage ? localStorage : sessionStorage;
+    let expectedOAuthState = storage.getItem(storageKey);
     if (!expectedOAuthState) {
       this.innerHTML = `
         <div class="error">OAuth authentication failed because the state was missing.</div>
@@ -83,6 +102,18 @@ class OAuthHandler extends SocketConsumer {
       history.replaceState({}, document.title, location.pathname);
       
       if (relevantStates.some(expectedState => expectedState === state)) {
+        // Single-use, so consumed before the exchange. Re-read rather than
+        // written back from the list captured above, which would drop a state
+        // another handler or tab added since.
+        let remainingStates = (storage.getItem(storageKey) || '')
+          .split(',')
+          .filter(existingState => existingState && existingState !== state);
+        if (remainingStates.length) {
+          storage.setItem(storageKey, remainingStates.join(','));
+        } else {
+          storage.removeItem(storageKey);
+        }
+
         try {
           await socket.invoke('log-in-oauth', { provider, data: { code, ...extraData } });
         } catch (error) {

package/oauth-link.js

@@ -11,7 +11,9 @@ class OAuthLink extends HTMLElement {
     };
 
     this.handleClickEvent = () => {
-      this.updateState();
+      // Re-asserts the stored state in case it was evicted; not regenerated,
+      // since the href was built from it at render time.
+      this.storeState();
     };
   }
 
@@ -73,33 +75,34 @@ class OAuthLink extends HTMLElement {
     viewportNode.innerHTML = itemString;
   }
 
+  // A fresh nonce per render; the handler consumes a state on use. Render only,
+  // since the href is rebuilt from the new state.
   updateState() {
     let provider = this.getAttribute('provider');
     if (!provider) {
       throw new Error('The provider attribute of oauth-link was not specified');
     }
-    let useLocalStorage = !this.hasAttribute('use-session-storage');
     let stateSize = Number(this.getAttribute('state-size') || 20);
+    this.provider = provider;
+    this.state = `${provider}-${generateRandomHexString(stateSize)}`;
+    this.storeState();
+  }
+
+  // Re-read immediately before writing so another provider's state, from
+  // another link or tab, is not dropped.
+  storeState() {
+    if (!this.state) return;
+    let useLocalStorage = !this.hasAttribute('use-session-storage');
     let storageKey = this.getAttribute('state-storage-key') || 'oauth.state';
-    
     let storage = useLocalStorage ? localStorage : sessionStorage;
     let existingState = storage.getItem(storageKey);
-    let stateList;
-    if (existingState) {
-      stateList = existingState.split(',').filter(Boolean);
-      let maxStateCount = Number(this.getAttribute('max-state-count') ?? 20);
-      if (stateList.length >= maxStateCount) {
-        stateList.pop();
-      }
-    } else {
-      stateList = []
-    }
-    if (this.provider !== provider) {
-      this.state = `${provider}-${generateRandomHexString(stateSize)}`;
-      this.provider = provider;
+    let stateList = existingState ? existingState.split(',').filter(Boolean) : [];
+    if (stateList.includes(this.state)) return;
+    let maxStateCount = Number(this.getAttribute('max-state-count') ?? 20);
+    if (stateList.length >= maxStateCount) {
+      stateList.pop();
     }
     stateList.unshift(this.state);
-
     storage.setItem(storageKey, stateList.join(','));
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "10.5.4",
+  "version": "10.5.5",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {