On January 31st, 2021, we will be archiving the Caja project. After January 31, no new features will be added, pull requests and other issues will no longer be addressed, including patches for security issues, and the repository will be marked as archived. Caja has not been actively maintained or developed to keep up with the latest research on web security. As a result, several security vulnerabilities have been reported to Caja, both by Google’s security engineers and by external researchers.

We encourage users of Caja's HTML and CSS sanitizers to migrate to Closure toolkit, an open source toolkit for Javascript. Closure is used by applications, including Search, Gmail, Docs and Maps.

The Closure library has built-in HTML and CSS sanitizers and provides native support for key security mitigations like Content Security Policy and Trusted Types. Additionally, Closure templates provide a strictly contextual auto-escaping system, which can drastically reduce the risk of XSS in your application.

Caja Playground

The Caja Playground is a programming environment where you can quickly enter, or link to, HTML, CSS and JavaScript code, and immediately run it under Caja.

Running the Playground

The easiest way to get familiar with Caja is by trying out a few simple snippets in the Caja Playground.

Visit the playground by opening http://caja.appspot.com/ in another tab or window.

You should see the Caja playground:

UI screenshot

Click on "Canvas Clock" in the menu on the left panel:

UI screenshot

The HTML source of the "Canvas Clock" loads and is displayed in the Source tab. Note that you can modify the source before cajoling it, as well as reference other scripts, stylesheets, images and other webpages as you ordinarily do in HTML.

Click Cajole to see the result:

UI screenshot

To use the cajoled code, you can switch to the Cajoled Source tab and cut and paste it into your source file. The Cajoled Source tab includes a link to caja.js which sets up your page as a host page.

Review

  • You learned how to use the Caja Playground; and
  • You saw how the various tabs in the Playground allow you to examine the internals of how Caja transforms code.

Next steps