Secure connections

Attackers can snoop, intercept and replace HTTP traffic on the same network

HTTPS protects confidentiality and integrity of your and your user's data during transmission

Switch to HTTPS: "Let's Encrypt" makes it easy to obtain free certificates.

Mixed content: insecure content served on a secure page

• Active - Scripts (really bad can alter page content)
• Passive - Images (can leak info like session cookies)

HSTS - Strict Transport Security, force users to HTTPS

Secure web content

XSS

Attacker is able to execute any JS code in the context of our page

• Steal cookies
• Steal Local Storage Data
• Break the layout and style of the page
• Whatever you can do w/ JS

Solution: Sanitise user generated content

If you're using a React avoid using set 'dangerouslySetInnerHTML' and similar counterparts for other frameworks.

Use the DOM rather than manipulating HTML as string. Ex: TextNode

Even Better: CSP (Content Security Policy)

Can be set by HTTP header or in a meta tag on page

You can use CSP-report-only to test w/o breaking things

Report URI allows you to record violations

• hash-source nonce-source for Inline support
• White list domains
• Disable inline scripts
• Control almost everything
  • connect-src : websockets
  • img-src: images
  • script-src: JS
  • style-src: css

integrity attribute allows you to specify a hash which makes sure that the third party content of the resource hasn't changed

noopener and noreferrer for target="_blank" links to prevent access to window.parent.location these can be manipulated by the target.

Static Analysers: Template Linters, ESLint Custom Rules

Regexp

Same origin policy - blocks request made by scripts served from a different domain

Protected

XHR requests

window.opener/window.parent

Not Protected

Post forms - use a CSRF token

Secure access to device capabilities

• Device API's like geolocation, camera, microphone, pointer logs, screen sharing etc should be accessed granularly, also the way to ask permissions is not standardised across APIs and browsers.
• Pre-prompt to give the user context and avoid the element of surprise
• Browsers will start to restrict web permissions from iframes