Custom widget can not call developer portal backend - Origin null is not allowed by Access-Control-Allow-Origin

[heller-tobias]

Bug description

The issue arises when calling the developer portal backend through a custom widget using the endpoint /developer/apis/API_NAME?export=true&api-version=2022-04-01-preview. While this operation functions correctly on Google Chrome, Safari users encounter a Cross-Origin Resource Sharing (CORS) error. It's essential to investigate and address this discrepancy, specifically within the context of the custom widget, to ensure proper functionality across both browsers.

Reproduction steps

1. Create a custom widget where you call the endpoint GET /developer/apis/API_NAME?export=true&api-version=2022-04-01-preview
2. Deploy this widget to the developer portal and embed it on the page
3. Go to the page with the widget on Safari and open the Developer Tools
4. See console error:

Expected behavior

The backend should return data also for Safari.

Is your portal managed or self-hosted?

Managed

API Management service name

[e.g., apim-GaasDev-devportal-testing]

Environment

• Operating system: [e.g., Mac OS]
• Browser: [Safari]
• Version: [e.g., 19]

Additional context

• The request works on Chrome without an issue.
• The request for sandboxed iframe requests on Safari always set the origin to null: https://discussions.apple.com/thread/252149131?sortBy=best
• The issue is, that the custom widget runs in an iframe: https://github.com/Azure/api-management-developer-portal/blob/63fed3d3b1487b33760bf4cad1f0c0684a8afdb4/src/components/custom-widget/ko/runtime/customWidget.html#L1
• This issue was already discussed with the Microsoft Azure support

[joahuber]

We face the same issue.

[RickOttenNS]

We also face the same issue, but not just in safari. In Chrome as well, the custom html widget fails to set an origin, resulting in CORS issues.

[malincrist]

Hello, thanks for reaching out! We have already addressed this issue, and it will be shipped with the next release (2.26).