WebFund 2016W Lecture 16: Difference between revisions

← Older edit

Latest revision as of 03:48, 20 March 2016

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

// HTML escapting from http://stackoverflow.com/a/13510502

var __entityMap = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
};

String.prototype.escapeHTML = function() {
    return String(this).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

@@ Line 23: / Line 23: @@
 **Include the following in your code to escape html tags
-<code><pre>var _entityMap  = {
+<source lang="javascript" line>
-   “&” : “&amp”,
+// HTML escapting from http://stackoverflow.com/a/13510502
-   “<“ : “&lt”,
-   “>” : “&gt”,
+var __entityMap = {
-   “ “ “ : “&quot”,
+    "&": "&amp;",
-   “ ‘ “ : “&#39”,
+    "<": "&lt;",
-   “/“ : “&#x2F”
+    ">": "&gt;",
+    '"': '&quot;',
+    "'": '&#39;',
+    "/": '&#x2F;'
 };
-function escapeHtml(string) {
+String.prototype.escapeHTML = function() {
-   return String(string).replace(/[&<>"'\/]/g, function (s) {
+    return String(this).replace(/[&<>"'\/]/g, function (s) {
-      return entityMap[s];
+        return __entityMap[s];
-   });
+    });
 }
-</pre></code>
+</source>
 *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