From ab6e56e7c48719086aef1dd7cfe4b713d559a9b0 Mon Sep 17 00:00:00 2001 From: Translator Date: Sun, 10 Sep 2023 22:11:14 +0000 Subject: [PATCH] Translated ['network-services-pentesting/pentesting-web/angular.md'] to --- .../pentesting-web/angular.md | 617 ++++++++++++++++++ 1 file changed, 617 insertions(+) create mode 100644 network-services-pentesting/pentesting-web/angular.md diff --git a/network-services-pentesting/pentesting-web/angular.md b/network-services-pentesting/pentesting-web/angular.md new file mode 100644 index 000000000..11cd57013 --- /dev/null +++ b/network-services-pentesting/pentesting-web/angular.md @@ -0,0 +1,617 @@ +# Segurança do Angular + +# A Lista de Verificação + +Verifique se: + +- [ ] O Angular é considerado um framework do lado do cliente e não é esperado que forneça proteção do lado do servidor +- [ ] O sourcemap para scripts está desabilitado na configuração do projeto +- [ ] A entrada do usuário não confiável é sempre interpolada ou sanitizada antes de ser usada em modelos +- [ ] O usuário não tem controle sobre os modelos do lado do servidor ou do lado do cliente +- [ ] A entrada do usuário não confiável é sanitizada usando um contexto de segurança apropriado antes de ser confiada pela aplicação +- [ ] Os métodos `BypassSecurity*` não são usados com entrada não confiável +- [ ] A entrada do usuário não confiável não é passada para classes do Angular, como `ElementRef`, `Renderer2` e `Document`, ou outros pontos de vazamento de JQuery/DOM + +# O que é o Angular + +O Angular é um poderoso framework de front-end amplamente utilizado para construir aplicações web dinâmicas. É de código aberto e mantido pelo Google. Uma das principais características do Angular é o uso do TypeScript, um superset tipado do JavaScript que torna o código mais fácil de ler, manter e depurar. + +Os mecanismos de segurança do Angular são projetados para prevenir vulnerabilidades comuns do lado do cliente, incluindo cross-site scripting (XSS) e redirecionamentos abertos. No entanto, o Angular também pode ser usado no lado do servidor para gerar páginas estáticas. Portanto, a segurança do Angular deve ser considerada de ambos os lados. + +# Arquitetura do framework + +Para entender melhor os conceitos básicos do Angular, vamos analisar seus conceitos essenciais. + +Um projeto Angular comum geralmente se parece com: +```bash +my-workspace/ +├── ... #workspace-wide configuration files +├── src +│ ├── app +│ │ ├── app.module.ts #defines the root module, that tells Angular how to assemble the application +│ │ ├── app.component.ts #defines the logic for the application's root component +│ │ ├── app.component.html #defines the HTML template associated with the root component +│ │ ├── app.component.css #defines the base CSS stylesheet for the root component +│ │ ├── app.component.spec.ts #defines a unit test for the root component +│ │ └── app-routing.module.ts #provides routing capability for the application +│ ├── lib +│ │ └── src #library-specific configuration files +│ ├── index.html #main HTML page, where the component will be rendered in +│ └── ... #application-specific configuration files +├── angular.json #provides workspace-wide and project-specific configuration defaults +└── tsconfig.json #provides the base TypeScript configuration for projects in the workspace +``` +De acordo com a documentação, cada aplicação Angular tem pelo menos um componente, o componente raiz (`AppComponent`), que conecta uma hierarquia de componentes com o DOM. Cada componente define uma classe que contém dados e lógica da aplicação, e está associado a um template HTML que define uma visualização a ser exibida em um ambiente alvo. O decorador `@Component()` identifica a classe imediatamente abaixo dele como um componente e fornece o template e metadados específicos do componente. O `AppComponent` é definido no arquivo `app.component.ts`. + +Os módulos NgModules do Angular declaram um contexto de compilação para um conjunto de componentes dedicados a um domínio de aplicação, um fluxo de trabalho ou um conjunto de capacidades intimamente relacionadas. Toda aplicação Angular tem um módulo raiz, convencionalmente chamado de `AppModule`, que fornece o mecanismo de inicialização que inicia a aplicação. Uma aplicação geralmente contém muitos módulos funcionais. O `AppModule` é definido no arquivo `app.module.ts`. + +O NgModule `Router` do Angular fornece um serviço que permite definir um caminho de navegação entre os diferentes estados da aplicação e hierarquias de visualização em sua aplicação. O `RouterModule` é definido no arquivo `app-routing.module.ts`. + +Para dados ou lógica que não estão associados a uma visualização específica e que você deseja compartilhar entre componentes, você cria uma classe de serviço. A definição da classe de serviço é imediatamente precedida pelo decorador `@Injectable()`. O decorador fornece os metadados que permitem que outros provedores sejam injetados como dependências em sua classe. A injeção de dependência (DI) permite que você mantenha suas classes de componente enxutas e eficientes. Elas não buscam dados do servidor, validam a entrada do usuário ou registram diretamente no console; elas delegam essas tarefas para serviços. + +# Configuração do sourcemap + +O framework Angular traduz arquivos TypeScript em código JavaScript seguindo as opções do `tsconfig.json` e, em seguida, constrói um projeto com a configuração do `angular.json`. Ao analisar o arquivo `angular.json`, observamos uma opção para habilitar ou desabilitar um sourcemap. De acordo com a documentação do Angular, a configuração padrão possui um arquivo sourcemap habilitado para scripts e não está oculto por padrão: +```json +"sourceMap": { +"scripts": true, +"styles": true, +"vendor": false, +"hidden": false +} +``` +Geralmente, os arquivos de sourcemap são utilizados para fins de depuração, pois eles mapeiam os arquivos gerados para seus arquivos originais. Portanto, não é recomendado utilizá-los em um ambiente de produção. Se os sourcemaps estiverem habilitados, eles melhoram a legibilidade e auxiliam na análise de arquivos, replicando o estado original do projeto Angular. No entanto, se eles estiverem desabilitados, um revisor ainda pode analisar um arquivo JavaScript compilado manualmente, procurando por padrões anti-segurança. + +Além disso, um arquivo JavaScript compilado com um projeto Angular pode ser encontrado nas ferramentas de desenvolvedor do navegador → Sources (ou Debugger e Sources) → [id].main.js. Dependendo das opções habilitadas, esse arquivo pode conter a seguinte linha no final `//# sourceMappingURL=[id].main.js.map` ou pode não conter, se a opção **hidden** estiver definida como **true**. No entanto, se o sourcemap estiver desabilitado para **scripts**, os testes se tornam mais complexos e não podemos obter o arquivo. Além disso, o sourcemap pode ser habilitado durante a construção do projeto, como `ng build --source-map`. + +# Data binding + +Binding refere-se ao processo de comunicação entre um componente e sua visualização correspondente. É utilizado para transferir dados para e do framework Angular. Os dados podem ser passados por meio de vários meios, como eventos, interpolação, propriedades ou por meio do mecanismo de binding bidirecional. Além disso, os dados também podem ser compartilhados entre componentes relacionados (relação pai-filho) e entre dois componentes não relacionados usando o recurso de Serviço. + +Podemos classificar o binding pelo fluxo de dados: + +- Fonte de dados para alvo de visualização (inclui *interpolação*, *propriedades*, *atributos*, *classes* e *estilos*); pode ser aplicado usando `[]` ou `{{}}` no template; +- Alvo de visualização para fonte de dados (inclui *eventos*); pode ser aplicado usando `()` no template; +- Bidirecional; pode ser aplicado usando `[()]` no template. + +O binding pode ser realizado em propriedades, eventos e atributos, bem como em qualquer membro público de uma diretiva de origem: + +| TIPO | ALVO | EXEMPLOS | +| -------- | ----------------- | -------- | +| Propriedade | Propriedade do elemento, propriedade do componente, propriedade da diretiva | | +| Evento | Evento do elemento, evento do componente, evento da diretiva | | +| Bidirecional | Evento e propriedade | | +| Atributo | Atributo (a exceção) | | +| Classe | propriedade de classe |
Especial
| +| Estilo | propriedade de estilo | +``` + +- Para definir a propriedade de um elemento DOM, você pode usar o método `Renderer2.setProperty()` e desencadear um ataque XSS: + +```tsx +//app.component.ts +import {Component, Renderer2, ElementRef, ViewChild, AfterViewInit } from '@angular/core'; + +@Component({ +selector: 'app-root', +templateUrl: './app.component.html', +styleUrls: ['./app.component.css'] +}) +export class AppComponent { + +public constructor ( +private renderer2: Renderer2 +){} +@ViewChild("img") img!: ElementRef; + +setProperty(){ +this.renderer2.setProperty(this.img.nativeElement, 'innerHTML', ''); +} +} + +//app.component.html + + +``` + + +Durante nossa pesquisa, também examinamos o comportamento de outros métodos do `Renderer2`, como `setStyle()`, `createComment()` e `setValue()`, em relação a injeções de XSS e CSS. No entanto, não conseguimos encontrar nenhum vetor de ataque válido para esses métodos devido às suas limitações funcionais. + +### jQuery + +jQuery é uma biblioteca JavaScript rápida, pequena e rica em recursos que pode ser usada no projeto Angular para ajudar na manipulação de objetos HTML DOM. No entanto, como é sabido, os métodos dessa biblioteca podem ser explorados para obter uma vulnerabilidade de XSS. Para discutir como alguns métodos vulneráveis do jQuery podem ser explorados em projetos Angular, adicionamos esta subseção. + +- O método `html()` obtém o conteúdo HTML do primeiro elemento no conjunto de elementos correspondentes ou define o conteúdo HTML de cada elemento correspondente. No entanto, por design, qualquer construtor ou método do jQuery que aceite uma string HTML pode potencialmente executar código. Isso pode ocorrer pela injeção de tags `"); +}); +} +} + +//app.component.html + +

