WebFund 2016W Lecture 16: Difference between revisions

From Soma-notes
Created page with "==Video== The video for the lecture given on March 10, 2016 [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/lectures/comp2406-2016w-lec16-10Mar2016.mp4 is now availab..."
 
 
(2 intermediate revisions by 2 users not shown)
Line 3: Line 3:
The video for the lecture given on March 10, 2016 [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/lectures/comp2406-2016w-lec16-10Mar2016.mp4 is now available].
The video for the lecture given on March 10, 2016 [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/lectures/comp2406-2016w-lec16-10Mar2016.mp4 is now available].


==Notes==
==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: <code><script>alert(“hi there”)</script></code> 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
 
<source lang="javascript" line>
// 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];
    });
}
</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
 
====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, <code>#{item.city}</code> when given a value of <code><script>alert(“hi there”)</script></code> will be rendered as <code>&amp;lt;script&amp;gt;alert(&amp;quot;hi there&amp;quot;);&amp;lt;/script&amp;gt;</code>
*To prevent Jade from escaping HTML like this, use the bang symbol (!)
**For example: <code>!#{item.city}</code>
 
 
===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

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 &lt;script&gt;alert(&quot;hi there&quot;);&lt;/script&gt;
  • 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