14_security.md

Security in JavaScript Code

Security Details in your Code

• your JavaScript code can be read by anyone
• security-relevant details can be read
• attackers may be able to abuse exposed data
• Example: database access credentials exposed in code on client-side

Cross-Site Scripting Attacks (XSS)

• attack pattern where malicious JS code gets injected and executed

• injected code can do anything your code could do as well

• very dangerous: full behind the scenes control for attacker

• Example: unchecked user-generated content that you inject into the DOM

  // User can write text as input (e.g. <img src="" onerror="alert('Attack')">)
  const userInput = document.getElementById('input');
  // Your are setting input to innerHTML
  headerTitleElement.innerHTML = userInput; // would execute alert()
  // [1] textContent is recommended
  headerTitleElement.textContent = userInput; // would print user input code

• sanitize (i.e. remove any JavaScript syntax) user input when you [1] inject input into the DOM and [2] on server-side before storing data into database

  • npm package sanitize-html: https://www.npmjs.com/package/sanitize-html

• when using third-party scripts (libraries, SDKs etc.), be sure they are trustworthy

Cross-Site Request Forgery (CSRF)

• attack pattern that depends on injected content (e.g. image)
• requests to malicious servers are made with user's cookies
• actions can be executed without the user knowing
• Example: malicious image URL, XSS

Cross-Origin Resource Sharing (CORS)

• not attack pattern, but security concept
• requests are only allowed from same origin (domain)
• controlled via server-side response headers and browser
• Example: JavaScript Modules (imports from another file) are only allowed if files are served on same server