Search code examples
asp.net-mvciframecross-domaincontent-security-policyclickjacking

Cross domain communication is not happening after adding Xframeoptions : Sameorigin

I am working on implementing prevention of Clickjacking for our site. I started by adding header X-Frame-Options : sameorigin. With this Our site cannot be loaded into any iframes hosted by any other sites, so Clickjacking part worked fine.

Now the problem, we have few pages where we are using iframes to load hosted forms of payment gateway which is making use of iframeCommunicator Url option for cross domain communication. After adding X-Frame-Options header the hosted form is not communicating with the payment gateway.

I am getting below error in console: Refused to display 'http://localhost:44352/examplesite/payment/iFrameCommunicator#action=resizeWindow&width=1106&height=152' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

The above error came for the header I set inside webconfig as below

<httpProtocol>
  <customHeaders>
      <add name="X-FRAME-OPTIONS" value="SAMEORIGIN" />
  </customHeaders>
</httpProtocol>

Other settings that I have tried : 

<add name="X-Content-Security-Policy" value="frame-ancestors 'self' *.example.net*" /> 

<add name="Content-Security-Policy" value="frame-ancestors 'self' *.example.net*" />

where .example.net is the payment gateway url used for fetching hosted form.

Solution

  • Considering...

    • You want to deny your site to be iframed by others, but allow the iframe to serve content from your own site:

      <add name="Content-Security-Policy" value="frame-ancestors 'self';" />

      Which has the same effect as the older X-Frame-Options header:

      <add name="X-Frame-Options" value="sameorigin" />

    • And you want to allow the iframe containing the payment gateway pages:

      <add name="Content-Security-Policy" value="frame-src *.example.net;" />

    So you need to set both HTTP headers. Note that the HTTP headers are only added to your pages, not to the payment provider pages, they are served by another server.

    However...

    This doesn't explain why you couldn't serve content from the payment gateway in the iframe by setting X-FRAME-OPTIONS header to allow sameorigin, as you described earlier.