fix(ui): Circumvent ad blockers for Sentry #149

fisprak · 2022-06-28T10:55:19Z

There are two parts: tunnel option in our Sentry client and the tunnel request handler itself.

`tunnel` option

Sentry client POSTs requests to the specified endpoint which forwards requests to our Sentry DSN.

Tunnel request handler

Request handler is a kind of web app that is deployed to Cloudflare Workers under Swim account. It validates the request, sends request to Sentry, and returns the response from Sentry.

It handles and reports errors to the same Sentry project with logger = EdgeWorker and app = sentry-tunnel tags to filter issues. Toucan-js is used instead of @sentry/node because Sentry client doesn't work out-of-the-box in Workers environment.

Problems

User Feedback Widget is still blocked. tunnel option doesn't change how Sentry.showReportDialog works. More detailed issue.

Notion link: https://www.notion.so/exsphere/Circumvent-ad-blockers-for-Sentry-49da2f19c87644ddb886f5cb6dab378c

Checklist

Preview deployment works (visit the Cloudflare preview URL)
Create a private repo with CF Worker under swim-io organization. Link to a repo.
Deploy worker Swim account
Configure Cloudflare to proxy requests from tunnel.swim.io to a published CF Worker in Workers -> Triggers -> Routes.
Github project and label have been assigned
Docs are added: https://github.com/swim-io/cf-sentry-tunnel/blob/main/README.md
Handle exceptions in the worker itself. Example.
~~Circumvent ad blockers for User Feedback Widget. Too much work. Here's the Notion link if we decide to fix it.~~

I've created a CF Worker based on the [example from Sentry][1] and deployed it under my own account. To-do: * Test it on preview * Create a private repo with CF Worker under `swim-io` organization * Deploy worker * Configure Cloudflare to proxy requests from `swim.io/tunnel` to a published CF Worker. Probably, via Page Rules or DNS. Notion link: https://www.notion.so/exsphere/Circumvent-ad-blockers- for-Sentry-49da2f19c87644ddb886f5cb6dab378c [1]: https://github.com/getsentry/examples/blob/ c098c2bd97fbb15351a5206df41c4aff959b3b0a/tunneling/nextjs/pages/api/tunnel.js#L11-L38

cloudflare-workers-and-pages · 2022-06-28T11:03:21Z

Deploying with Cloudflare Pages

Latest commit:	`565b223`
Status:	✅ Deploy successful!
Preview URL:	https://6f557a84.swim-ui.pages.dev
Branch Preview URL:	https://ui-tunnel-sentry-via-cf-work.swim-ui.pages.dev

View logs

github-actions · 2022-06-28T11:04:12Z

✨ Deployment complete! Take a peek over at https://cf947e38.ui-storybook.pages.dev

arvakr · 2022-06-29T13:46:05Z

@fisprak Is this supposed to work on the preview deployment right now?

fisprak · 2022-06-29T14:07:06Z

@fisprak Is this supposed to work on the preview deployment right now?

No, the last version with swim.io/tunnel doesn't work.

@arvakr The previous version works: https://70dbea0a.swim-ui.pages.dev/

…y-via-cf-worker

POST https://swim.io/tunnel responds with 405 for the reason unknown to me. DNS record for tunnel.swim.io is configured on Triggers page of CF Worker: https://dash.cloudflare.com/?to=/:account/workers/services/view/cf-sentry-tunnel/production/triggers

apps/ui/src/errors/sentry.ts

fisprak · 2022-07-01T19:17:01Z

Cool, it actually works.

Issues reported with runtime changes to JS values:

But fails to load window that allows to submit bug report.

Loading failed for the <script> with source “https://o975678.ingest.sentry.io/api/embed/error-page/?dsn=https://a3c69eb103bd4e3284be7403b7e6b5a1@o975678.ingest.sentry.io/5931913&eventId=b6728ca161584d2da97791c3b9dea367&name=Anonymous&email=anonymous%40example.org”. swap:1:1

arvakr · 2022-07-01T20:30:33Z

Why would that script not load? It has nothing to do with the tunnel. Just blocked by uBlock?

Apart from that, this PR is good to go right?

fisprak · 2022-07-04T20:10:57Z

Why would that script not load? It has nothing to do with the tunnel. Just blocked by uBlock?

Yes, just blocked by EasyPrivacy list for uBlock.

Apart from that, this PR is good to go right?

To-do

Handle exceptions in the worker itself. Example.
Circumvent ad blockers for User Feedback Wideget

fisprak · 2022-07-05T16:27:17Z

