# Attacks Spike  --- ## How might our websites be vulnerable to hacking? ### Questions to consider 1. What are the following types of attack? - Cross Site Scripting (XSS) - Cross Site Request Forgery (CSRF) 2. How can you defend against each of them? --- - Basically two strategies we've covered - using user input to insert malicious code. This is callled XSS - stealing cookies left around on the target's computer so that you can impersonate the target. This is called CSRF, or cross-site-resource-forgery --- ## 1. XSS (injection) ### What is it > Allows an attacker to inject into a website malicious client-side code.  - In other words, XSS allows the attacker mess up your computer with a few lines of code over the browser --- ## XSS explained further - The attacker uses XSS to embed malicious code in the user's browser to steal info they may have. - Usually, done through the ```<script>``` tag and this code is then run - Some web browsers have builtin features to block these attacks --- ### Defending against Cross Site Scripting #### All user inputs are unsafe: sanitize them!  --- #### Sanitize on the server! Client-side sanitization could be circumvented by an attacker --- #### Sanitizing at the templating layer This is the most common place to sanitze. The majority of templating languages like [ejs](https://ejs.co/) have built in support. If you are using es6 template strings you can use a XSS library such as the [xss module on node.js](https://www.npmjs.com/package/xss) `var xss = require("xss");` --- At the minimum you could strip out common XSS attack strings like <script> from the input: `var html = xss('<script>alert("xss");</script>');` --- #### Sanitizing at the storage layer (database queries) Don't allow unsanitized values to be posted to your db! ```javascript= function createUser(data) { const values = [data.username, data.postcode]; return db.query( "INSERT INTO users(username, postcode) VALUES($1, $2)", values ) } ``` --- ## 2. CSRF (impersonation) ### cool kid tip CSRF is also known as "sea-surf"  --- ### what is it - Uses cookies on the target's browser to make API calls to third-party apps that seem legitimate, when the target has no idea these requests are being made. - To access these cookies, the attacker typically (always?) creates a phishing site; when the target visits the phishing site, the attacker has access to all their cookies, and a script on the site can make the API requests. - not all phishing is CSRF! --- ### the aims of a CSRF attack - to use the privileges that the person browsing the internet has enabled to do things like make purchases or change passwords. "CSRF attacks in the past have been used to: - Steal confidential data. - Manipulate online surveys. - Spread worms on social media. - Install malware on mobile phones." (https://www.hacksplaining.com/prevention/csrf) --- ### how to defend against it There are various ways, perhaps ones to not would be: - Use only JSON APIs - CSRF Tokens - Server sends the client a token. - Client submits a form with the token. - The server rejects the request if the token is invalid. - only make your site compatible with newer browsers - you can give cookies the samesite attribute and modern browsers will respect it, so that phishing sites can't access another site's cookies --- ### How to generate a token? - You can use CSRF npm package ```javascript= let secret = tokens.secretSync() let token = tokens.create(secret) ``` --- ### How does CSRF work in practice? When the browser makes a request to twitter.com it finds all the cookies for that domain and sends them in the request headers. It doesn’t (by default) check what domain the request originated on. So I can make a form on evilsite.com that submits to twitter.com/new-tweet, and if you’re logged in to twitter that form submission will contain your loggedIn=true cookie. So my evil form can submit tweets on your behalf (That’s an example, twitter doesn’t work that way anymore). (The user doesn’t even have to submit the form on evilsite.com, since you can hide it with CSS and use jS to automatically click the submit button. --- ## Resources - [XSS aka HTML injection attack explained](https://medium.com/@jamischarles/xss-aka-html-injection-attack-explained-538f46475f6c) - [Intro to CSRF: Cross site request forgery](https://medium.com/swlh/intro-to-csrf-cross-site-request-forgery-9de669df03de) - [Understanding CSRF](https://github.com/pillarjs/understanding-csrf) - [MDN Cross-site scripting](https:////developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting) --- If you wanted more information about CORS and how to solve it when it comes to using you APIs, Dan wrote a good section in our project ReadMe for API week: https://github.com/fac18/week3-DFJL-bday-time-machine Fun fact: Safari announced recently that they will be clearing ALL browser storage if your web page isn’t used for 7 days (This is ostensibly to prevent abuse by 3rd parties, since there’s no differentiation between stuff stored in localStorage by your site vs Facebook) But it will totally screw over all the websites using localStorage as a simple way to persist some user data on that device without needing a whole server/DB setup