feat(toolbar): Use the CSRF token in headers and cookies when using the sentry API

src/sentry/templates/sentry/toolbar/iframe.html

@@ -97,21 +97,30 @@
           return `${cookie}; domain=${domain}; path=/; max-age=31536000; SameSite=none; partitioned; secure`;
         }
 
+        function clearCookies() {
+          document.cookie.split(';').forEach(cookie => {
+            const name = cookie.split('=')[0].trim();
+            document.cookie = getCookieValue(`${name}=`, window.location.hostname);
+            document.cookie = getCookieValue(`${name}=`, regionUrl);
+          });
+        }
+
         const loginWindowMessageDispatch = {
-          'did-login': ({ cookie, csrfToken, token }) => {
-            if (cookie) {
-              document.cookie = getCookieValue(cookie, window.location.hostname);
-              log('Saved a cookie', document.cookie.indexOf(cookie) >= 0);
+          'did-login': ({ sessionCookieName, sessionCookieValue, csrfCookieName, csrfToken, token }) => {
+            if (sessionCookieName && sessionCookieValue) {
+              document.cookie = getCookieValue(`${sessionCookieName}=${sessionCookieValue}`, window.location.hostname);
+              log('Saved session cookie', document.cookie.indexOf(sessionCookieName) >= 0);
             }
-            if (csrfToken) {
+            if (csrfCookieName && csrfToken) {
               sessionStorage.setItem('csrfToken', csrfToken);
-              log('Saved a CSRF token to sessionStorage');
+              document.cookie = getCookieValue(`${csrfCookieName}=${csrfToken}`, window.location.hostname)
+              log('Saved CSRF token', document.cookie.indexOf(csrfCookieName) >= 0);
             }
             if (token) {
               localStorage.setItem('accessToken', token);
               log('Saved an accessToken to localStorage');
             }
-            if (!cookie && !token) {
+            if ((!sessionCookieValue || !csrfToken) && !token) {
               log('Unexpected: No access token found!');
             }
 
@@ -134,15 +143,13 @@
           },
 
           'request-logout': () => {
-            const cookie = document.cookie.split('=').at(0) + '=';
-            document.cookie = getCookieValue(cookie, window.location.hostname);
-            document.cookie = getCookieValue(cookie, regionUrl);
-            log('Cleared the current cookie');
+            clearCookies();
+            log('Cleared the cookies');
 
             sessionStorage.removeItem('csrfToken');
             log('Removed CSRF token from sessionStorage');
 
-            const accessToken = localStorage.removeItem('accessToken')
+            localStorage.removeItem('accessToken')
             log('Removed accessToken from localStorage');
 
             postStateMessage('stale');
@@ -163,7 +170,11 @@
             // If either of these is invalid, or both are missing, we will
             // forward the resulting 401 to the application, which will request
             // tokens be destroyed and reload the iframe in an unauth state.
-            log('Has access info', { cookie: Boolean(document.cookie), accessToken: Boolean(accessToken) });
+            log('Has access info', {
+              cookie: Boolean(document.cookie),
+              csrfToken: sessionStorage.getItem('csrfToken'),
+              accessToken: Boolean(accessToken),
+            });
 
             const url = new URL('/api/0' + path, organizationUrl);
             const initWithCreds = {
@@ -186,9 +197,7 @@
         log('Init', { referrerOrigin, state });
 
         if (state === 'logged-out') {
-          const cookie = document.cookie.split('=').at(0) + '=';
-          document.cookie = getCookieValue(cookie, window.location.hostname);
-          document.cookie = getCookieValue(cookie, regionUrl);
+          clearCookies();
         }
 
         window.addEventListener('message', handleLoginWindowMessage);
@@ -209,5 +218,5 @@
 
 {% comment %}
 No need to close `body`. If we do then middleware will inject some extra markup
-we don't need. Browsers can figure out when it missing and deal with it.
+we don't need. Browsers can figure out when it's missing and deal with it.
 {% endcomment %}

src/sentry/templates/sentry/toolbar/login-success.html

@@ -23,7 +23,8 @@ <h4>You're logged in!</h4>
     (function() {
       const orgSlug = '{{ organization_slug|escape }}';
       const delay = {{ delay_ms|escapejs }};
-      const cookie = '{{ cookie|escapejs }}';
+      const sessionCookieName = '{{ session_cookie_name|escapejs }}';
+      const sessionCookieValue = '{{ session_cookie_value|escapejs }}';
       const csrfCookieName = '{{ csrf_cookie_name|escapejs }}';
       const csrfToken = document.cookie.split(';').find(c => c.trim().startsWith(csrfCookieName + '='))?.split('=')[1] ?? '';
       const token = '{{ token|escapejs }}';
@@ -43,7 +44,9 @@ <h4>You're logged in!</h4>
         window.opener.postMessage({
           source: 'sentry-toolbar',
           message: 'did-login',
-          cookie,
+          sessionCookieName,
+          sessionCookieValue,
+          csrfCookieName,
           csrfToken,
           token,
         }, window.location.origin);

src/sentry/toolbar/views/login_success_view.py

@@ -20,7 +20,8 @@ def get(self, request: HttpRequest, organization, project_id_or_slug):
                 "organization_slug": organization.slug,
                 "delay_sec": int(delay_ms / 1000),
                 "delay_ms": delay_ms,
-                "cookie": f"{session_cookie_name}={request.COOKIES.get(session_cookie_name)}",
+                "session_cookie_name": session_cookie_name,
+                "session_cookie_value": request.COOKIES.get(session_cookie_name),
                 "csrf_cookie_name": csrf_cookie_name,
                 "token": "",
             },