[DevToolbar] Update toolbar view templates #77577

ryan953 · 2024-09-16T18:27:38Z

Depends on #77214

We should update the view templates for /toolbar/:org/:proj/login-success/ and /toolbar/:org/:proj/iframe/ so that they include useful javascript to power the auth flows for the toolbar sdk.

Later we'll update things again to improve the visual style. But that's not important today.

NOTE: that the text __REFERRER__ should be replaced with the referer header from the web request object.

The template for /toolbar/:org/:proj/login-success/ should be:

<html>
  <head>
    <title>Sentry - Login Success</title>

    <!-- TODO: this should be a sentry logo -->
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  </head>
  <body>
    <div>
      <p>You are logged in!</p>
      <p>This window will automatically close after 3 seconds. If not then check the console for errors.</p>
      <button type="button" id="close-popup">Close Popup</button>
    </div>

    <script>
      (function() {
        function notifyOpener() {
          if (!window.opener) {
            return;
          }

          window.opener.postMessage({
            source: 'sentry-toolbar',
            message: 'did-login',
          }, '*');
        }

        notifyOpener();
        setTimeout(() => {
          window.close();
        }, 3_000);

        // If the popup doesn't close, we can let people try to close it manually.
        document.getElementById('close-popup').addEventListener('click', () => {
          window.close();
        });
      })();
    </script>
  </body>
</html>

The template for /toolbar/:org/:proj/iframe/ should change depending on whether the referrer domain is valid or invalid (see [DevToolbar] Guard /iframe/ & /login-success/ pages against disallowed referer origins #77214)

2.1 When the domain is invalid:

<!DOCTYPE html>
<html>
  <head>
    <title>Sentry DevToolbar iFrame - invalid referrer</title>
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  </head>
  <body>
    <script>
      (function() {
        const referrer = __REFERRER__;

        function log(...args) {
          if (true) {
            console.log('iframe:', ...args);
          }
        }

        log('Invalid Domain/Project', {referrer});

        window.parent.postMessage({
          source: 'sentry-toolbar',
          message: 'invalid-domain',
        }, referrer);
      })();
    </script>
  </body>
</html>

2.2
and when the domain is valid:

<!DOCTYPE html>
<html>
  <head>
    <title>Sentry DevToolbar iFrame - valid referrer</title>
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  </head>
  <body>
    <script>
      (function() {
        const referrer = __REFERRER__;

        function log(...args) {
          if (true) {
            console.log('iframe:', ...args);
          }
        }

        log('Init', {referrer});

        const {port1, port2} = new MessageChannel();

        const messageDispatch = {
          'log': log,
          'fetch': async (url, init) => {
            const response =  await fetch(url, {
              ...init,
              headers: {
                ...init.headers,
                // For mock/test purposes we're fetching the accessToken and injecting it
                'Authorization': `Bearer ${localStorage.getItem('accessToken')}`
              }
            });

            return {
              ok: response.ok,
              status: response.status,
              statusText: response.statusText,
              url: response.url,
              headers: Object.fromEntries(response.headers.entries()),
              text: await response.text(),
            }
          },
        };

        port1.addEventListener('message', (postMessage) => {
          log('port.onMessage', postMessage.data);

          const {$id, message} = postMessage.data;
          if (!$id) {
            return; // MessageEvent is malformed, missing $id
          }

          if (!message.$function || !(message.$function in messageDispatch)) {
            return; // No-op without a $function to call
          }

          messageDispatch[message.$function]
            .apply(undefined, message.$args || [])
            .then($result => port1.postMessage({$id, $result}))
            .catch((error) => port1.postMessage({$id, $error: error}));
        });
        port1.start();

        window.parent.postMessage({
          source: 'sentry-toolbar',
          message: 'port-connect',
        }, referrer, [port2]);
        log('Sent', {message: 'port-connect', referrer})
      })();
    </script>
  </body>
</html>

The text was updated successfully, but these errors were encountered:

Closes #77577 Updates iframe_view test coverage. Most of the commits are from branching from #77756. New commit history starts at [f4fc3aa](f4fc3aa) --------- Co-authored-by: Ryan Albrecht <ryan.albrecht@sentry.io>

This was referenced Sep 17, 2024

[DevToolbar] Guard /iframe/ & /login-success/ pages against disallowed referer origins #77214

Closed

ref(toolbar): check allowed origins in iframe view #77756

Merged

aliu39 self-assigned this Sep 23, 2024

aliu39 mentioned this issue Sep 24, 2024

feat(toolbar): update iframe and login response templates #78084

Merged

aliu39 closed this as completed in #78084 Sep 25, 2024

aliu39 closed this as completed in 16432cb Sep 25, 2024

github-actions bot locked and limited conversation to collaborators Oct 10, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DevToolbar] Update toolbar view templates #77577

[DevToolbar] Update toolbar view templates #77577

ryan953 commented Sep 16, 2024 •

edited

Loading

[DevToolbar] Update toolbar view templates #77577

[DevToolbar] Update toolbar view templates #77577

Comments

ryan953 commented Sep 16, 2024 • edited Loading

ryan953 commented Sep 16, 2024 •

edited

Loading