Matthew D Fuller - Blog: PHP

Friday, July 13, 2012

Defeating X-Frame-Options with Scraping

Introduction

Iframes are an element of web design that are loved and hated. Web developers (used to) love them because they easily allowed resources from various sites to be loaded on-demand within a webpage. Security professionals hate them because they allow content of one site (such as a login page) to be loaded within another site that may not be trusted. This introduces a security concern known as click-jacking where a malicious site overlays invisible elements over what the user believes is a safe login form.

The Solution

Since these concerns arose, the X-Frame-Options header was developed to prevent the loading of one site within an iframe of another. This header is supported by all major browsers and includes two options:

SAMEORIGIN - the site can only be loaded within pages of the same domain
DENY - the page cannot be loaded in a frame at all

From: https://developer.mozilla.org/en/The_X-FRAME-OPTIONS_response_header

Page Scraping

The goal of X-Frame-Options, as described above, was to prevent the loading of one site within another, potentially malicious site. However, there are multiple ways a site's contents can be displayed, and an iframe is only one. Page scraping can be done via a server-side PHP, Python, or other language script. The code below is an example of how a page's code can be loaded using PHP:

<?php

$userAgent = 'Googlebot/2.1 (http://www.googlebot.com/bot.html)';

$url = "https://www.yahoo.com/";

$ch = curl_init();

curl_setopt($ch, CURLOPT_USERAGENT, $userAgent);

curl_setopt($ch, CURLOPT_URL,$url);

curl_setopt($ch, CURLOPT_FAILONERROR, true);

curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);

curl_setopt($ch, CURLOPT_AUTOREFERER, true);

curl_setopt($ch, CURLOPT_RETURNTRANSFER,true);

curl_setopt($ch, CURLOPT_TIMEOUT, 10);

$html = curl_exec($ch);

echo $html;

This small bit of code, when loaded on any website, at any URL, will cause the contents of Yahoo's home page to be displayed. A malicious user could overlay hidden elements over the $html echoed out and easily execute the same attack X-Frame-Options prevents.

Protections

Luckily, some large websites like Google and Facebook are aware of issues like these and use a complex combination of user-agent and IP address checks to prevent server-based scripts from loading their content. Replace yahoo.com with facebook.com/your_username in the code above and you'll notice that nothing loads.

You Don't Even Need a Server!

This problem is not typically able to be replicated on a simple HTML page without server-side code because JavaScript has cross-domain policies that prevent it from retrieving content from a different domain (in other words, you can't scrape the HTML using just JavaScript). However, through some clever trickery, http://call.jsonlib.com/ has enabled JavaScript scraping. What is actually happening is the JavaScript makes a call to a server hosted on the public Internet which serves as a middle-man. So the same process is happening (server-side scraping), it is just being called locally using JavaScript.

For this to work, save the file: http://call.jsonlib.com/jsonlib.js locally. Then, create a simple HTML page with the following code:

function fetchPage(url) {

jsonlib.fetch(url, function(m) { document.getElementById('test').innerHTML=m.content; });

}

</script>

</div>

Most likely many large websites block sites that enable this middle-man functionality. However, it is easy for anyone with access to a server to recreate the process. X-Frame-Options are very useful, but there is no need to use iframes any longer when copying the entire site's code locally works just as well. To protect yourself against these kinds of attacks, always make sure that you do not enter sensitive data on domains you do not trust. Always check the URL bar before typing!

Sunday, March 20, 2011

Convert a PHP Array to a JavaScript Array

Many times when working with advanced web applications it may be necessary to convert an array of PHP variables into an array of JavaScript variables. I stumbled upon this issue in some recent web development work and most of the solutions online seemed incredibly complicated for such a simple task.

JavaScript is different than PHP because JavaScript allows manipulation of the page data on the client side (meaning no page refreshes are necessary). PHP works by sending information to a server (server side) to manipulate and return. This means that page refreshes are necessary (typically). So let's say you have an array of strings in PHP; we'll call it "phpArray()". This array may be created in PHP with the following PHP code:

$phpArray = array("Word One", "Word Two", "Word Three", "Word Four");

Now we have a $phpArray variable in PHP that contains the words as strings. To convert this array to a JavaScript array, we are going to first create a string from the PHP array by running through a PHP loop. First, we will declare a string variable in PHP to hold the loop's contents:

$string = ""

Now we're going to loop through the loop and add each element of the array to the string with quotes around it. (Note: this is for an array of strings. An array of ints should be handled as strings in PHP, but passed to JavaScript without the quotes.)



foreach ($phpArray as $a) {

$string .= "\"" . $a . "\", ";

}

This code creates a PHP string that looks like:

$string = "Word One", "Word Two", "Word Three", "Word Four",

Now, we need to do one final thing. This code loops through the array and adds a comma (,) and space( ) to the end of each array element. That means that the resulting code will appear as "Last Word", We don't want this because it will mess up our JavaScript. To cut off this last comma and space, we will do:

$finalstring = substr($string, 0, (strlen($string) - 2));

This code removes the last comma and allows us to place it into our JavaScript. In the JavaScript section of our page, we're now going to add:



<script language="javascript" type="text/javascript">

            var jsString = new Array(<?php echo $finalstring; ?>);

</script>

We now have a JavaScript array called "jsString" which contains all of the elements of the PHP string array. It would be the same as writing:



var jsString = new Array("Word One", "Word Two", "Word Three", "Word Four");

That's all there is to it. If you have any questions, just leave a comment!

Pages