The first wall !

Front-end Security

Alvaro Camillo

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?

  1. Minimum Friction
  2. Less exposure
  3. 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

In cases of prioritization conflicts, consider using a service such as OKTA, Auth0,AWS or Azure

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.

  

  • 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

Cross-Site Request Forgery (CSRF)

  • Exploits the site's trust in the user's browser.
    • The attacker can use it by creating:
      • Sites
      • Email
      • Hidden forms.

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

Cross-Site Scripting (XSS)

Cross-Site Scripting (XSS)

  • Angular sanitizes the templates.
  • 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

The first wall ! Front-end Security

By Alvaro Camillo Neto

The first wall ! Front-end Security

Security should not just be a concern of the back-end or infra developer. It should be everyone's concern! Let's learn together some practices and techniques to protect your front-end using the Angular framework. In this presentation I will show techniques and tools for the front-end developer. I will use Angular for the examples but the lessons can be applied to any current framework.

  • 852