cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Helper V
Helper V

How to access embedded Iframe contents i.e divs/input etc. to make some changes from portal web page.

Hi Experts,

I have embedded one Iframe on my portal page and trying to get its elements/contents to make some changes. But When I am trying to access the Iframe contents it is giving me below error:

Uncaught DOMException: Blocked a frame with origin "https://xyz.powerappsportals.com" from accessing a cross-origin frame.

 

I Went through this post but wondering does it impact my portal security?

https://powerusers.microsoft.com/t5/Power-Apps-Portals/Power-portal-Iframe-issue/td-p/464045

 

Could you please help me with this issue?

Thanks,

Amit

7 REPLIES 7
Highlighted
Super User II
Super User II

Re: How to access embedded Iframe contents i.e divs/input etc. to make some changes from portal web page.

I am not sure you will be able to make changes to the iframe content, you can probably get its content 

 

the thread mentioned is an issue when displaying the iframe itself, is your issue display the iframe? or getting the content?

 

the target iframe must have the proper http/X-Frame-Options settings enabling your portal to use it as an iframe, I suggest taking a look at this documentation to understand the concepts: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

 

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

 




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

Highlighted
Helper V
Helper V

Re: How to access embedded Iframe contents i.e divs/input etc. to make some changes from portal web page.

Hi @OliverRodrigues 

Yes, I am able to get the Iframe working and can see the page which I am calling through Iframe but my post is towards how to access the iframe contents/elements from the power app portal. and when I am trying to get its contents by simply using, $("iframe").contents(); it is giving me that error which I mentioned in my post.

 

Maybe the link which I mentioned is not related to this but could you please suggest a way to resolve this?

 

Thanks,

Amit

Highlighted
Super User II
Super User II

Re: How to access embedded Iframe contents i.e divs/input etc. to make some changes from portal web page.

have you tried accessing directly via page element instead of iframe elements

 

the below worked via console for a youtube video

iframe.PNG




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

Highlighted
Helper V
Helper V

Re: How to access embedded Iframe contents i.e divs/input etc. to make some changes from portal web page.

HI @OliverRodrigues 

Yes, I tried that but that works only when you inspect and hover to that element and get the class name or Id and then replace the text from the console. (i.e Internally when we inspect and hover to the iframe element to get its id or class name it opens the whole iframe contents till that div and we can easily replace the text or anything but if you try to run the code again by reloading the page and without inspecting it, it will not work)

 

Please suggest me any other way to get that working.

 

Thanks,

Amit

Highlighted
Super User II
Super User II

Re: How to access embedded Iframe contents i.e divs/input etc. to make some changes from portal web page.

nice one.. I tested here on my side and really doesn't work

 

do you owe the iframe website you are embedding in your Portal? you can try the following:

https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessin...




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

Highlighted
Advocate III
Advocate III

Re: How to access embedded Iframe contents i.e divs/input etc. to make some changes from portal web page.

Hi together,

for me works the site setting:

name: HTTP/Content-Security-Policy

content: default-src 'self' *.bing.com 'unsafe-inline'; style-src 'unsafe-inline'

--> be careful with the default-src because it can prevent inline style and inline javascript as well - could lead to non funtional portal navigation - allow unsafe-inline as well !important

(well, replace bing.com with whatever you need 🙂 ) This sets the content-security-policy header for the page which is for example respected in chrome. (do not forget cache resfresh) ( https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP )

The x-frame options is not what you want as it only allows to be ambedded in other domains (as far as i know, but not sure: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options ) whereas the content securety policy allows you to define both directions.

Nevertheless i would highly recommend not to use access to contentwindows. Use the approach which is proposed as a "workaround" in the link provided by @OliverRodrigues  and use window.postMessage and a registered messagereceiver in the other windows. This is by far more safe and the recommended way to do it.

But i know: sometimes you don't have the embedded page under control...

 

Adam Pfau posted a list of the available settable http headers here: https://community.dynamics.com/365/b/dynamics365portalssupport/posts/http-response-headers-for-dynam...

 

Hope this helps,

  Christian

Highlighted
Power Apps
Power Apps

Re: How to access embedded Iframe contents i.e divs/input etc. to make some changes from portal web page.

This has actually nothing to do with Portal.

You cannot access content of the iframe using Javascript if it belongs to a different domain, this is governed by cross origin policy which browsers will block. Option would be to use window postmessages to interact with the iframe page, however that will only be possible if you have control over iframed page and can listen to this content.

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Tech Marathon

Maratón de Soluciones de Negocio Microsoft

Una semana de contenido con +100 sesiones educativas, consultorios, +10 workshops Premium, Hackaton, EXPO, Networking Hall y mucho más!

Users online (5,232)