algum texto aqui

+``` + +- O método `jQuery.parseHTML()` usa métodos nativos para converter a string em um conjunto de nós DOM, que podem então ser inseridos no documento. + +```tsx +jQuery.parseHTML(data [, context ] [, keepScripts ]) +``` + +Como mencionado anteriormente, a maioria das APIs do jQuery que aceitam strings HTML executará scripts incluídos no HTML. O método `jQuery.parseHTML()` não executa scripts no HTML analisado, a menos que `keepScripts` seja explicitamente `true`. No entanto, ainda é possível executar scripts indiretamente na maioria dos ambientes, por exemplo, por meio do atributo ``. + +```tsx +//app.component.ts +import { Component, OnInit } from '@angular/core'; +import * as $ from 'jquery'; + +@Component({ +selector: 'app-root', +templateUrl: './app.component.html', +styleUrls: ['./app.component.css'] +}) +export class AppComponent implements OnInit +{ +ngOnInit() +{ +$("button").on("click", function() +{ +var $palias = $("#palias"), +str = "", +html = $.parseHTML(str), +nodeNames = []; +$palias.append(html); +}); +} +} + +//app.component.html + +

algum texto

+``` + +## Redirecionamentos abertos + +### Interfaces DOM + +De acordo com a documentação do W3C, os objetos `window.location` e `document.location` são tratados como aliases em navegadores modernos. É por isso que eles têm uma implementação semelhante de alguns métodos e propriedades, o que pode causar um redirecionamento aberto e ataques de XSS DOM com o esquema `javascript://`, conforme mencionado abaixo. + +- `window.location.href`(e `document.location.href`) + +A maneira canônica de obter o objeto de localização DOM atual é usando `window.location`. Também pode ser usado para redirecionar o navegador para uma nova página. Como resultado, ter controle sobre esse objeto nos permite explorar uma vulnerabilidade de redirecionamento aberto. + +```tsx +//app.component.ts +... +export class AppComponent { +goToUrl(): void { +window.location.href = "https://google.com/about" +} +} + +//app.component.html + +``` + +O processo de exploração é idêntico para os seguintes cenários. + +- `window.location.assign()`(e `document.location.assign()`) + +Este método faz com que a janela carregue e exiba o documento no URL especificado. Se tivermos controle sobre esse método, ele pode ser um ponto de entrada para um ataque de redirecionamento aberto. + +```tsx +//app.component.ts +... +export class AppComponent { +goToUrl(): void { +window.location.assign("https://google.com/about") +} +} +``` + +- `window.location.replace()`(e `document.location.replace()`) + +Este método substitui o recurso atual pelo recurso fornecido na URL. + +A diferença entre o método `assign()` é que, após usar `window.location.replace()`, a página atual não será salva no histórico de sessão. No entanto, também é possível explorar uma vulnerabilidade de redirecionamento aberto quando temos controle sobre esse método. + +```tsx +//app.component.ts +... +export class AppComponent { +goToUrl(): void { +window.location.replace("http://google.com/about") +} +} +``` + +- `window.open()` + +O método `window.open()` recebe uma URL e carrega o recurso que ela identifica em uma nova ou existente guia ou janela. Ter controle sobre esse método também pode ser uma oportunidade para desencadear uma vulnerabilidade de XSS ou redirecionamento aberto. + +```tsx +//app.component.ts +... +export class AppComponent { +goToUrl(): void { +window.open("https://google.com/about", "_blank") +} +} +``` +### Classes do Angular + +- De acordo com a documentação do Angular, a classe `Document` do Angular é a mesma que o documento DOM, o que significa que é possível usar vetores comuns para o documento DOM para explorar vulnerabilidades do lado do cliente no Angular. As propriedades e métodos `Document.location` podem ser alvos para ataques bem-sucedidos de redirecionamento aberto, como mostrado no exemplo: + +```tsx +//app.component.ts +import { Component, Inject } from '@angular/core'; +import { DOCUMENT } from '@angular/common'; + +@Component({ +selector: 'app-root', +templateUrl: './app.component.html', +styleUrls: ['./app.component.css'] +}) +export class AppComponent { +constructor(@Inject(DOCUMENT) private document: Document) { } + +goToUrl(): void { +this.document.location.href = 'https://google.com/about'; +} +} + +//app.component.html + +``` + +- Durante a fase de pesquisa, também revisamos a classe `Location` do Angular em busca de vulnerabilidades de redirecionamento aberto, mas nenhum vetor válido foi encontrado. `Location` é um serviço do Angular que as aplicações podem usar para interagir com a URL atual do navegador. Este serviço possui vários métodos para manipular a URL fornecida - `go()`, `replaceState()` e `prepareExternalUrl()`. No entanto, não podemos usá-los para redirecionar para um domínio externo. Por exemplo: + +```tsx +//app.component.ts +import { Component, Inject } from '@angular/core'; +import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common'; + +@Component({ +selector: 'app-root', +templateUrl: './app.component.html', +styleUrls: ['./app.component.css'], +providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}], +}) +export class AppComponent { +location: Location; +constructor(location: Location) { +this.location = location; +} +goToUrl(): void { +console.log(this.location.go("http://google.com/about")); +} +} +``` + +Resultado: `http://localhost:4200/http://google.com/about` + +- A classe `Router` do Angular é usada principalmente para navegar dentro do mesmo domínio e não introduz nenhuma vulnerabilidade adicional à aplicação: + +```jsx +//app-routing.module.ts +const routes: Routes = [ +{ path: '', redirectTo: 'https://google.com', pathMatch: 'full' }] +``` + +Resultado: `http://localhost:4200/https:` + +Os seguintes métodos também navegam dentro do escopo do domínio: + +```jsx +const routes: Routes = [ { path: '', redirectTo: 'ROUTE', pathMatch: 'prefix' } ] +this.router.navigate(['PATH']) +this.router.navigateByUrl('URL') +``` + +# Referências +- [Angular](https://angular.io/) +- [Angular Security: The Definitive Guide (Part 1)](https://lsgeurope.com/post/angular-security-the-definitive-guide-part-1) +- [Angular Security: The Definitive Guide (Part 2)](https://lsgeurope.com/post/angular-security-the-definitive-guide-part-2) +- [Angular Security: The Definitive Guide (Part 3)](https://lsgeurope.com/post/angular-security-the-definitive-guide-part-3) +- [Angular Security: Checklist](https://lsgeurope.com/post/angular-security-checklist) +- [Workspace and project file structure](https://angular.io/guide/file-structure) +- [Introduction to components and templates](https://angular.io/guide/architecture-components) +- [Source map configuration](https://angular.io/guide/workspace-config#source-map-configuration) +- [Binding syntax](https://angular.io/guide/binding-syntax) +- [Angular Context: Easy Data-Binding for Nested Component Trees and the Router Outlet](https://medium.com/angular-in-depth/angular-context-easy-data-binding-for-nested-component-trees-and-the-router-outlet-a977efacd48) +- [Sanitization and security contexts](https://angular.io/guide/security#sanitization-and-security-contexts) +- [GitHub - angular/dom_security_schema.ts](https://github.com/angular/angular/blob/main/packages/compiler/src/schema/dom_security_schema.ts) +- [XSS in Angular and AngularJS](https://github.com/swisskyrepo/PayloadsAllTheThings/blob/master/XSS%20Injection/XSS%20in%20Angular.md) +- [Angular Universal](https://angular.io/guide/universal) +- [DOM XSS](https://book.hacktricks.xyz/pentesting-web/xss-cross-site-scripting/dom-xss) +- [Angular ElementRef](https://angular.io/api/core/ElementRef) +- [Angular Renderer2](https://angular.io/api/core/Renderer2) +- [Renderer2 Example: Manipulating DOM in Angular - TekTutorialsHub](https://www.tektutorialshub.com/angular/renderer2-angular/) +- [jQuery API Documentation](http://api.jquery.com/) +- [How To Use jQuery With Angular (When You Absolutely Have To)](https://blog.bitsrc.io/how-to-use-jquery-with-angular-when-you-absolutely-have-to-42c8b6a37ff9) +- [Angular Document](https://angular.io/api/common/DOCUMENT) +- [Angular Location](https://angular.io/api/common/Location) +- [Angular Router](https://angular.io/api/router/Router)