conditionally adding logo to iframe

Question

I am using iframes to serve content that I want people to be able to embed on their own sites. I am also embedding these iframes on my own site (mysite.com in the code below).

I am using the following javascript function

function addLogo() {
    if (window.top.location.host != "mysite.com") {
        $("#logo").html('<a href="...mysite.com" target="_parent"><img src="...mysite.com/logo.png" border="0"></a>');
    }
}

to check where the iframe is embedded. If the iframe is embedded anywhere other than the my site, jquery is used to add a small logo / back-link to the frame.

The main site is hosted on a shared server and the embedded html and js files are in an Amazon S3 bucket. Having the js file check on the location of the parent window is causing security errors in both Firefox and Chrome

Firefox:

Error: Permission denied to access property 'host'

Chrome:

Uncaught SecurityError: Blocked a frame with origin "...amazon.s3Bucket" from accessing a frame with origin "...mysite.com". Protocols, domains, and ports must match.

Is there a way to use js to conditionally add the logo based on top.host without causing these errors or creating security problems?

I am hoping to stick with js so that I can serve the iframe content (html and js) from Amazon S3

You're violating [Same-origin policy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript). — Teemu, Dec 12 '13 at 16:28
Is there any way to have js query the parent of the iframe without violating the same-origin policy? — Andrew Staroscik, Dec 12 '13 at 16:35
Yes, if you can control both pages, please check [this SO answer](http://stackoverflow.com/a/3076648/1169519). — Teemu, Dec 12 '13 at 16:37
@Teemu It looks like window.postMessage will give me the functionality I want. Thanks — Andrew Staroscik, Dec 12 '13 at 20:16

conditionally adding logo to iframe

0 Answers0