[RESOLVED] Can a page containing an iframe apply styles to the contents of the iframe?

sneakyimp

I have been working to implement a Hosted CIM payment page for someone. The basic idea is that some javascript runs in response to a button click that creates a popup iframe on one's page. The customer enters their payment information into the page displayed in the iframe which is hosted via HTTPS by Authorize.net themselves. The reason for this Hosted CIM technique is to allow the use of the authorize.net gateway in an environment where PCI Compliance is not possible such as the Rackspace Cloud*.

The problem, aside from a crappy SDK and bad example code, is that the page that gets displayed in the iframe looks really crappy. I'm really hoping that I can change its appearance with some CSS. Before I go creating some wacko CSS to style their page, I thought I should ask can you put CSS on your page to change the appearance of a page that appears in an iframe which is (securely) hosted on another domain? Seems to me this would present a security problem.

I had already written code to use Authorize.net's traditional methods which was running on a dedicated machine. We wanted to move the system to their cloud for improved scalability but their tech support guys told me that the Cloud Server product is not PCI compliant. I didn't want to believe it but he insisted.

bradgrafelman

I don't think you can use strictly CSS in the parent page to affect the contents inside the iframe. The iframe is, in my mind, a window into a completely separate HTML document.

There are techniques to manipulate the DOM contained within an iframe, but most modern browsers will prohibit any scripting languages from accessing that DOM if the iframe's contents did not originate from the same domain as the parent page.

sneakyimp

bradgrafelman;11022401 wrote:
I don't think you can use strictly CSS in the parent page to affect the contents inside the iframe. The iframe is, in my mind, a window into a completely separate HTML document.

There are techniques to manipulate the DOM contained within an iframe, but most modern browsers will prohibit any scripting languages from accessing that DOM if the iframe's contents did not originate from the same domain as the parent page.

Thanks for your response. I figured as much and have no desire at all to even bother using a DOM approach. I expect my client will be sorely disappointed.

bradgrafelman

sneakyimp;11022407 wrote:
I expect my client will be sorely disappointed.

I would have been sorely disappointed the moment the word 'iframe' was uttered! (But then again, I'd probably be a terrible client for most developers. :p)

sneakyimp

bradgrafelman;11022419 wrote:
I would have been sorely disappointed the moment the word 'iframe' was uttered! (But then again, I'd probably be a terrible client for most developers. :p)

I've been sorely disappointed myself with Authorize.net. The PHP SDK is complete junk. I would imagine they are making money hand over fist. They should at least hire some decent PHP developers to build a proper SDK. Got any interest in making a pitch to them 😃

NogDog

You might be able to do something using JavaScript "Inception", whereby the iframe and the parent page can talk to each other via some rather circuitous tricks. I'm not real up on it all, but if Rulian ever checks in here, he can tell you all about it. 🙂

sneakyimp

That sounds not only like a XSS security problem but also a browser compatibility nightmare as well.

NogDog

sneakyimp;11022477 wrote:
That sounds not only like a XSS security problem but also a browser compatibility nightmare as well.

I think both the containing page and the IFrame page have to "agree" to communicate with each other -- it can't be done unilaterally by one or the other.

sneakyimp

NogDog;11022487 wrote:
I think both the containing page and the IFrame page have to "agree" to communicate with each other -- it can't be done unilaterally by one or the other.

I doubt I can extract this agreement from Authorize.net -- they are a payment gateway.

I think we are all in agreement that this is not a good idea, but I wonder if there is any official policy against it? I.e, some RFC somewhere that forbids it or some coalition of web standards that decries it?

NogDog

By "agreement", I don't just mean that they contractually allow it, but that their page must include the necessary JavaScript to allow the communication between it and the containing page's JavaScript (or vice versa). So yeah, it's pretty unlikely that they'll add the necessary code just for you. 😉