CORS errors when trying to integrate Stripe via HTML Widget

[BoEsse]

Bug description

We are trying to integrate Stripe into the protal via an HTML Widget. But when we use even a simple demo from Stripe, we get CORS Access-Control-Allow-Origin errors. Further investigation has shown, that we can not set CORS properly via the portal. Should that be possible or is it just not possible and we are missing something here?

Reproduction steps

1. Create a new HTML Widget.
2. Paste example code from Stripe (with approriate keys/endpoints).
3. Open the portal page containing the HTML.
4. See errors in browser console

Expected behavior

The ability to set the cross origin behaviour for HTML Widgets, maybe.

Is your portal managed or self-hosted?

Managed / Self-hosted

Release tag or commit SHA (if using self-hosted version)

Latest version on Azure

API Management service name

Environment

• Operating system: Windows
• Browser: all
• Version: all

Additional context

Just for clarification: This is not about the endpoint or any of that. We can't even hit the endpoint, since there is no way in DevPortal to configure the CORS for a HTML Widget, and since they are loaded as IFrames (!!) there isn't really anything we can do.

This is the slightly modified example code in the HTML Widget

<script src="https://js.stripe.com/v3/"></script>
<button id="checkout-button">Subscribe</button>
<script>
    var stripe = Stripe('pk_test_XYZ');

    document.getElementById('checkout-button').addEventListener('click',
        function() {
            // Create a new checkout session
            fetch('https://peopleoftheprompt-function-app.azurewebsites.net/api/CreateCheckoutSession?code=XYZ==',
                    {
                        method: 'POST',
                    })
                .then(function(response) {
                    return response.json();
                })
                .then(function(session) {
                    return stripe.redirectToCheckout({ sessionId: session.id });
                })
                .then(function(result) {
                    // If redirectToCheckout fails due to a browser or network
                    // error, display the localized error message to your customer.
                    if (result.error) {
                        alert(result.error.message);
                    }
                })
                .catch(function(error) {
                    console.error('Error:', error);
                });
        });
</script>

[maciejtreder]

Thank you for reporting that. We are going to investigate that, and decide if we're going to change the custom html widget behavior.

[azaslonov]

@BoEsse, it seems that the CORS headers need to be set on the API you're calling, no matter if it's called from IFrame or regular page.

I see that you already employ a Function App, therefore, if you control it, you could proxy Stripe API with this application and set Access-Control-Allow-Headers: * in the response.