Using Hype to build banners in DoubleClick - Security Issues

Advertising
1

I’ve managed to build a banner for DoubleClick using Hype. When previewing locally, everything is tracking as expected in the console window.

The runtime JS file for Hype is local and not externally hosted and I’m using the Hype API to communicate with different scenes and symbols in my document (which works as expected locally).

However, when I upload to the Studio I receive this error in the console window and the Ad fails to play.

“Uncaught DOMException: Blocked a frame with origin “https://s0.2mdn.net” from accessing a cross-origin frame.”

When clicking on the error, it takes me to this bit of code in my Javascript file:

someVar = window.parent.myhypedocument.getElementById(‘symbol-id’);

Has anyone seen these issues with AdServers before? If so, any recommendations on how to solve this is greatly appreciated.

Thanks in advance

2

seems to be a call from an iFrame ... you may try postMessage to communicate ....

why do you have to communicate between windows¿ in you description it sounds like your working with a single hypedocument ...

3

Yeah sorry, I should have been a little more clear. The project I am working on is date sensitive so I’m swapping the elements in Hype externally (using the API) in addition to swapping videos (which are outside of the Hype composition).

Basically, to make sure the banner is QA approved I often keep the video and controls separate as it provides more control between browsers etc. Another reason, is that I have a hand-coded spritesheet animation so need to go to a new scene once the spritesheet has finished.

I looked in to PostMessage yesterday but I need a domain to communicate with so unsure of how to implement it to an ad server.

4

for example a message like:
window.parent.postMessage(['indentifier', 'value'],*)
should work.

then you’ll need a listener at the postMessage-target to execute some stuff
window.addEventListener(‘message’, function(e) {
var identifier = e.data[0];
if(identifier == ‘xxx’){
var data = e.data[1];
//do something
}
}, false);

1 Like
5

Ok great thanks. I’ll try some stuff out.

Thanks

6

Hi again, I’m kind of getting somewhere but am really confused on where this stuff should go. Does the

window.parent.postMessage(['ready', 'data'], '*')

go in my Hype document (i.e. a function on scene load)? Depending on where I put the listener I’m noticing some alerts so I guess the message is sending but I’m still receiving the same errors and elements from the Hype document are still unrecognized.

window.addEventListener('message', function(e) {
    var identifier = e.data[0];
    if (identifier == 'ready'){
        var data = e.data[1];
       //alert(e);
    }
}, false);

This is the error I am now receiving:

Uncaught DOMException: Failed to read the ‘contentDocument’ property from ‘HTMLIFrameElement’: Blocked a frame with origin

Thanks for the assistance - am very new to Hype

7

Try to post example files for your Setup. So members of the Forum can have a Look. Your explanation is unclear…

8

Yeah sure, here is a simple version of my setup. I’ve commented as much as I can.

So essentially, there is a hand-coded spritesheet animation that calls a function to tell Hype to continue a timeline once it’s finished. Then there is a function that swaps symbols based on the date. All of this works fine locally.

The error in DoubleClick occurs when the API initialisation starts and assigns the custom vars to the Hype ID’s. Is there another way of communicating with the Hype API instead of using “window”?

Thanks again for the assistance

9

300x250-HypeBanner-DC.zip (101.2 KB)

10

hm, your not dealing with iFrames at all.

so your reference to hype within main.js should be

window.myhypedocument

and not

window.parent.myhypedocument

1 Like
11

Ah ok, yeah that makes complete sense now thinking about it as there was no need to post a message to anything. Good to know in case I need to use postMessage in the future though. Couldn’t figure that out. I think I read about the window.parent.myhypedocument from somewhere when I started the project.

That was doing my head in :slight_smile:

Thanks so much for taking the time to look at the files.

1 Like