Programming Social Applications

Centralize JavaScript: Request Data and Markup Only

Note

Separating out your JavaScript, HTML, and CSS layers can help alleviate many of the issues that Caja introduces in a fully embedded system.

As we have touched on once or twice already, the Caja client-side sanitizer can be a much stricter system than the server-side cajoler. This client-side part of Caja tends to strip out all JavaScript and any potentially malicious HTML and CSS from the data being pushed on the site or application.

This issue will surface when the developers are trying to make HTTP requests—such as a standard AJAX request—to another source to obtain new content for the web application. The client-side sanitizer springs into action when the request completes and the content is about to be inserted into the application via an innerHTML call, through creating new DOM nodes and appending them to the application, or by way of any other similar insertion utility.

Let’s say we have an application that has multiple pages. When a user clicks on a new page, an AJAX request fetches new markup for the page from the server and then replaces the current page when the request completes. Some developers might tend to encapsulate each page as a single unit, including the required JavaScript to run that particular page right in the markup that is returned to the application. This is where the trouble will arise, since the client-side sanitizer will strip all of that JavaScript from the return.

One of the best options for implementing ...