Controlling network access

The host page you create has full control over the guest code's access to the network. Here's how to take advantage of this.

Create guest code

Assume your third-party guest code is as follows (also available here):

    <img src="a.png">
    <img src="b.png">

When displayed directly, the page should look like this:

Create host page

Now create your host page as follows (also available here):

    <title>Caja host page</title>
    <script type="text/javascript"

    <h1>Caja host page</h1>
    <div id="guest"></div>
  <script type="text/javascript">
    var uriPolicy = {
      rewrite: function(uri) {
        if (/a\.png/.test(uri)) { return uri; }
        return undefined;
       cajaServer: '',
       debug: true
     caja.load(document.getElementById('guest'), uriPolicy, function(frame) {

The uriPolicy object contains a callback, rewrite, which Caja will invoke whenever guest code attempts to use the network — even to load an image declared in the guest HTML. When you run this code, you will notice that a.jpg is displayed in the HTML because your URI policy returned a.jpg for its URI, but b.jpg is not because your URI policy returned null.

Calls to the URI policy are made directly by Caja to your code. There is no need for any portion of the URI policy to be tamed.

When displayed, the guest page should look like this (note that, consistent with your policy, only the first image is displayed):

Caja invokes your URI policy for all network access initiated by the guest, including image embedding (as demonstrated), hyperlinks; and XMLHttpRequest

Run it yourself


  • You controlled the network access granted to guest code.

Next steps