How to enable CORS for IOT Hub service

Heinrich Braasch 0

I have trouble connecting to the IOT Hub from a webassembly app. It reports in the exception: Operation is not supported on this platform

I think it's a CORS problem, since I got the same exception accessing a different website, which resolved when enabling CORS.

Obviously, the exact code e.g. running in a desktop app, connects fine. So the code works.

Thanks. Help shall be much appreciated.

Sander van de Velde | MVP 33,956 Reputation points MVP

2024-12-18T07:18:46.12+00:00

Hello @Heinrich Braasch ,

welcome to this moderated Azure community forum.

Better questions with more information lead to better answers from our community members.

Please provide information about the steps you have taken, the guide you follow, and the exact errors you receive so fellow members can understand your question better.

To connect an Azure IoT Hub, to a webassembly, you probably need something in between.

Can you explain the current flow and resources?
Heinrich Braasch 0 Reputation points

2024-12-18T23:16:03.5166667+00:00
I've fixed an issue with the webassembly's Microsoft.Azure.Devices library, and have now advanced to a "Cannot fetch" error message.

For me this points to a CORS issue.

Here is the background to the issue:

I've got a UNO multi-platform app that sends a direct message to an IOT Hub service I've created, using the following command:

var response = await serviceClient.InvokeDeviceMethodAsync(deviceId, methodInvocation, cts.Token);

It runs fine with all UNO platforms, except WebAssembly. There it fails with the exception:

Microsoft.Azure.Devices.Common.Exceptions.IotHubCommunicationException: TypeError: Failed to fetch ---> System.Net.Http.HttpRequestException: TypeError: Failed to fetch ---> TypeError: Failed to fetch --- End of inner exception stack trace ---

This I strongly suspect is CORS related, because I've resolved a webassembly HttpClient.Post instruction before (same exception), by enabling CORS on the server side.

One of these servers I've resolved it for was a Azure Web App, and on that server you explicitly configure CORS following the

[Web APP]=> [API] => CORS => "*" steps.

Now the main question, is there a similar way to configure CORS for an Azure IOT Hub?

Thanks for the help.

1 answer

Sander van de Velde | MVP 33,956 Reputation points MVP

2024-12-19T12:21:47.4133333+00:00

Hello @Heinrich Braasch ,

welcome to this moderated Azure community forum.

I have never used the Azure IoT SDK within a WebAssembly environment.

So, I'm not sure how to fix this cross origin challenge within Webassembly.

It seems the app is used for controlling devices via the IoT Hub (hence the direct method invocation).

I propose an alternative.

Do you have a Azure server-side backend?

If so, a solution could be to make a secure call from the webassembly layer to the backend.

In the backend, you invoke the actual call to the IoT Hub via the IoT Hub connection string.

This is also a much more secure solution!

It seems your webassembly has the IoT Hub connection string which is not advised, storing this key outside the cloud.

Is this a solution you could work with?

If the response helped, do "Accept Answer". If it doesn't work, please let us know the progress. All community members with similar issues will benefit by doing so. Your contribution is highly appreciated.
Please sign in to rate this answer.
Heinrich Braasch 0 Reputation points

2024-12-20T02:35:26.7466667+00:00

Hi @Sander van de Velde

Thanks for the ideas.

Yes, I've got a backend and have used that as a workaround, although I was hoping to speed up the response by cutting out the middleman.

But you've got a point about having the IoT Hub connection string local... however, isn't a web assembly app a binary file, so it can't be inspect that easily? Although, hackers are quite advanced. Do you still think it poses a risk?

Regards

Sander van de Velde | MVP 33,956 Reputation points MVP

2024-12-20T18:25:22.9+00:00

Hello @Heinrich Braasch ,

Yes, anything in the browser is basically the property of the user running the browser so you are not in control.

By default, any (IoT Hub) service connection string should be considered a secret thus putting it in the browser is... not a good idea ;-)

I'm not sure if your site is public facing but using the backend is the most secure way and a common architecture pattern.

If the response helped, do "Accept Answer". If it doesn't work, please let us know the progress. All community members with similar issues will benefit by doing so. Your contribution is highly appreciated.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

How to enable CORS for IOT Hub service

1 answer

Your answer