topic Re: AUthorize.net hosted payment page not working in Chrome Version 60 in Integration and Testing

AUthorize.net hosted payment page not working in Chrome Version 60

debasishbose2k — Wed, 09 Aug 2017 16:07:14 GMT

We are getting this error

on the click of submit on the hosted payment form.

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://xxxx.xxx.com') does not match the recipient window's origin ('null').

I read some documentation in internet and noted the problem there mentioned as well . Adding for reference
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/fsDaKFqvU20

The hosted payment iframe failing Chrome60 , but is working in other browsers (namely Firefox/IE)

Please advise ,

Re: AUthorize.net hosted payment page not working in Chrome Version 60

NexusSoftware — Wed, 09 Aug 2017 17:52:12 GMT

Check out https://nexwebsites.com/authorizenet/ with your version of Chrome, as I am now with Chrome Version 60.0.3112.90. If you get no error message, it's your implementation.

Re: AUthorize.net hosted payment page not working in Chrome Version 60

Aaron — Wed, 09 Aug 2017 23:57:32 GMT

Hi @debasishbose2k,

Even if this ends up being something on your side, please share details with us here. I'd like to be able to prevent anyone else from running into whatever problem you've run into.

How are you calling the payment form, by redirecting the browser or embedding into an iframe?
Are you posting an iFrameCommunicator URL in your token request?
Anywhere we can see the code or see the website in action?

Re: AUthorize.net hosted payment page not working in Chrome Version 60

rcourtois — Thu, 10 Aug 2017 16:21:29 GMT

I seem to have hit the same problem. In my case, the payment form is embedded in an iframe and I am sending an iFrameCommunicator URL in the token request.

The payment form would work in Firefox (54.0.1), but not in Chrome (60.0.3112.90). In the Chrome console, the following error would display when the payment form loaded into the iframe:

Refused to display 'https://xxxxxx/system/payment/iframecommunicator.html?procData=xxxxxxxxxxxxxxxxx#action=resizeWindow&width=935&height=864' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

The web server was sending the header:

X-Frame-Options: SAMEORIGIN

when the iframe communicator page was sent back. Elliminating that header for the iframe communicator response does allow the form to post the result of the charge back to the application.

Re: AUthorize.net hosted payment page not working in Chrome Version 60

wundbread — Thu, 10 Aug 2017 17:54:40 GMT

I can confirm, same error in Chrome 60.

Here is the link to the google page that explains that change (and confirms that it was released in Chrome 60)

https://www.chromestatus.com/feature/4678102647046144

Trying a Content-Security-Policy header to fix it. Will report back with results.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors

Re: AUthorize.net hosted payment page not working in Chrome Version 60

wundbread — Thu, 10 Aug 2017 19:07:01 GMT

Unfortunately the X-Frame-Options: sameorigin header seems to win over a Content-Secuirty-Policy: frame-ancestors right now, so I am forced to remove the X-Frame-Options header and add a CSP header event though it only works for some web browers.

Re: AUthorize.net hosted payment page not working in Chrome Version 60

debasishbose2k — Thu, 10 Aug 2017 21:23:26 GMT

These are the answers

We are embedding the payment form in an iframe

We pass the irame url in the token request

YEs , I can schedule a webex (today 3-6 PM PST) or Friday (9-6 pm PST)

Re: AUthorize.net hosted payment page not working in Chrome Version 60

Aaron — Thu, 10 Aug 2017 22:51:56 GMT

Hi @debasishbose2k,

Thanks for the response and the offer to conference about this. I apologize, but I'll actually be out of the office until Monday. If we haven't come up with good ways to duplicate this or reliable recommendations of how to avoid this by then, I'll definitely want to get together with you next week.

Re: AUthorize.net hosted payment page not working in Chrome Version 60

NexusSoftware — Fri, 11 Aug 2017 15:16:19 GMT

Hi @Aaron,

It's true, this is a valid issue with the newest versions of Chrome.

The X-Frame-Options directives are deprecated, the modern alternative is the Content-Security-Policy header, which along with many other policies can white-list what URLs are allowed to host your page in a frame, using the frame-ancestors directive, frame-ancestors supports multiple domains and even wildcards.

One way to resolve this issue on Apache is to use the following in your .htaccess file.

Header set Content-Security-Policy "frame-ancestors 'self' *.YOUR_WEBSITE.com *.authorize.net"

Or for a specific file:

<Files iCommunicator.html>
Header set Content-Security-Policy "frame-ancestors 'self' *.YOUR_WEBSITE.com *.authorize.net"
</Files>

See a working example at : https://nexwebhost.com/authorizenet/gethosted.html

Re: AUthorize.net hosted payment page not working in Chrome Version 60

debasishbose2k — Wed, 16 Aug 2017 16:53:42 GMT

