0
Your Cart
No products in the cart.

If you’ve ever tried to fetch a resource outside of your domain via an Ajax call, you probably got this error message:
This error was triggered by the Same-origin policy. It permits scripts running on pages originating from the same site to access each other’s data with no specific restrictions, but prevents scripts from accessing data that is served from a different domain. Luckily, there are ways round it, including:
This tutorial describes how to set up a local proxy, as per item 4 above, to combine document fragments from another domain with your own web content.
All of the workarounds above have their strengths and weaknesses, but I find that the proxy solution is best for serving up unadulterated HTML content from another domain when your web host supports some sort of server-side scripting such as PHP, .NET, Python, etc.
The idea is simple; you make a request to your own script to fetch a resource from another domain, and it returns it to your browser. Hence, the content comes from your own server – no more Access-Control-Allow-Origin error! Here’s a diagram to illustrate:
proxy_server
Our loadFrame.html page will call our proxy.php script and then parse the response in order to display selected content from my robgravelle.com landing page in an iFrame. You can read more about filtering iFrame content here.
The finished page will look like this:
robgravelle.com_in_iframe
The proxy script executes on the server so that, as far as your browser knows, content is coming from it and nowhere else. I am using PHP because it makes fetching web content a snap and because it runs on my local WampServer with no setup whatsoever.
As mentioned previously, the URL is passed to the proxy script as a GET parameter. Here’s how to read it with PHP:
PHP offers several ways to fetch web content; I settled on file_get_contents(). I just set the Content type header, fetch the web page, and send it back to the browser:
Let’s say, heaven forbid, that the URL was malformed or that the other server was down. The script should include some error handling for that. The file_get_contents() function is a little strange in that, rather than throw an exception, it only fires an E_WARNING level event. Therefore, you can’t use a try/catch. I found that, for my money, what works best is to set my own error handler for E_WARNINGs. Here’s how that works:
Back on the client-side, the loadFrame.html page contains a jQuery-powered script that performs the Ajax call on document load. The target domain is stored to a variable because we’ll be needing it later. Inside the success() handler, we obtain a reference to the iFrame’s contents:
Our Ajax call only contains a success() handler because our proxy doesn’t throw any HTTP errors. Instead, it returns a plaintext string with the error (warning) message. We can check for that by testing for ‘text/plain’ content. If it is, we set the iFrame’s content to the data string, and give it a red font for good measure:
I tried to put off converting the HTML into a DOM for as long as possible. That’s why you’ll see some RegEx parsing in the code. It’s not until the fetching of the “header_content_footer_wrapper” DIV that conversion occurs via the $.parseHTML() method. The second (context) argument is set to null so that inline events will not execute when the HTML is parsed. The false argument ensures that all scripts passed in the HTML string are removed:
A few images in the target page are set using JavaScript that was not included in our page. We don’t need it as it’s just is as easy to do from here:
The last line in the script populates the iFrame. In order, it:
I included the two files in a zip file for your enjoyment. Extract them to your server’s www root and bring up the loadFrame.html page in your browser using your server’s URL as in http://localhost:8080/Frames/loadFrame.html.
Using a local proxy is best for serving up HTML content from another domain when your web host supports some sort of server-side scripting. Just be careful because it also happens to be the riskiest of the cross-domain workarounds due to its importing of raw HTML – and possibly scripting – from other domains.
Subscribe to Developer Insider for top news, trends & analysis
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Advertise with TechnologyAdvice on HTMLGoodies and our other developer-focused platforms.
Property of TechnologyAdvice.
© 2022 TechnologyAdvice. All Rights Reserved

Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.

source