This post is also available in:
Deutsch
Recently, I had received several questions about whether you can view a website directly in Power BI. This can be implemented quite easily and is a good way to add more information to a report.
However, one restriction must be mentioned in advance. Unfortunately, Power BI Desktop does not load web pages, so we will focus on the Power BI Service here. But as a final result, here’s what we can look forward to:
Loading via iFrame with HTML5 Visual
In order to be able to load a website into our report, we must first ask ourselves which visual this can be done with. Here the HTML5 Viewer visual is very useful, with which we can display HTML code in a visual. In HTML itself there is then the iFrame tag, which allows to embed another website into your own website – or in our case into our Power BI Visual. This combination allows us to embed a website directly into a Power BI report.
But the website author can prevent the website from being included via iFrame. For example, YouTube and Google prevent embedding via iFrame. In this case, simply no content is displayed.
Add URL to table and create measure
First of all, of course, the URL must exist in the desired table and this must be returned by a Measure. In a first example, we create a simple table with the website name and the corresponding URL:
Now we have to create a measure that returns the selected website:
SelectedURL = SELECTEDVALUE( Websites[URL] )What we need then is the code of the iFrame itself. In general, it would work to use only the iFrame tag. But personally I prefer to use correct HTML, which is why I use the basic tags of a website. My measure then looks like this:
IFrame =
"<!DOCTYPE html>
<html>
<body>
<iframe src='"& [SelectedURL] &"' style='position: fixed; width:100%; height:100%'></iframe>
</body>
</html>"In the iFrame itself, we use as the website URL (src) the measure that returns the selected website. The style tags are required for the website to take up the full size of our visual. Otherwise the website would only be rendered in a small square.
What is missing now is the visualization. In order to do this, we first need the custom visual “HTML Content” (https://www.html-content.com), which allows us to render HTML content as a visual:
After that we still drag the measure “iFrame” into the HTML visual and create a slicer or table with which we select the desired website:
The PBIX file can be downloaded here:
Strange, it didn’t work
Hey Francesco,
and what didn’t work?
Best regards
Denis
Same here. It shows a blocked content for any website I try.
Daniel Marsh-Patrick, the author of the HTML5 sent me an update. There is already an open issue at the HTML5 Visual:
iframe external webpages not loading from Aug 29, 2023 in Power BI. · Issue #94 · dm-p/powerbi-visuals-html-content · GitHub
The reason is that “Microsoft enforces CSP rather than CORS in the latest versions of the visual API”, but you can fix that by downgrading to the standalone version 1.2.0 of the custom visual. You can download that version here:
Release 1.2.0 · dm-p/powerbi-visuals-html-content · GitHub
I hope the issue will be fixed soon! Big thank you to Daniel for the explanation!
The tile displays this message “This content is blocked. Contact the site owner to fix the issue.”
Daniel Marsh-Patrick, the author of the HTML5 sent me an update. There is already an open issue at the HTML5 Visual:
iframe external webpages not loading from Aug 29, 2023 in Power BI. · Issue #94 · dm-p/powerbi-visuals-html-content · GitHub
The reason is that “Microsoft enforces CSP rather than CORS in the latest versions of the visual API”, but you can fix that by downgrading to the standalone version 1.2.0 of the custom visual. You can download that version here:
Release 1.2.0 · dm-p/powerbi-visuals-html-content · GitHub
I hope the issue will be fixed soon! Big thank you to Daniel for the explanation!
I’m getting an error “This content is blocked. Contact the site owner to fix the issue.”
Daniel Marsh-Patrick, the author of the HTML5 sent me an update. There is already an open issue at the HTML5 Visual:
iframe external webpages not loading from Aug 29, 2023 in Power BI. · Issue #94 · dm-p/powerbi-visuals-html-content · GitHub
The reason is that “Microsoft enforces CSP rather than CORS in the latest versions of the visual API”, but you can fix that by downgrading to the standalone version 1.2.0 of the custom visual. You can download that version here:
Release 1.2.0 · dm-p/powerbi-visuals-html-content · GitHub
I hope the issue will be fixed soon! Big thank you to Daniel for the explanation!
Hi Denis,
i have used HTML Content custom visual in POwer BI , to display a website (https://in.investing.com/charts/forex-charts) where data keep on chnging . but in power bi not able to see that , only static data of the website i can see . any idea why?
Hey Rohit,
the website is using another iFrame to get the live charts from Tradingview.
There could be a few reasons why it does not work. I checked the URL that is embedded with the iFrame. This URL doesn’t work if you open it in a new tab. So I guess it might only work within the investing-website. For me it seems like it’s declining every other origin. That also would make sense as trading data is expensive, so you wouldn’t like other websites to embed it from your website. Check also the following article:
CORS & Other Known Limitations | HTML Content – Custom Visual for Power BI (html-content.com)
Didn’t solve the problem, but I hope that helped to understand the issue.
Best regards
Denis
Hi – I’m testing with Google.com, but I get this error “google.com refused to connect”
Hey Nicolas,
a website can refuse to be loaded in an iFrame.
Google is one of these websites. So you can’t load Google with an iFrame.
Best regards
Denis