The first wall !

Front-end Security

Alvaro Camillo


Single Page Applications


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



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


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



  • Text file
  • Saved from accessing a website
  • Maximum size of 4 Kb
  • After received by the browser, it attaches to any subsequent request.


Important attributes:

  • Expire
  • HttpOnly
  • Secure



  • Connection identifier
  • Created from an access to a website
  • Stored on the server


  • JavaScript object
  • Represented through a Base64 string
  • Self signed


  • 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


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)

    imports: [
            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.


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


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.

  • 766