I would like to confirm that the Hosted payment page did work in our environments once we added the Content Security Policy Header in the request . THe x-frame header request seems to be deprecated by Chrome in Version 60(as suggested by other developers) , and eventually be for other modern browsers. We changed our setting to add the new Attribute in header and that helped it to work seamlessly.

Thanks and regards

Debasish

Re: AUthorize.net hosted payment page not working in Chrome Version 60

Aaron — Wed, 16 Aug 2017 18:26:06 GMT

Thanks @debasishbose2k, @NexusSoftware, and everyone else on this thread for sharing your experiences. We've got a good understanding of the challenges now. From a documentation perspective, we'll try to come up with ways to help people understand the ins and outs of frame security and give some recommendations. We also have engineers looking at what possible solutions we can implement on our end.

Again, thanks!

Re: AUthorize.net hosted payment page not working in Chrome Version 60

vallapus — Mon, 21 Aug 2017 16:24:48 GMT

Hi,

Thanks for posting the solution.

I have a question related to this. Since X-Frames is deprecated, does CSP server the same purpose from other servers to not allow framing.

Re: AUthorize.net hosted payment page not working in Chrome Version 60

Aaron — Tue, 22 Aug 2017 23:51:29 GMT

Hi @vallapus,

It's my understanding that it does, but it may not be as simple as just replacing one header with another, depending on which browsers you're trying to support. You may have to determine whether your targeted browsers all support the aspects of CSP that you want, and if not, come up with some hybrid approach.

Re: AUthorize.net hosted payment page not working in Chrome Version 60

raviparmarce88 — Wed, 13 Sep 2017 09:35:32 GMT

@Aaron,

We are also facing same issue.

Could you please update the implementation document with some proper hybrid approach.

Also it would be helpful if authorize.net publish this on news and update page.

I will try with the solution suggested by @NexusSoftware and come up with result.

Re: AUthorize.net hosted payment page not working in Chrome Version 60

Aaron — Wed, 13 Sep 2017 16:23:48 GMT

Hi @raviparmarce88,

Thanks for the input.

This isn't really a problem specific to us, but to anyone using any CSP headers or X-Frame-Options on their sites. If you don't use those headers, there's no problems with our forms, and if you do, you will run into different behavior on newer browsers when you start getting into frames within frames like this, whether we're involved or not.

If someone runs into that problem with our services, we still want to help them as much as we can, though. I'll make sure we at least address this in our developer FAQ, although a blog post would be a good idea. I'd like to encourage more people to think about security anyway, so a blog post walking someone through the "right" way to lock down our frames would definitely be useful.

Re: AUthorize.net hosted payment page not working in Chrome Version 60

ioiki — Fri, 27 Apr 2018 10:00:12 GMT

i m also getting same error on Chrome browzer..

Refused to display 'https://mysiteurl.com/scripts/IFrameCommunicator.html#action=resizeWindow&width=736&height=401' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
15:20:54.600

Any Sloution on this...

Re: AUthorize.net hosted payment page not working in Chrome Version 60

daskjeeves — Thu, 12 Jul 2018 20:45:34 GMT

Any ideas on this? I've read through all the posts on the iframe on the forum and not having much luck getting the communicator to work because of the 'sameorigin' issue

Re: AUthorize.net hosted payment page not working in Chrome Version 60

Vikas_chauhan — Fri, 19 Apr 2019 13:25:50 GMT

am also getting this issue recently in my chrome Version 67.0.3396.99 (Official Build) (64-bit).

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided (server URL on https) does not match the recipient window's origin ('https://test.authorize.net').

same for production.

Re: AUthorize.net hosted payment page not working in Chrome Version 60

introin — Tue, 08 Sep 2020 11:53:45 GMT

Hey fellow Developers,
I too face the similar issue.
I am using hosted form in Laravel framework.
Now tricky part is that I am only getting this issue when iframecommuicator return url is under Laravel auth. Post removing from auth, it is working fine and no domwindow or corss origin error.

I have tried adding "allowing cross origin requests in Laravel routes too" with no success.

If any one can suggest configuration or setting here specifically to get rid of this issue.

P.S. This issue only happens in chrome and not in firefox.

Re: AUthorize.net hosted payment page not working in Chrome Version 60

jfkrueger — Thu, 31 Dec 2020 16:59:23 GMT

We are having the same issue and applying the content-security-policy via web.config file (asp.net/IIS) is not working. We are passing a paymentProfileId in the token.

We are still seeing the error in the console.
- Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('our domain') does not match the recipient window's origin ('auth.net domain')
The payment gets cut off and is not the correct size so you cannot see all of the fields.
The purchase window does not close after a purchase.

Example of web.config:

We have even tried with the Content-Security-Policy-Report-Only but still no luck, it acts the same.

What can we do when the content-security-policy is not working?