The Body: JavaScript Layer

Our final layer is the JavaScript content. This script block includes only the getFile() function that will load and parse our content:

<script type="text/javascript">
function getFile(){
   var errorMsgNode = $('#errorMsg'),
   errorMsgNode.css("display", "none");

   var filePath = $('#file').val();

   if (filePath.length > 1){
      $.ajax({
         url: filePath,
         success: function(data){
            //load unmodified code
            $('#original_raw').text(data);
            $('#original_rendered').html(data);

            //load cajoled content
            var cajoled_data = html_sanitize(data);
            $('#cajoled_raw').text(cajoled_data);
            $('#cajoled_rendered').html(cajoled_data);
         },
         error: function(request){
            var errorMsg = "Failed to load file"
                         + "<br />Status: " + request.status
                         + "<br />Error: " + request.statusText;

            errorMsgNode.css("display", "block");
            errorMsgNode.html(errorMsg);
         }
      });
   }
}
</script>
</body>
</html>

When the user enters a file location for the mixed HTML/JavaScript content that he would like to load and then clicks Submit, the getFile() function jumps into action.

Since we want to provide the user with some form of error messaging if something goes wrong, we first capture our error message node and ensure that it is hidden in case the previous attempt to load a file produced an error message that is still being displayed.

We then capture the file path that the user entered and, if it isn’t blank, we make an AJAX request to get the content of that file. There are a few configuration options set up to handle different eventualities when we’re running the request, including:

url

The URL to which we are making the request.

success

If the AJAX request succeeds and returns a valid HTTP response, we first load the unmodified return content into the original raw and rendered nodes by using the jQuery .text or .html methods on the respective nodes. We then take the raw data and run it through the html_sanitize method to strip out any nodes that may be malicious, as defined by the html4-defs.js include. Once the data is cajoled, we load that modified content into the respective raw and rendered nodes.

failure

If the AJAX request failed with an invalid HTTP response, we create an error message string made up of a static error node, the HTTP status code, and the HTTP status text. We then place that string into our error message node and set it to a visible status.

That makes up the meat of our example, providing all of the functionality we need to run a side-by-side comparison that shows how Caja sanitizes an original source to prevent malicious attacks.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.37.38