Remove X-Frame-Options header when testing responsive web applications and sites

TLDR; Some sites issue an X-FRAME-OPTIONS header that stops them loading in an iframe, remove it for responsive web testing with a proxy.

Does your favourite responsive testing tool fail to display the site you want to test? Have you blamed the tool and now rely on browser dev tools? Well, here’s a possible solution for you.
But before that, let’s look at that situation in more detail:

  • you want to practice your responsive web testing,
  • you have your responsive web testing tool
  • it loads your chosen web site into an iframe
  • your chosen web site doesn’t want to load in an iframe
  • your tool displays a blank image, with no error, instead of the page
  • you curse and go back to the browser dev tools

Stop.

Chances are, all that happened was the server sent an X-FRAME-OPTIONS header in the response e.g.

X-Frame-Options: SAMEORIGIN

or

X-Frame-Options: DENY

But we don’t let that stop us

All we have to do is call upon our favourite HTTP proxy, and remove the header.
The examples here will use Fiddler and Owasp ZAP, I’m sure you’ll be able to do something similar in your chosen tool.

Fiddler

In fiddler, use the FiddlerScript tab and amend the OnBeforeResponse method to include the lines

// remove x-frame-options header from the response
oSession.oResponse.headers.Remove["X-Frame-Options"];

Then when your browser is proxying through Fiddler, your responsive testing tool should not be hampered by the headers.

Owasp Zap

We can do the same thing in ZAP Proxy by creating a proxy script:

function proxyRequest(msg) {
return true
}

function proxyResponse(msg) {
msg.getResponseHeader().setHeader("X-Frame-Options", null);
return true
}
 

And you go from zero, to hero

And now you can use your favourite responsive web testing tool all you want.
Source: EvilTester
Remove X-Frame-Options header when testing responsive web applications and sites

Share This Post

Show Buttons
Hide Buttons