Try before you buy. It’s a tried and tested method of getting new customers. Let the (potential) customer use your product with absolutely no commitment required on their part – that’s what we aimed to do with our preview tool.
We let people preview what elevio might look like if they were to install it on their own website. All they need to do is enter the URL they want to preview elevio running on, then they can play about with settings like it’s color, location etc.
You can check this out yourself by heading to our preview tool here: http://elev.io/app/preview
The easy part
To do this, all we did was create a page that had a top settings bar, added the widget, and added a huge iFrame that contained the page you wanted to preview. Simple.
This worked great for most sites, however the more serious a site, the higher its security. This often meant there was a server setting that prevented their site from being run inside an iFrame.
When we attempted to load the page, we could do a quick test to see if this was the case, and show the user something like this:
Not really the message you want to display when Elon Musk comes to your site.
The workaround
So, I decided to work on a workaround for this, and it turned out to be fairly simple to do.
Basically, I’m using the file_get_contents PHP function to get the raw content of the page and print that to the screen.
This works well, but we then need to make sure that it’s loading the correct assets. If it’s trying to load an image from /img/logo.jpp for example this will fail since it will be looking in the wrong location as the root when we print directly to the screen from our preview page.
Below is the simply function to grab a pages content, make the required tweaks, and display it to the user.
public function backdoor($url) { $parse = parse_url($url); $domain = $parse['scheme'] . '://' . $parse['host'] . '/'; $content = file_get_contents($url); $base_url = ''; $content = str_replace('', $base_url . '', $content); $content = str_replace('src="/', 'src="' . $domain, $content); $content = str_replace('href="/', 'href="' . $domain, $content); return $content; }
The result
This allows us to bypass the ‘X-Frame-Options’ to ‘SAMEORIGIN’ issue, and display the site in the preview tool like this:
