Properly escaping the schematic html attributes.

djangoapps/simplewiki/mdx_circuit.py

@@ -10,6 +10,7 @@ import re
 
 import simplewiki.settings as settings
 
+from django.utils.html import escape
 from mitxmako.shortcuts import render_to_response, render_to_string
 
 
@@ -56,8 +57,9 @@ class CircuitPreprocessor(markdown.preprocessors.Preprocessor):
 class CircuitLink(markdown.inlinepatterns.Pattern):
     def handleMatch(self, m):
         data = m.group('data')
+        data = escape(data)
         ##TODO: We need to html escape the data
-        return etree.fromstring("<input type='hidden' parts='' value='" + data + "' analyses='' class='schematic ctrls' width='150' height='150'/>")
+        return etree.fromstring("<div align='center'><input type='hidden' parts='' value='" + data + "' analyses='' class='schematic ctrls' width='150' height='150'/></div>")
         
     
 def makeExtension(configs=None) :

static/js/CodeMirror/mitx_markdown.js

@@ -58,20 +58,28 @@ CodeMirror.defineMode("mitx_markdown", function(cmCfg, modeCfg) {
   ,   strong   = 'strong'
   ,   emstrong = 'emstrong';
   
+  function escapeHtml(unsafe) {
+      return unsafe
+           .replace(/&/g, "&")
+           .replace(/</g, "&lt;")
+           .replace(/>/g, "&gt;")
+           .replace(/"/g, "&quot;")
+           .replace(/'/g, "&#039;");
+   }
+  
   var circuit_formatter = {
     creator: function(text) {
       var circuit_value = text.match(circuitRE)[1]
       
-      //TODO: We need real html escaping here
-      circuit_value = CodeMirror.htmlEscape(circuit_value);// circuit_value.replace("\"", "'");
+      circuit_value = escapeHtml(circuit_value);
       
       var html = "<a href='#circuit_editor' rel='leanModal' class='schematic_open' style='display:inline-block;'>" + 
-                  "<input type='hidden' parts='' value='" + circuit_value + "' width='150' height='150' analyses='' class='schematic ctrls'/></a>";
+                  "<input type='hidden' parts='' value='" + circuit_value + "' width='150' height='148' analyses='' class='schematic ctrls'/></a>";
       
       return html;
     },
     size: function(text) {
-      return {width: 150, height:154};
+      return {width: 150, height:152};
     },
     callback: function(node, line) {
       update_schematics();