Iframes in the "Custom HTML Code" widget

AnRei123 commented 2 years ago

Bug description

I added a "Custom HTML Code" widget in order to add an iframe to my DevPortal page that shows a web page where our external wikis are hosted.

I added the following custom html code to the "Custom HTML Code" widget, saved and published the portal:

<html>
<head>
<style>
#outerdiv
{
   width:446px;
   height:246px;
   overflow:hidden;
   position:relative;
}
#docPage_31aa
{
   position:absolute;
   top:-412px;
   left:-318px;
   width:1280px;
   height:1200px;
}
    </style>
</head>
<body>
         <h2>Here the iframe content</h2>
<div id="docPage_31aa">
    <iframe src="https://kb.<hostname>" id="inneriframe" scrolling="yes"></iframe>
</div>
</body>
</html>

But in the published page, the contents of the iframe src="https://kb.<hostname>" are not displayed. Instead the frame remains empty.

Expected behavior

For us it is very important to be able to embed web pages from external sources into the Developer Portal. Is there anything wrong with my custom html snippet or do you still not support iframes in the "Custom HTML Code" widget yet? Is there any way, how I would be able to show the content area of a website through any other mechanism (workaround)?

Is your portal managed or self-hosted?

Managed

Additional information

I wasn´t able to find any help for this use case on the following Microsoft docs page: https://docs.microsoft.com/en-us/azure/api-management/developer-portal-faq#how-do-i-add-custom-html-to-my-developer-portal

On the referenced Microsoft docs page, there is a very irritating note that I do not understand in the embedded context:

ghost commented 2 years ago

@AnRei123, thank you for opening this issue. We will triage it within the next few business days.

JMach1 commented 2 years ago

Hi @AnRei123

I was unable to reproduce the issue. I used this snippet of code, and it works just fine even after publishing.

<html>
<head></head>
<body>
    <h2>Here the iframe content</h2>
    <iframe style="height: 1000px" src="https://bing.com/" scrolling="yes"></iframe>
</body>
</html>

We don't support your HTML code. Just one idea that comes to my mind, your https://kb.<hostname> website might be set-up to block being displayed on a different domain. But it might not be the cause though.

If you believe your code works and the issue is on our side, provide me with the name of your API Management service.

ghost commented 2 years ago

@AnRei123, we need more information before we start working on this issue. If you prefer to share it in private, please send us an email to apimportalfeedback@microsoft.com with the issue number in its subject.

azaslonov commented 2 years ago

@AnRei123, do you mind sending your published portal link or service name (I know you guys have lot of them) to apimportalfeedback@microsoft.com, so we could take a closer look at repro?

azaslonov commented 2 years ago

@AnRei123, I'm closing the issue for now, since @JMach1 is following up with you offline. If you still need help, please feel free to either shoot us another email or re-open this issue, we'll be happy to assist.

Azure / api-management-developer-portal