HTML Content - Custom Visual for Power BI
CORS & Other Known Limitations
CORS & Other Known Limitations
If you're serious about content, then it's recommended that you spend some time reading this page in detail to understand why the visual has challenges for some types of HTML or web-based content.
If you'd prefer a quick list of things to check against, these are highlighted first.
HTML Content is Uncertified
Which means that features like export to PowerPoint and printing will not work.
HTML Content cannot be certified under the Microsoft's current rules. We elaborate on this a little bit more in the FAQ. Please be assured I check frequently for rule changes.
If you need a certified visual that can handle simple HTML use cases, I recommend you go for Shielded HTML Viewer instead.
What Doesn't (or Might Partially) Work
The visual can't handle some aspects of HTML, due to the sandboxing rules applied by Power BI's main window. This is detailed below if you wish to understand further, but if you're attempting any of the following, then you're probably out of luck:
Some hyperlinks (although
httpsare supported via delegation to Power BI)
<iframe>elements in Desktop - reports need to be published to the Power BI Service to be tested/viewed.
<iframe>elements that embed content from sites that block cross origin resource sharing, or CORS (e.g. YouTube). We'll try and collect the ones we know to work below.
Modal windows or popups
Cookies or local storage
If you find one that's not listed, please let me know about it so I can investigate and update the documentation (or the visual, if it turns out to be a bug) accordingly.
Embeddable Content Known to Work
Embedding content from any the following services is known to work once a report has been published in the Power BI Service:
If you know of any that do work, your knowledge can greatly assist other users. Please either @ me, or create an issue to make me aware and I can add the details to the page. If you have an example or walkthrough you can provide, that's even better and I'll be happy to link to it so others can follow your lead.
Custom Visuals: High-Level
All custom visuals are themselves hosted in an
<iframe> element that is sandboxed from the main Power BI application. The only permission they have enabled is
allow-same-originpermission is disabled, another protection is that the visual does not belong to
powerbi.com(a revocation of the
Therefore, a visual cannot do things like query the data model of its own volition, using the same techniques Power BI uses to fetch data for visuals.
This means that visuals can't just "reach in and grab" data from your model, and data can only be supplied to the visual from Power BI.
According to the MDN documentation on
<iframe>, having a combination of
allow-same-originis not a good idea:
When the embedded document has the same origin as the embedding page, it is strongly discouraged to use both
allow-same-origin, as that lets the embedded document remove the
sandboxattribute — making it no more secure than not using the
sandboxattribute at all.
Microsoft are unlikely to ever allow this to happen in the current visual architecture, as it can mean that visuals can potentially cause a whole heap of trouble (even if the author is well-intentioned).
Cross Origin Resource Sharing (CORS)
It's hard to explain why some things don't work when you try them without having to get a bit technical. This article by MDN is really essential reading if you do any work within the web development space and/or want to include remote content in your Power BI report.
It's recommended that you do take some time to understand the concepts, but the salient points are these:
When a custom visual makes a request to an external site, its origin does not match that of the site in question and will fail the
If the external site is configured to allow requests from any origin (
*), it will give consent for the visual to access its resource. Otherwise, it will not be granted.
If your content does not appear, the external site has most likely not allowed cross-origin requests from locations with an empty origin.
There's not much you can do about this, unless the website administrators are prepared to make changes to this policy from their end. Refer to the end of the above section as to why Microsoft are unlikely to change things from the Power BI-side of things.
<iframe> elements are used for a number of use cases where someone might wish to embed content from another site into a page.
These are permitted by the visual, but it's up to Power BI, and a combination of the destination website as to whether they get rendered.
Power BI Desktop does not render
<iframe>elements within any custom visuals.
When you publish to the Power BI Service, it's possible thay may work -
<iframes>will work if the destination site sets
Access-Control-Allow-Origin: *in their responses. Most sites disable this.
<iframe> doesn't work in the Power BI Service, it's due to the reasons outlined above.
To re-state, there's nothing we as visual authors, or you as a content creator can do to work-around this. If your destination website is willing to remove CORS restrictions from their end, then you should be good, but this is also an unlikely resolution.