DOMException: Blocked a frame with origin ... from accessing a cross-origin frame.

[Super Grizzly]

I'm trying to setup the IMA sdk with my custom video player and it worked but when I deploy the web code to server I get a "DOMException: Blocked a frame with origin ... from accessing a cross-origin frame." error.

new google.ima.AdDisplayContainer(..., ...);

Everything works fine when I use Chrome with security features disabled. Do you have any ideas why I'm getting this error?

You can reproduce it by going to http://test.twist.moe/a/death-note/1 and looking in the console. You'll find the error in there.

[ima-sdk-adv...@google.com]

Hi there,

Thanks for reaching out to us. Please note that the error messages in the console are saying there are more than one domain present, and that cross-origin resource sharing is blocked. You can use CORS to allow cross-origin access.

Regards,
Deepika Uragayala
IMA SDK Team

=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~
Also find us on our blog and Google+ page:
    http://googleadsdeveloper.blogspot.com
    https://plus.google.com/115658573333388777174/
=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~

--
You received this message because you are subscribed to the Google Groups "Interactive Media Ads SDK" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ima-sdk+unsubscribe@googlegroups.com.
To post to this group, send email to ima...@googlegroups.com.
Visit this group at https://groups.google.com/group/ima-sdk.
For more options, visit https://groups.google.com/d/optout.

[Super Grizzly]

Your CORS link didn't work so I looked up online how I can enable CORS and I found these headers from a guide.

I added these headers to my nginx server but I'm still getting the same error. Is there's something I'm missing?.

[ima-sdk-adv...@google.com]

Hi there,

Do you have trouble opening the linked page? I don't see any issues with the linked page. However, can you go through this page and follow the steps and see if you are still seeing the errors? 

Regards,
Deepika Uragayala
IMA SDK Team
=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~

Also find us on our blog and Google+ page:
    http://googleadsdeveloper.blogspot.com
    https://plus.google.com/115658573333388777174/
=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~

[Super Grizzly]

It was linked to https://developers.google.com/interactive-media-ads/docs/sdks/html5/ads#cors which had no information about CORS and I already checked that CORS section on the site but it still didn't work. I even tried setting the Access-Control-Allow-Origin header to * but even then it doesn't work.

This is what the response headers look like right now: 

If you look below the "ETAG" then you can see it has the right Access-Control-Allow-Origin Header when I make a CURL request with the 'Origin: some.twist.moe' Header.

Do you have any idea why it still won't work?

[Super Grizzly]

I've removed the extra Access-Control headers that weren't part of the page this is what the headers look like right now.

But it still doesn't work. Any idea why? I followed every instruction on the IMA SDK page and the ads play perfectly fine in a Chrome window with security features disabled.

[ima-sdk-adv...@google.com]

Hi there,

CORS is something related to the ad server that is hosting your ads. We can't control your CORS headers with the SDK. It looks like an Ad serving issue and not an issue with IMA SDK.

Let us know if you have any issues with IMA SDK. We will be happy to help you.

Regards,

Deepika Uragayala

IMA SDK Team

=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~
Also find us on our blog and Google+ page:
    http://googleadsdeveloper.blogspot.com
    https://plus.google.com/115658573333388777174/
=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~

[Super Grizzly]

But it happens way before I request a ad though, I tried disabling the code that requested the video ad and everything else and I still get it. It happens when I create a AdDisplayContainer so basically when I run this:

const container = new google.ima.AdDisplayContainer(..., ...);

I think it might be happening because the IMA SDK tries to interact with the IFRAME during instantiation but it fails.

I'm using the Google doubleclick.net example ad btw, the one in the IMA SDK guide from https://googleads.github.io/googleads-ima-html5/simple/. 

This is what the response headers of the ad looks like:

It has both the Access-Control-Allow-Origin and Access-Control-Allow-Credentials headers present. I've seen guides recommending adding tags to the IFRAME so that the page can interact with it but gets made inside the IMA sdk so I can't access it.

[ima-sdk-adv...@google.com]

Hi,

The CORS headers for http://googleads.github.io/googleads-ima-html5/simple/ads.js are set to:

Access-Control-Allow-Origin: *

You don't have to set it to be as permissive as that, you could set the Access-Control-Allow-Origin value to the domain where your page is hosted, for example:

Access-Control-Allow-Origin: http://test.twist.moe

I would try it first with the wildcard to make sure it works.

Thanks,

Yury Pavlotsky

IMA SDK Team

=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~
Also find us on our blog and Google+ page:
    http://googleadsdeveloper.blogspot.com
    https://plus.google.com/115658573333388777174/
=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~

[Super Grizzly]

I've already tried both of them a few days ago I said that in a post from a few days ago and neither of them worked. Do you have a way I can DM you? Using the forum for this is far too slow its been 6 days since I've made the forum post and we've gotten no where with it. 

[ima-sdk-adv...@google.com]

Hi,

You can email our support alias directly at ima-sdk...@google.com.

Thanks,

Yury Pavlotsky

IMA SDK Team

=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~
Also find us on our blog and Google+ page:
    http://googleadsdeveloper.blogspot.com
    https://plus.google.com/115658573333388777174/
=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~

[Super Grizzly]

I've send the email

[Super Grizzly]

We finally fixed it!

I asked Yury if we could try the un-obfuscated version of the SDK with my site so that the errors would be easier to read and he said that he couldn't do it but he hinted that Vue (my frontend framework) might be causing the problem. So I looked again at the error and I noticed that it mentioned something about "Reactivity" and then I remembered that all variables get turned into a special variable called "reactive data" by the framework. So I removed the "adDisplayContainer" variables and "adsLoader" variables outside the framework and it worked!

Looks like that the frontend framework (Vue) was doing something with the "adDisplayContainer" and "adsLoader" variables that made it interact with it and also interact with the iframe which caused the CORS error.