I've commented about User Feedback Widget issue in getsentry/sentry-javascript#4679 (comment).

fisprak · 2022-07-05T20:00:27Z

Not sure if it's correct to host User Feedback Widget by ourselves as it's generated by Sentry backend in runtime.

Options:

host by ourselves anyway
tunnel requests for the widget

arvakr · 2022-07-06T01:26:38Z

Let's tunnel if possible, otherwise try hosting ourselves

fisprak · 2022-07-06T13:02:04Z

Let's tunnel if possible, otherwise try hosting ourselves

Sounds good. I also prefer tunneling and using actual widget from Sentry.

fisprak · 2022-07-15T17:57:07Z

Oh, my... Sentry rejects Crash Reports (User Feedback Widget) requests because of the CSRF token validation. Only when these requests are made from Cloudflare Workers or the browser directly. I'll deploy a simplest reverse proxy and finally be done with this issue...

fetch('https://sentry.io/api/embed/error-page/?dsn=https://a3c69eb103bd4e3284be7403b7e6b5a1@o975678.ingest.sentry.io/5931913&eventId=59b62d67a567451288c7a22acbf6009e&name=Anonymous&email=anonymous%40example.org', {
    mode: "cors",
    credentials: "include",
    method: 'POST',
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, HEAD, POST, OPTIONS",
      "Access-Control-Max-Age": "1000",
      "Origin": "https://swim.io",
      "Referrer": "https://swim.io",
    },
    body: new URLSearchParams({
        'name': 'Anonymous',
        'email': 'anonymous@example.org',
        'comments': 'Test user feedback widget from Brave with Shields Up'
    })
}).then(async response => console.log(await response.text()));

Response:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="robots" content="NONE,NOARCHIVE">
        <link href="https://s1.sentry-cdn.com/_static/05d182e044523dd89df35d86465ef49d/sentry/images/favicon.ico" rel="shortcut icon" type="image/png"/>
        <link href="https://s1.sentry-cdn.com/_static/dist/sentry/entrypoints/sentry.css" rel="stylesheet" type="text/css" />

        <title>CSRF Verification Failed | Sentry</title>

        <style type="text/css">
          header {
            padding: 40px 0;
            font-size: 15px;
            margin-bottom: 40px;
          }
          .container {
            max-width: 1040px;
          }
        </style>

    </head>

    <body>


        <header>
            <div class="container">
                <div class="pull-left">
                    <a href="/" id="logo"><img src="https://s1.sentry-cdn.com/_static/05d182e044523dd89df35d86465ef49d/getsentry/images/logo.png" /></a>
                </div>
            </div>
        </header>

        <section id="content">

            <div class="container">
                <div class="page-header">
                    <h2>CSRF Verification Failed</h2>
                </div>

                <p>A required security token was not found or was invalid.</p>

                <p>If you're continually seeing this issue, try the following:</p>

                <ol>
                  <li>Clear cookies (at least for Sentry's domain).</li>
                  <li>Reload the page you're trying to submit (don't re-submit data).</li>
                  <li>Re-enter the information, and submit the form again.</li>
                </ol>

                
                  <p>You are seeing this message because Sentry requires a 'Referer
                   header' to be sent by your Web browser, but none was sent. This header is
                   required for security reasons, to ensure that your browser is not being
                   hijacked by third parties.</p>

                  <p>If you have configured your browser to disable 'Referer' headers, please
                   re-enable them, at least for this site, or for HTTPS connections, or for
                   'same-origin' requests.</p>
                

                <p>Read more about <a href="https://en.wikipedia.org/wiki/Cross-site_request_forgery">CSRF on Wikipedia</a>.</p>

                <div class="page-header">
                    <h3>System Status</h3>
                </div>

                <p><strong><span id="official-system-status"></span></strong></p>

                <p>If our status page says we're up but something is clearly wrong, <a href="mailto:support@sentry.io">let us know</a> what you're seeing.</p>

                <script nonce="4a24d9d3945845ea89b27f5580bd5465" src="https://statuspage-production.s3.amazonaws.com/se.js" type="text/javascript"></script>
                <script nonce="4a24d9d3945845ea89b27f5580bd5465" type="text/javascript">window.fetchStatusPage({
                    pageId: 't687h3m0nh65',
                    renderTo: '#official-system-status'
                  });</script>
            </div>

        </section>
    </body>
</html>

While the same request to sentry.io works well.

