WebFund 2016W Lecture 16

Video

The video for the lecture given on March 10, 2016 is now available.

Student Notes

Exam-forms Vulnerabilities

• The current version of this application is vulnerable to a cross site scripting attack
• What is a cross site scripting attack?
  • The user supplies data that is actually code which gets interpreted by the browser
  • Example from class: <script>alert(“hi there”)</script> is typed into the city field of the form and causes a popup displaying “hi there”
• How is this different from SQL injection?
  • With an SQL injection, code gets interpreted by a back-end database
• Input must be sanitized to prevent these types of attacks
• How can we do this?
  • HTML characters can be escaped so that any HTML code in the input gets transformed to be interpreted purely as a string and displayed in its original format

jQuery Version

• Problem: takes a raw string and puts it in between tags (this is bad) so it gets interpreted by the browser
• Solution: use an escape function to transform the raw string into a sanitized version
  • Include the following in your code to escape html tags

var _entityMap  = {
   “&” : “&amp”,
   “<“ : “&lt”,
   “>” : “&gt”,
   “ “ “ : “&quot”,
   “ ‘ “ : “&#39”,
   “/“ : “&#x2F”
};

function escapeHtml(string) {
   return String(string).replace(/[&<>"'\/]/g, function (s) {
      return entityMap[s];
   });
}

• Problems like this are not hard to fix but they are often forgotten or overlooked because the solutions are not built in to the language

Original Version

• In the original version of exam-notes, we used only Jade and no client-side JavaScript to set up the HTML
• When the same cross site scripting attack is tried on this version, we can see that it is not vulnerable
  • The HTML code given as input gets displayed as actual text on the web page
• Why is it not vulnerable?
  • By default, Jade will escape everything for us
  • For example, #{item.city} when given a value of <script>alert(“hi there”)</script> will be rendered as <script>alert("hi there");</script>
• To prevent Jade from escaping HTML like this, use the bang symbol (!)
  • For example: !#{item.city}

Assignment 5

• All functionality can be found in parts of tutorials 4-7 and past assignments
• We will start a template with the completed graph-demo code
• Template details:
  • The index page is the home screen
  • We won't do any logging in
  • The index page will show stats of uploaded logs
    • How many files
    • How many entries
  • The index page will have a form for uploading a file
  • The index page will have a form for performing query with two radio buttons and a submit button
    • The 1st radio button causes the form submission to do a visualization of the query
    • The 2nd radio button causes the form submission to send the logs to the browser as plain text for download
  • The query form will have fields for
    • Service, message and file as regular expressions
    • Month and day as plain strings

Other Notes

• A favicon is small icon that is displayed in the web page tab