FPC JS - Fix for CORS issue

[OZZlE]

Page cache JS cannot modify dom of a external iframed page.

How to test (this is a fix for below):
Insert an iframe into your magento page with an external source for example (assuming you aren't google):

<iframe src="https://google.com/"></iframe>

Expected result:
No JS errors in console

Actual result (from chrome):
Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "https://google.com/" from accessing a cross-origin frame.

[magento-cicd2]

All committers have signed the CLA.

[vrann]

@OZZlE PR is merged, thank you for the contribution!

[OZZlE]

You are welcome! :)

[sshymko]

The fix is incomplete as 3rd party iframe URL may contain the site's domain in a query string.

For example, Google Customer Reviews badge.

Example Magento 2 website:
https://www.lillianvernon.com/

The 3rd party iframe:
https://www.google.com/shopping/customerreviews/badge?usegapi=1&merchant_id=101500539&position=BOTTOM_RIGHT&hl=en_US&origin=https%3A%2F%2Fwww.lillianvernon.com&gsrc=3p&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.GBDVBIKSh6E.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCOvjPXLze_vbEyZVBIlOAVh5fcR-g

Notice the domain "www.lillianvernon.com" in the iframe URL, but it's not the Magento page.

[orlangur]

@sshymko it would be more productive to report a new issue referring to this PR rather than to comment in a closed ticket.

[sshymko]

Submitted #9090

[Igloczek]

Already fixed #8005

[winds1983]

Still happened on 2.1.6:
Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "https://***" from accessing a cross-origin frame.

[Igloczek]

@winds1983 it's merged to develop and will be released probably as 2.2.0

[hostep]

Or someone can backport the PR, so it gets included in 2.1.x:
https://community.magento.com/t5/Magento-DevBlog/Pull-Requests-for-2-1-x-Patch-Releases/ba-p/65630 ;)

[Ylmzef]

I have still this issue

[Igloczek]

@Ylmzef On 2.2?

[Ylmzef]

@Igloczek yes

[Igloczek]

@Ylmzef You should open a new issue with a detailed description and steps to reproduce it, b/c code of this and related PR is present in M2.2.

[gcampedelli]

I'm not sure exactly where to write this. But I'm trying to fix this DOM error and I applied more than one suggestion in this forum. I've applied this one: 9e7f664
It didn't fix 3rd party iframe DOM problem, just the error prop. is not a function.

Then I tried to apply this other solution described in another document in page-cache.js : // prevent cross origin iframe content reading
if ($(element).prop('tagName') === 'IFRAME') {
iframeHostName = $('').prop('href', $(element).prop('src'))
.prop('hostname');

            if (window.location.hostname !== iframeHostName) {
                return [];
            }
        }

It did fix iframe problem but it breaks checkout credit card form. I don't have how to fix credit card form. I know that the payment module uses Vanilla JS.
So, is there any other advice on how to prevent that?

[OZZlE]

@gcampedelli have you tried this one? https://github.com/magento/magento2/pull/8005/files

[OZZlE]

@gcampedelli maybe that was the one you were referring to? Might be better to create a new issue instead

[gcampedelli]

Hello Ozzie, yes, I tried this one as well. https://github.com/magento/magento2/pull/8005/files.
But It breaks payment module. Fix for iframe issue in console without breaking payment was

`/**
* @param {jQuery} element - Comment holder
*/
(function lookup(element) {
if (element.nodeName === "IFRAME") {
var iframeSrc = document.createElement('a');
iframeSrc.href = element.src;
if (window.location.hostname !== iframeSrc.hostname) {
}
}
$(element).contents().each(function (index, el) {
switch (el.nodeType) {
case 1: // ELEMENT_NODE
lookup(el);
break;

                case 8: // COMMENT_NODE
                    elements.push(el);
                    break;

                case 9: // DOCUMENT_NODE
                    lookup($(el).find('body'));
                    break;
    })(this);

    return elements;
};`

I just got an unexpected token that maybe easy to solve. These are lines that are in red here - 3026e81