Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

Reply
LeboeufHarry
Helper I
Helper I

Custom Visual Web Page

Hello,

 

I would like to create a Visual that just displays a web-page. The Url would be data driven.

As I'm a complkete TypeScript newbie I would first like to inform if this would be possible ?

 

Kind regards, Harry

1 ACCEPTED SOLUTION
dm-p
Super User
Super User

Hi @LeboeufHarry,

Custom visuals are themselves hosted in a iframe. The only sandbox attribute set is allow-scripts, so custom visuals are not very permissive.

In order to embed a web page, you'll need to add an additional iframe element to your visual and then its src attribute would need to be the data-driven URL. You'll therefore need to consider:

  1. Whether your intended URL can be embedded in an iframe to begin with.
    • Some websites or web apps explicitly block this cross-domain (using an X-Frame-Options setting on their side of things). If the web site is hosted or managed by yourself then you can probably manage this appropriately.
    • If this is the case then you won't be able to use a custom visual.
  2. If #1 works, then you will need to see if hosting that iframe in a sandboxed iframe (the custom visual container) still works, as:
    • The sandboxing permissions applied to it may have downstream effects.
    • The sandboxing removes the domain from the custom visual iframe so that it does not belong to powerbi.com.

Without getting into developing custom visuals, you would previously have been able to test this in Power BI using the HTML viewer custom visual, but that seems to have disappeared recently. I know that when people have tried this approach with certain sites, they might work in the Power BI Service (online) but not in Power BI Desktop due to some differences in how they work (this probably has something to do with the service being identified as powerbi.com but Desktop technically not being hosted at a specific loaction on the web... I haven't looked into it in great detail).

However, you could so a simple proof-of-concept test outside of Power BI with a .html file. Something like the following HTML could simulate an iframe being hosted in a custom visual's iframe:

<html>
<body>

<!-- Simulating a sandboxed iframe (custom visual) -->
<iframe sandbox="allow-scripts" height="300" width="300">

	<!-- Page we want to see -->
    <iframe src="https://www.google.com">
    </iframe>

</iframe>

</body>
</html>

(note that google.com definitely won't work as they do have the permissions detailed in#1 above set; this is just so that you can see where I'd be coding my intended URL).

Regards,

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




View solution in original post

1 REPLY 1
dm-p
Super User
Super User

Hi @LeboeufHarry,

Custom visuals are themselves hosted in a iframe. The only sandbox attribute set is allow-scripts, so custom visuals are not very permissive.

In order to embed a web page, you'll need to add an additional iframe element to your visual and then its src attribute would need to be the data-driven URL. You'll therefore need to consider:

  1. Whether your intended URL can be embedded in an iframe to begin with.
    • Some websites or web apps explicitly block this cross-domain (using an X-Frame-Options setting on their side of things). If the web site is hosted or managed by yourself then you can probably manage this appropriately.
    • If this is the case then you won't be able to use a custom visual.
  2. If #1 works, then you will need to see if hosting that iframe in a sandboxed iframe (the custom visual container) still works, as:
    • The sandboxing permissions applied to it may have downstream effects.
    • The sandboxing removes the domain from the custom visual iframe so that it does not belong to powerbi.com.

Without getting into developing custom visuals, you would previously have been able to test this in Power BI using the HTML viewer custom visual, but that seems to have disappeared recently. I know that when people have tried this approach with certain sites, they might work in the Power BI Service (online) but not in Power BI Desktop due to some differences in how they work (this probably has something to do with the service being identified as powerbi.com but Desktop technically not being hosted at a specific loaction on the web... I haven't looked into it in great detail).

However, you could so a simple proof-of-concept test outside of Power BI with a .html file. Something like the following HTML could simulate an iframe being hosted in a custom visual's iframe:

<html>
<body>

<!-- Simulating a sandboxed iframe (custom visual) -->
<iframe sandbox="allow-scripts" height="300" width="300">

	<!-- Page we want to see -->
    <iframe src="https://www.google.com">
    </iframe>

</iframe>

</body>
</html>

(note that google.com definitely won't work as they do have the permissions detailed in#1 above set; this is just so that you can see where I'd be coding my intended URL).

Regards,

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Helpful resources

Announcements
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.