The first wall !
Front-end Security
Alvaro Camillo
- Software Engineer
- TOTVS
- Mario's and Gabriel's Dad
- Games
- alvarocamillont.dev
Introduction
Single Page Applications
X
Multi Page Applications
Multi Page Applications
- Traditional applications
- Server delivers HTML
Single Page Applications
- Native app experience
- Page is manipulated in the browser
- Server delivers the data (API)
Front-end risks
- Multi page has consolidated forms of invasion.
- SPAs require all of the interface code to be loaded into the browser.
User Registration
Does your application need all this data?
- Minimum Friction
- Less exposure
- GDPR
Password strength
CAPTCHA
Login
Do not help the attacker
- Do not inform which fields, user or password are wrong.
- Watch out for the console log.
- Return the correct HTTP code
Control attempts
- Perform a password lock after n attempts.
- Perform a time block, preferably random
- Don't just rely on CAPTCHAS
Hire
Access
Cookie
- Text file
- Saved from accessing a website
- Maximum size of 4 Kb
- After received by the browser, it attaches to any subsequent request.
Cookie
Important attributes:
- Expire
- HttpOnly
- Secure
Session
- Connection identifier
- Created from an access to a website
- Stored on the server
JWT
- JavaScript object
- Represented through a Base64 string
- Self signed
JWT
- Do not enter sensitive information in the payload.
- Storage:
- Memory (Store)
- Cookie
- Watch out for the 4kb limit.
- Storage:
- Service that implements a route control interface.
- It does not guarantee security.
- Take care of the security of the API.
- CanLoad Route Guard
Strengthening defenses
HTTPS
- ALWAYS USE
- Let's Encrypty
Cross-Site Request Forgery (CSRF)
- Exploits the site's trust in the user's browser.
- The attacker can use it by creating:
- Sites
- Hidden forms.
- The attacker can use it by creating:
Cross-Site Request Forgery (CSRF)
@NgModule({
...
imports: [
...
HttpClientXsrfModule.withOptions({
cookieName: 'csrf-token',
headerName: 'csrf-token'
})
],
...
bootstrap: [AppComponent]
})Cross-Site Scripting (XSS)
- Execution of malicious code on the front end
- The attacker can use:
- Malicious dependencies
- Input fields without treatment
- The attacker can use:
Cross-Site Scripting (XSS)
Cross-Site Scripting (XSS)
- Angular sanitizes the templates.
- Watch out for dynamically created components.
- Also protect the Back-End.
Conclusion
The User
Security is a process
- Safety is as fundamental as testing!
- It must start in the design of the project.
- Internal tests
- External tests
Resources
-
OWASP
- Single Page Applications vs Multiple Page Applications — Do You Really Need an SPA?
- Johnny Xmas on Web Security & the Anatomy of a Hack
- Securing Angular Applications
- Angular Security Masterclass
- Time Based Security
- Biblioteca Web Crypto Tools
- How to securely store JWT tokens
- Building Secure Angular Application - Philippe De Ryck
- Using target="_blank" the right way
- 13 Security Tips for Front-End Apps
