CSRF
- CSRF
Perda de solicitação entre sites ( também conhecida como CSRF, XSRF, ataque com um clique, e a execução de sessões ) é um ataque que não entra no sistema de software, mas pode causar ações indesejadas para os usuários do aplicativo. As consequências podem ser devastadoras em aplicações em que a mudança de estado causa resultados irreversíveis, como em aplicações financeiras. Então, como você se protege contra esses ataques? Se o seu aplicativo usar Angular, a proteção CSRF será incorporada.
Angular é uma estrutura frontal que usa TypeScript. Tornou-se popular em aplicativos corporativos, onde um padrão de design consistente é crucial para o desenvolvimento produtivo. Emparelhado com uma estrutura de back-end, o Angular fornece proteção integrada ao CSRF. Como você pergunta?
Em um ataque CSRF, o invasor usa métodos como phishing que farão com que o usuário execute solicitações ao servidor. O servidor não pode distinguir a solicitação porque os cookies da sessão são enviados automaticamente com a solicitação e, portanto, autentica a ação. Mas Angular's HttpClient O módulo possui todas as interfaces necessárias para que essa autenticação ocorra no lado do cliente. Nós usamos HttpClientXsrfModule conexões de firewall com o servidor originário de qualquer lugar fora do nosso aplicativo angular.
Neste post, veremos o que é um ataque de CSRF e um exemplo. Em seguida, usaremos o Node.js para gravar um servidor com um terminal e usar uma biblioteca npm para middleware CSRF. Você aprenderá como usar o módulo interno da Angular para proteção contra CSRF e implementá-lo em seus próprios aplicativos da web.
O que é um ataque de CSRF e por que você deve se importar?
Ao criar aplicativos da web, a autenticação é parte integrante da estrutura se o aplicativo atender atividades e ações privadas disponíveis para o usuário. Quando a autenticação está presente, a segurança se torna uma parte crucial do aplicativo. Você não deseja comprometer a segurança e os dados de seus usuários, especialmente em aplicativos críticos para dados.
O CSRF é um desses ataques que explorará a segurança do usuário enviando uma solicitação indesejada ao servidor que seja benéfica para o invasor. Os ataques CSRF são relevantes apenas no manuseio de sessões com base em cookies, porque o invasor explora o ID da sessão armazenado em cookies para executar tarefas que exigem tokens de sessão.
Exemplo de ataque de CSRF
Se você usou algum aplicativo bancário ou bancário, provavelmente encontrou o fluxo de transferência de dinheiro. Digamos que você precise transferir $ 10 para Maxwell.
Sua solicitação de API pode ser assim: POST https://money123.com/transfer com acct = Maxwell123 e quantidade = 10.
O parâmetro acc é o ID da conta receptora, que é Maxwell123 por uma questão de conveniência. O montante parâmetro é a quantidade que você está enviando para ele.
Um invasor, Kevin, também é usuário do mesmo aplicativo bancário. Quando você faz login no aplicativo bancário, o cookie armazena o token da sessão. Se Kevin conseguir enviar uma solicitação que se pareça com isso do seu navegador,
POST https://money123.com/transfer com acct = Kevin123 e quantidade = 100000
ele é capaz de transferir $ 100.000 para si mesmo porque o cookie da sessão está presente junto com a solicitação. O servidor não pode diferenciar se a ação foi feita de bom grado, portanto, age como uma solicitação legítima. Para conseguir isso, Kevin pode criar um formulário HTML como este:
<form action="https://money123.com/transfer?acct=Kevin123&AccctId&amount=100000" method="POST"><input type="hidden" name="acct" value="Kevin123" />
<input type="hidden" name="amount" value="100000" />
<button type="submit" value="Check My Horoscope Today!" ></button>
</form>
Ataques de engenharia social, como enviar o link por e-mail, farão com que a vítima execute a ação.
Se a solicitação for simples, como OBTER https://money123.com/transfer?acct=Kevin123&amount=100000, basta incluir o link:
<a href="https://money123.com/transfer?acct=Kevin123&amount=100000">Check My Horoscope Today!</a>
Na próxima seção, aprenderemos como proteger seu aplicativo angular contra ataques de CSRF.
Proteção CSRF em Angular
Suporte angular Proteção contra CSRF através de um mecanismo chamado token de cookie para cabeçalho. Para proteger contra ataques de CSRF, o programa do lado do servidor deve cooperar com o Angular. Examinaremos uma amostra da implementação da API no Node.js como um exemplo.
Lado do servidor
Em um programa do lado do servidor, o programa envia um token aleatório em um cookie. Angular lê o token do cookie. Agora, ao fazer todas as solicitações para um terminal de API, ele envia o cookie nos cabeçalhos. O servidor compara o token enviado com o token recebido do cliente. Se os tokens corresponderem, o servidor verificará a ação. Se os tokens não coincidirem, não será.
Vejamos nosso programa básico do servidor no Node.js. Usaremos uma biblioteca chamada csurf, que é um middleware CSRF que oferece a opção de armazenar o token CSRF em um cookie ou sessão. Existem outras bibliotecas como:
import cookieParser from 'cookie-parser';
import csurf from 'csurf';var csrfProtection = csurf({ cookie: true })
// We need cookie-parser to be initialized as well.app.use(cookieParser())
app.get('/csrfEndpoint', csrfProtection, (req, res, next) => {
res.cookie('XSRF-TOKEN', req.csrfToken(), { httpOnly: false });
}
cookie csurf ( {: true } ) especifica que o token deve ser armazenado em um cookie. O valor padrão de falso afirma que o token deve ser armazenado em uma sessão. O csurf usa o método de envio duplo de cookies que define o token CSRF sob o capô. Ele envia um valor aleatório no cookie e no valor da solicitação. Para impedir o CSRF no formulário de login, o site deve gerar um valor e armazená-lo no navegador do usuário. Ele também implementa o middleware de verificação para verificar se os dois valores correspondem do lado do cliente.
Definimos XSRF-TOKEN como o nome do cookie CSRF de acordo com as convenções angulares, que são enviadas no cabeçalho.
Ativando o CSRF em Angular
Como nosso servidor de aplicativos está nos enviando um token chamado XSRF-TOKEN, usaremos o Angular's HttpClientXsrfModule para proteger todas as solicitações de saída de ataques de CSRF.
Vamos adicionar o HttpClientXsrfModule na seção de importação do módulo em que nosso componente é declarado:
imports:[
HttpClientXsrfModule
]
Agora, qualquer solicitação enviada deste componente envia automaticamente o cookie XSRF-TOKEN como o valor padrão e o cabeçalho como X-XSRF-TOKEN.
Se você deseja usar um cookie e um nome de cabeçalho diferentes, HttpClientXsrfModule tem um método chamado comOpções. O uso é assim:
imports: [HttpClientModule,HttpClientXsrfModule.withOptions({cookieName: 'your-custom-Xsrf-Cookie',headerName: 'your-custom-Xsrf-Header'})]
HttpClientXsrfModule implementa seu padrão HttpXsrfInterceptor como seu interceptador. Um interceptador é um serviço que transforma uma solicitação HTTP de saída.
Também podemos desativar a proteção CSRF usando HttpClientXsrfModule.disable ( ).
Classe de interceptor personalizado
Temos um ponto final onde podemos definir cookies CSRF /csrfEndpoint em nosso programa de servidores. Você precisa de uma implementação personalizada de interceptador nesses casos.
@Injectable()export class CustomInterceptor implements HttpInterceptor {
constructor(private tokenExtractor: HttpXsrfTokenExtractor) {}
intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent> {const cookieheaderName = 'X-XSRF-TOKEN';let csrfToken = this.tokenExtractor.getToken() as string;if (csrfToken !== null && !req.headers.has(cookieheaderName)) {req = req.clone({ headers: req.headers.set(cookieheaderName, csrfToken) });}return next.handle(req);}}
Nós estendemos o HttpInterceptor classe. HttpXsrfTokenExtractor também é fornecido em HttpClientXsrfModule. Tem um método chamado getToken ( ) que extrai o token necessário para ser enviado com todas as solicitações enviadas. HttpInterceptor vem com um método chamado interceptar ( ) que pega um objeto HttpRequest e um objeto HttpHandler que lida com a solicitação a seguir quando cada solicitação for interceptada com sucesso.
Em seguida, verificamos se os cabeçalhos da solicitação têm o cabeçalho do cookie com X-XSRF-TOKEN por valores angulares padrão. Em seguida, definimos a solicitação de saída com o token e o cabeçalho do cookie. Cada solicitação agora contém o token e o nome do cookie para poder compará-los com os valores enviados. Agora, na seção de provedor do módulo, adicione o seguinte se você usar o HttpInterceptor padrão:
providers: [{ provide: HTTP_INTERCEPTORS, useExisting: HttpXsrfInterceptor, multi: true }]
Se você estiver usando o interceptador personalizado, adicione o seguinte na seção do provedor:
{ provide: HTTP_INTERCEPTORS, useClass: CustomInterceptor, multi: true }{ provide: HttpXsrfTokenExtractor, useClass: HttpXsrfCookieExtractor }
Muitas pessoas tendem a ignorar a proteção do CSRF no formulário de login, porque nenhuma sessão está presente quando a pessoa não está logada. Mas digamos que um invasor tenha a senha e o nome de usuário de um usuário. O invasor pode fazer login no aplicativo com as credenciais da vítima. Você pode evitar esse ataque para um aplicativo crítico armazenando o ID da sessão anterior e incluindo-o como o token CSRF no formulário de login. Sempre que um usuário criar uma nova sessão, atualize o ID da sessão antiga com a nova.
[data:image/svg+xml;charset=utf-8,%3Csvg height='240' width='1440' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E](data:image/svg+xml;charset=utf-8,%3Csvg height='240' width='1440' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E)
Não deixe seu aplicativo cair vítima de um ataque de novato
Nesta postagem, inspecionamos um pequeno aplicativo de servidor Node.js que define o token CSRF no cookie e no cabeçalho. Você também aprendeu como o Angular define os valores de cookies e cabeçalhos em todas as solicitações enviadas. Examinamos como implementar nossa própria classe de interceptores personalizados quando temos um URL personalizado para definir tokens CSRF. O middleware do csurf verifica o token CSRF e permite que ele continue assim que verificar se a solicitação é proveniente do usuário.
Embora os ataques de CSRF não causem nenhuma mudança de estado, eles podem fazer com que as vítimas realizem ações indesejadas. Se o seu aplicativo da web não usar as medidas para evitá-lo, seus usuários poderão ser induzidos a executar ações indesejadas sem o seu conhecimento. É melhor que o desenvolvedor lide com o cenário, pois a maioria das estruturas vem com a implementação de sua proteção CSRF. Para mais informações sobre ataques de CSRF, confira esta postagem.