Custom visualization widget fails to load after integration with external analytics platform in aziotc

IoT Microsoft Azure IoT
, , , , , , , ,
1

After integrating an external analytics tool, custom visualization widgets fail to load with CORS errors in the browser console. We embedded a third-party analytics dashboard using their provided iframe code, but now our Azure IoT Central dashboard shows blank spaces where the custom widgets should appear.

The embed code looks like this:

<iframe src="https://analytics.example.com/embed/dashboard"
  width="100%" height="600px" frameborder="0">
</iframe>

Browser console shows: “Blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header”. The analytics platform requires API authentication via bearer token, and we suspect widget sandboxing might be interfering. Our embed code compatibility seems fine since the same code works on a standalone HTML page. Has anyone successfully integrated external analytics with custom IoT Central visualization widgets?

2

You can’t pass bearer tokens directly through iframes for security reasons. You need to implement a proxy service that handles authentication server-side. Create an Azure Function that authenticates with the analytics platform, retrieves the data, and serves it to your widget. This way the authentication happens in the backend and your iframe just loads the proxied content without needing to handle tokens.

3

CORS errors in iframe contexts usually mean the external site hasn’t whitelisted your Azure IoT Central domain. You need to contact the analytics platform and have them add your IoT Central URL to their CORS allowed origins. This is a server-side configuration on their end, nothing you can fix from your dashboard code.

4

Have you checked the Content Security Policy headers? IoT Central enforces strict CSP that can block external iframe sources. You might need to request a CSP exception for your analytics domain. Also, some analytics platforms use postMessage for cross-origin communication - make sure your widget code includes a message handler to receive data from the embedded analytics iframe.

5

Your integration is hitting multiple security boundaries in Azure IoT Central’s widget system. Here’s how to properly implement external analytics integration:

CORS Configuration: While the analytics platform whitelisted your domain, the issue is bidirectional. IoT Central’s CSP blocks the response. You need to configure both sides. Add this to your widget’s custom properties:

widgetConfig.securityPolicy = {
  allowedOrigins: ['https://analytics.example.com'],
  allowCredentials: true
};

Then request CSP exception through Azure Portal > IoT Central > Security Settings > Content Security Policy > Add Trusted Domain.

Widget Sandboxing: IoT Central’s sandbox is intentionally restrictive. Instead of direct iframe embedding, use the Widget SDK’s secure embed method:

const widget = new SecureEmbedWidget({
  source: 'https://analytics.example.com/embed/dashboard',
  sandbox: ['allow-scripts', 'allow-same-origin'],
  authProxy: '/api/analytics-proxy'
});

Embed Code Compatibility: Replace static iframe with dynamic loading through the Widget SDK. This handles sandbox permissions correctly and provides authentication bridging.

API Authentication: Implement an Azure Function proxy for authentication. Create endpoint /api/analytics-proxy that:

  1. Receives widget requests
  2. Adds bearer token from Azure Key Vault
  3. Forwards to analytics platform
  4. Returns response to widget

Proxy code structure:

const token = await keyVault.getSecret('analytics-api-token');

const response = await fetch(analyticsUrl, {

  headers: { 'Authorization': `Bearer ${token}` }

});

return response.json();

This keeps credentials server-side and avoids CORS issues. Update your embed code to use the proxy endpoint instead of direct analytics URL. Configure the proxy URL in widget settings, and IoT Central will automatically route requests through your authentication layer.

Also verify that your analytics platform supports postMessage API for cross-origin communication. If they do, implement a message listener in your widget to handle data updates without needing direct iframe access. After these changes, the widget will load properly within IoT Central’s security constraints while maintaining full analytics functionality.

6

The analytics platform confirmed our IoT Central domain is in their CORS whitelist. We tried adding sandbox attributes but IoT Central strips them out when the widget loads - seems like there’s a security policy preventing certain sandbox permissions. The API authentication is also failing because we can’t pass the bearer token through the iframe. How do others handle authenticated external embeds?

7

The issue isn’t just CORS - it’s how IoT Central handles custom widget sandboxing. Custom widgets run in a restricted sandbox that blocks certain iframe attributes and cross-origin requests. Check if your widget configuration has sandbox permissions enabled. You need to add ‘allow-same-origin’ and ‘allow-scripts’ to the sandbox attribute for embedded analytics to work.