Domo Dashboard Embedding

Another way of doing it

Embedding Domo dashboards can be done by using an embed token received from an application server. There is no need to return any html from this server as the docs would suggest.

To do so, first move the html from the server into the client, then use the onLoad property of an iframe to submit the token to Domo to get the dashboard. This bypasses the unsafe-inline CSP policy on iframes.

Normally, iframes have been easy and simple to implement, just point the src to some url and some magic happens. However that is not the case with Domo dashboards… We have to send a token somehow 🤔

Lets first figure out how iframes work.

These let use load html inside html. Very fun. To load our html, we have two methods, either src or srcdoc. From what I can tell, this is the basic difference:

With this knowledge, I would want to have my iframe src as such so I can send the token through it, like so:

However, there is no query parameter, meaning we have to get the embedded html from Domo via some POST request… Clue, its a form in srcdoc.

This is the flow that Domo suggests (summary below) to enable their embed dashboards:

To summarise:

This works when you return the html form from your application server. However, I don’t think returning any html from an API is a good practice.

Can it be done with the API returning just the embed token? (spoilers: yes!)

To remove html from our server, we need to add it to our client. This means that the iframe should now point to Domo, not our server. The new suggested flow is:

To start to implement this, lets first start with the client.

If we try to load it into an iframe srcdoc we will run into an CSP error 🥲. The iframe code block used:

The snippet of code above, when run on React, will return the CSP error: refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'unsafe-inline'"

To not upset our CSP, lets load the script using the onLoad property:

Where the function handleLoad is defined within javascript:

Related posts:

Conversation is speaking to someone on the phone, on video or in person. It’s high-bandwidth, lots of information is conveyed to the other person, not just text. It’s all your gestures, expressions…