Web Previews - webhook URL behind basic auth

colin.cole · June 3, 2024, 9:04pm

Hello,

I’m trying to get the Web Preview plugin to work but I’m having trouble getting around basic auth Web Previews - Plugins — DatoCMS

I can successfully get my previews to load one when configuring the plugin to point at a public-facing endpoint, however in production our preview endpoint will be behind basic auth in Amplify.

To get around that, I’ve included the Authorizaiton header in the plugin config with the proper hashed value (confirmed that this header works by testing the endpoint via Postman). However when trying to open the preview panel in Dato, I’m seeing 401s for the preflight request in the console.

Are the custom headers included in the preflight request?

Thanks,
Colin

roger · June 4, 2024, 9:36pm

Hey @colin.cole,

Welcome to the Dato forums!

From what I can see, the OPTIONS endpoint shouldn’t require authentication (even though subsequent requests, like the POST itself, could).

This seems to be part of the CORS standard: Fetch Standard

For a CORS-preflight request, request’s credentials mode is always "same-origin ", i.e., it excludes credentials, but for any subsequent CORS requests it might not be. Support therefore needs to be indicated as part of the HTTP response to the CORS-preflight request as well.

See also this old post: Google Code Archive - Long-term storage for Google Code Project Hosting.

Can you turn off authentication for the OPTIONS request?

I believe that the plugin is just making a standard fetch request, and your browser is not sending the credentials for the OPTIONS request because it’s not supposed to (as far as I can tell).

If you can’t turn off the auth, you can try forking our plugin:

github.com

datocms/plugins/blob/master/web-previews/src/utils/common.ts#L35-L39


      
          const request = await fetch(url.toString(), {
            method: 'POST',
            headers,
            body: payload,
          });

And maybe adding credentials: "include" to the fetch options to see if it’ll let you forcibly send the credentials?

Does this line up with your understanding of how this is all supposed to work? This isn’t something I have a lot of expertise in, so if any of this sounds wrong, please let me know!

colin.cole · June 7, 2024, 2:47pm

Hi Roger,

Thanks for looking into this - I wasn’t aware the preflight requests exclude credentials. That Google Code Archive article illustrates my exact problem as well.

As a workaround, I tried embedding the basic auth creds in the Webhook URL e.g. https://username:password@amplify… When I did that, the webhook seemed to fail silently and there were no network calls when trying to load the web preview plugin.

Rather than forking the plugin, I decided to switch hosting providers for this endpoint and manage it in API Gateway via the Serverless Framework rather than Amplify. This way I can manually verify the Authorization headers in the POST request and the preflight request works as expected.

Thanks for the help and investigation!