Unanswered

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

(0) Share

Report

Posted on by Community Power Pla...

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

All responses (7)

Answers (0)

rulesrchanged1 on at

Like (1)

Report

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.
Christian Leverenz 1,214 on at

Like (2)

Report

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-dynamics-365-portals

Hope this helps,
Christian
oliver.rodrigues 9,342 Most Valuable Professional on at

Like (0)

Report

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-accessing-a-cross-origin-frame
Community Power Pla... on at

Like (1)

Report

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
oliver.rodrigues 9,342 Most Valuable Professional on at

Like (0)

Report

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
Community Power Pla... on at

Like (0)

Report

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
oliver.rodrigues 9,342 Most Valuable Professional on at

Like (0)

Report

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.