Dica de como se proteger de hackers, utilizando o Angular 2
Como o Angular 2 te protege de ataques de XSS (Cross-site Scripting)
Por: Clayton K. N. Passos, especialista em desenvolvimento de software, gerenciamento de projetos, Green belt…
Introdução
Cross-site Scripting ou XSS é provavelmente a vulnerabilidade de segurança mais comum. Este tipo de ataque, permite que seja possível injetar scripts no client-side de páginas web. Caso queira saber mais como funcionam estes ataques, você pode acessar este excelente artigo: http://excess-xss.com/, que explica detalhadamente como poderiamos por exemplo capturar os cookies.
Como o Angular 2 nos protege de ataques XSS?
Por padrão, o Angular 2 trata todos os valores como inseguros, ou não confiáveis. Quando um valor é inserido no DOM, via propriedade, atributo, estilo, classe de ligação (class binding), ou interpolação, o Angular desinfeta e escapa valores (escape untrusted) não confiáveis.
A higienização modifica os valores que serão inseridos no DOM, e como isto ocorrerá depende do contexto.
Por exemplo quando nós tentamos fazer isto:
@Component({
selector: ‘my-app’,
template: `
<div [innerHtml]=”html”></div>
`,
})
export class App {
constructor() {
this.html = “<h1>DomSanitizer</h1><script>attackerCode()</script>”
}
}
Por debaixo dos panos, o Angular limpa o HTML de possíveis códigos inseguros, neste caso um possível script malicioso não irá carregar.
Outro exemplo, se você tentar fazer o bind da propriedade src em um iframe, ou um vídeo, irá obter o seguinte erro:
“unsafe value used in a resource URL context”
@Component({
selector: ‘my-app’,
template: `
<iframe [src]=”iframe”></iframe>
`,
})
export class App {
constructor() {
this.iframe = “https://www.google.com";
}
}
Angular lança este erro porque o atributo src da tag iframe é um recurso que está em um contexto seguro, um código inseguro pode, por exemplo, realizar inadvertidamente um download de arquivo sem suspeitas do usuário.
A Proteção do Angular
Nós podemos utilizar os um dos métodos bypass do serviço DomSanitizer para proteger os valores de um caso em particular.
No exemplo abaixo, injetamos o serviço DomSanitizer e executamos o método bypassSecurityTrustHtml, desta maneira passamos HTML seguro a tag div.
import {BrowserModule, DomSanitizer} from ‘@angular/platform-browser’
@Component({
selector: ‘my-app’,
template: `
<div [innerHtml]=”html”></div>
`,
})
export class App {
constructor(private sanitizer: DomSanitizer) {
this.html = sanitizer.bypassSecurityTrustHtml(‘<h1>DomSanitizer</h1><script>ourSafeCode()</script>’) ;
}
}
O próximos exemplo, mostra como passar para a tag iframe um valor seguro ao atributo src. Neste utilizamos o método bypassSecurityTrustResourceUrl
@Component({
selector: ‘my-app’,
template: `
<iframe [src]=”iframe”></iframe>
`,
})
export class App {
constructor(private sanitizer: DomSanitizer) {
this.iframe = sanitizer.bypassSecurityTrustResourceUrl(“https://www.google.com")
}
}
Agora, no próximo exemplo é mostrado como podemos higienizar manualmente o código, para isto é necessário informar o contexto que pode ser um de:
- SecurityContext.NONE
- SecurityContext.HTML
- SecurityContext.STYLE
- SecurityContext.SCRIPT
- SecurityContext.URL
- SecurityContext.RESOURCE_URL
import {Component, SecurityContext} from ‘@angular/core’
export class App {
constructor(private sanitizer: DomSanitizer) {
this.html = sanitizer.sanitize(SecurityContext.HTML, “<h1>Sanitize</h1><script>attackerCode()</script>”);
}
}Mais conhecimento como este, está ao seu alance no meu Curso de Angular
