Cross Domain Proof Of Concept With TYPO3 EID And JQuery

I just wanted to post a quick blog to share a small snippet of code that I’m working on to solve an issue with cross-site scripting restrictions, a solution to a very practical and real-world problem.

The (example) issue: A carpet company has a wide network of suppliers, each of which give the carpet company a basic (HTML/CSS/JS) page to put some content about the carpets, prices, contact information, company policy, etc. All of this information is available in the carpet company’s TYPO3-powered website, and it’s updated and improved regularly by the carpet company staff. Ideally the carpet company would like to have the updated information displayed on all supplier websites automatically. How can this be done? With TYPO3 and a bit of jQuery, we can quite easily achieve a workable solution!

Given in our hypothetical situation we are limited to HTML, CSS, and Javascript, one solution that comes to mind is using Javascript to pull in the desired content from the main carpet TYPO3 site. This can be accomplished using JSONP. For those unfamiliar, most browsers enforce a same-origin policy, which prevents us from making a simple AJAX call to get our desired data, so a site such as http://www.acmefloorsuppliers.com couldn’t make a “normal” AJAX call to www.acmecarpets.com; it would be blocked by the browser. So instead, we essentially dynamically load a remote Javascript file/object/JSON, and then evaluate its contents. The magic here is that we pass a parameter to the remote server, which is a function name that the JSON return value is to be wrapped in. So, for instance, the GET string might be something like:

(acme carpet domain).com?eid=id_ajax&value=somevalue&callback=callback123

Our server side code on acmecarpets.com will return what is essentially a function call, like this:

callback123({"results":{"somevalue":"some return value here"}});

In the example below, I’m using jQuery (which I really love by the way!), which automatically takes care of the heavy lifting for us. It will automatically define the callback123 function (in reality this function name is automatically and dynamically generated by jQuery in the example below) and we are left with JSON to work with in our callback function.

Here is a working example in which individual content elements are pulled from tt_content based on their uid (which is what we’re passing in with the GET parameter). Note that this is more of a proof of concept, and not a production-ready snippet. The server side code I wrote does a very minimal amount of security validation – without proper care, this type of script can be dangerous, so ultimately it’s up to the developer to insure safety. The server side code only checks to see that the fe_user is not set for each content element. This example is also not particularly scalable, however it could be much more so if the server side code were fleshed out further. Also, this will NEVER be a great solution for any sort of crucial data. In my example, I have default content loaded in the event that the script fails to load external data; and in our carpet store example we might have a set of default information that is displayed, so in the event of a javascript (or external server) failure our distributors still have the critical information.

If there is any interest in implementation details, or how exactly I wrote my server side code, I will write another blog post going into a bit more detail! Additionally, if anybody has any general ideas about how to go about this task without reinventing the wheel (perhaps this sort of functionality is already built into TYPO3 somewhere?), I’d love to hear it. Down the road I intend to make a version of my server side code which pulls out tt_news or tt_calendar items, but I’m unfamiliar with the inner workings of each of these extensions and am new to development within the TYPO3 ecosystem so would appreciate any pointers!