$ curl 'https://sentry.io/api/embed/error-page/?dsn=https://a3c69eb103bd4e3284be7403b7e6b5a1@o975678.ingest.sentry.io/5931913&eventId=415d46ff5890490b962769bbd39ef5b9&name=Anonymous&email=anonymous%40example.org'   --data-raw 'name=Anonymous&email=anonymous%40example.org&comments=Test%20user%20feedback%20widget%20from%20Brave%20with%20Shields%20Up'   --compressed

Response

{}

That's my second mistake when I've made a bet on Cloudflare...

fisprak · 2022-07-19T09:50:55Z

With @arvakr, decided to skip fixing Sentry Crash Report dialog window. Here's the Notion link if we'll decide to fix it.

arvakr

Sweet!

fisprak self-assigned this Jun 28, 2022

fisprak added 2 commits June 28, 2022 17:54

chore(ui): Tunnel Sentry requests via CF Worker under Swim.io account

ce0a514

chore(ui): Tunnel requests to Sentry via swim.io/tunnel

565b223

fisprak added bug Something isn't working improvement Improving an existing feature labels Jun 29, 2022

fisprak changed the title ~~chore(ui): Circumvent ad blockers for Sentry~~ fix(ui): Circumvent ad blockers for Sentry Jun 29, 2022

fisprak added 2 commits June 30, 2022 14:12

Merge branch 'master' of github.com:swim-io/swim into ui/tunnel-sentr…

87565c0

…y-via-cf-worker

fisprak commented Jul 1, 2022

View reviewed changes

apps/ui/src/errors/sentry.ts Show resolved Hide resolved

fisprak added the work in progress label Jul 8, 2022

fisprak marked this pull request as ready for review July 19, 2022 06:32

fisprak requested a review from wormat July 19, 2022 06:46

fisprak removed the work in progress label Jul 19, 2022

arvakr approved these changes Jul 19, 2022

View reviewed changes

wormat merged commit 025bf65 into master Jul 19, 2022

wormat deleted the ui/tunnel-sentry-via-cf-worker branch July 19, 2022 12:31

arvakr unassigned fisprak Sep 6, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(ui): Circumvent ad blockers for Sentry #149

fix(ui): Circumvent ad blockers for Sentry #149

fisprak commented Jun 28, 2022 •

edited

Loading

cloudflare-workers-and-pages bot commented Jun 28, 2022 •

edited

Loading

github-actions bot commented Jun 28, 2022 •

edited

Loading

arvakr commented Jun 29, 2022

fisprak commented Jun 29, 2022

fisprak commented Jul 1, 2022 •

edited

Loading

arvakr commented Jul 1, 2022

fisprak commented Jul 4, 2022 •

edited

Loading

fisprak commented Jul 5, 2022

fisprak commented Jul 5, 2022 •

edited

Loading

arvakr commented Jul 6, 2022

fisprak commented Jul 6, 2022 •

edited

Loading

fisprak commented Jul 15, 2022 •

edited

Loading

fisprak commented Jul 19, 2022

arvakr left a comment

fix(ui): Circumvent ad blockers for Sentry #149

fix(ui): Circumvent ad blockers for Sentry #149

Conversation

fisprak commented Jun 28, 2022 • edited Loading

tunnel option

Tunnel request handler

Problems

Checklist

cloudflare-workers-and-pages bot commented Jun 28, 2022 • edited Loading

Deploying with Cloudflare Pages

github-actions bot commented Jun 28, 2022 • edited Loading

arvakr commented Jun 29, 2022

fisprak commented Jun 29, 2022

fisprak commented Jul 1, 2022 • edited Loading

arvakr commented Jul 1, 2022

fisprak commented Jul 4, 2022 • edited Loading

fisprak commented Jul 5, 2022

fisprak commented Jul 5, 2022 • edited Loading

arvakr commented Jul 6, 2022

fisprak commented Jul 6, 2022 • edited Loading

fisprak commented Jul 15, 2022 • edited Loading

fisprak commented Jul 19, 2022

arvakr left a comment

Choose a reason for hiding this comment

fisprak commented Jun 28, 2022 •

edited

Loading

`tunnel` option

cloudflare-workers-and-pages bot commented Jun 28, 2022 •

edited

Loading

github-actions bot commented Jun 28, 2022 •

edited

Loading

fisprak commented Jul 1, 2022 •

edited

Loading

fisprak commented Jul 4, 2022 •

edited

Loading

fisprak commented Jul 5, 2022 •

edited

Loading

fisprak commented Jul 6, 2022 •

edited

Loading

fisprak commented Jul 15, 2022 •

edited

Loading