[PT-BR] - Entenda CORS e saiba lidar com os erros!

Carine Batista — Wed, 14 Jun 2023 23:35:24 +0000

Cross-Origin Resource Sharing ou simplesmente CORS para os mais intímos, é um padrão de segurança que permite que um determinado site, a partir de uma URL, solicite dados de outra URL ou API.

Se você é um desenvolvedor front-end, provavemente já se deparou com a seguinte frustante mensagem no seu console em algum momento da vida:

Isso acontece porque os navegadores, por padrão, implementam um politica de origem como parte de modelo de segurança. Essa política permite que os websites acessem e requisitem imagens e dados da mesma URL, mas bloqueia qualquer coisa que provenha de fontes externas, a menos que algumas condições expecíficas e pré-definidas sejam atigindas.

Quando o navegador faz uma requisição, ele adiciona por padrão um cabeçalho de origem (header) à mensagem. Se a request atingir um servidor com a mesma origem, o navegador permitirá a conexão. No entanto, se a solicitação for para uma URL diferente, então é conhecida como uma cross-origin request.

Quando enviando a resposta do servidor, vai ser adicionado o "Access-control-allow-origin" no header, o valor do cabeçalho precisa ser correspondente com a origin header na request, ou também pode ser uma (*) que permite qualquer entrada ou qualquer URL.

Caso os valores sejam diferentes, o navegador impedirá o compartilhamento dos dados com o cliente, resultando no erro mostrado acima.

Como lidar com problemas de CORS?

Se você estiver vivenciando um erro de CORS agora, debugar é bastante simples, basta abrir a guia do navegador, inspecionar e ir para a guia "Network" (Rede). Encontre a response dos dados/request(API) e procure pelo header de Access-control-allow-origin.

Se por ventura esse cabeçalho não existir, significa que você precisa habilitar CORS em seu servidor (isso pode ser feito utilizando uma biblioteca NPM, como o NPM cors caso esteja utilizando Express).

const express = require('express')
const cors = require('cors')
const app = express()

app.use(cors())

app.get('/', (req, res) => {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

app.listen(80, () => {
  console.log('CORS-enabled web server listening on port 80')
})

Se por acaso esse header existir e a URL for diferente do seu website/request, você precisará ajustá-lo para corresponder à sua URL e caminho, ou permitir * (Que permite qualquer acesso, mas tome muito cuidado com essa decisão, se tratando de um produto em PROD!), lembrando que tudo isso pode e é configurado através do seu servidor ou backend.

[PT-BR] Configurando Git e chave SSH na sua Máquina, do Zero - (Windows)

Carine Batista — Sun, 26 Dec 2021 14:09:09 +0000

Na última semana adquiri um novo Desktop Windows e tive de configurar novamente todo o ambiente de programação para conseguir codar.
Já perdi a conta de quantas vezes fiz esse processo, mas nunca parei de fato para estudar e entender o que estava acontecendo, ao invés de copiar e colar códigos no meu terminal resolvi escrever esse tutorial para auxiliar você; que assim como eu precisa passar por isso ou quer entender um pouco mais o que cada comando faz. Então mãos à obra!

Antes de iniciar tudo gostaria de te introduzir ao Git, Github e SSH (Caso já seja familiar com esses temas, sugiro que pule para a sessão 3)

1. Git e Github

O Git é um sistema de controle de versão distribuído e muito utilizado, em termos gerais é um software livre que permite e simplifica o processo de compartilhamento e versionamento de um projeto com um time ou com outros programadores.
Github por sua vez é a plataforma online onde você pode criar repositórios, compartilhar, seguir programadores e hospedar seus projetos além de colaborar com softwares open source, e a tecnologia que o sustenta é o GIT.

2. SSH: O que é, o que faz e onde vive?

Antes de mais nada acho importante estabelecermos o que é SSH. Essa sigla vêm do acrônimo em inglês: Secure Shell, traduzindo seria algo como uma "Cápsula segura".
De forma bem generalizada ele é um protocolo que age como um mecanismo de segurança autenticador, garantindo que o cliente e servidor remoto troquem informações de maneira segura e dinâmica.
O SSH é baseado em duas keys, uma pública (servidor: em nosso caso o Github) e uma privada (a máquina local), a privada consegue abrir unicamente a chave pública, então à enviamos para o servidor e com a nossa local estabelecemos comunicação.
O SSH é oferecido normalmente por serviços de hospedagem, e no nosso caso como tratamos acima: o Github.
O Github permite que você crie diversas chaves SSH para que gerencie diretamente de sua máquina, com segurança e sem precisar fornecer seu nome de usuário e token toda vez que quiser acessar algum repositório.

3. Mãos à obra

Para iniciarmos a configuração precisamos instalar o Git. Existem algumas formas de fazê-lo, você pode simplesmente fazer o dowload manualmente aqui, onde terá acesso a versão oficial disponível e mais recente.
Ou também pode instalar diretamente do código-fonte, não há muita diferença entre um e outro. Instalando diretamente do código-fonte você sempre terá acesso a versão mais recente possível, e para fazê-lo é necessário ter as seguintes bibliotecas das quais o Git depende: Autotools, curl, zlib, openssl, expat e libiconv. Caso queira fazer dessa maneira você pode seguir esse tutorial.
Porém para este tutorial, sugiro que instale manualmente pelo arquivo .exe, disponível aqui.

Com o arquivo instalado, basta aceitar os Termos e pressionar "Next", e eu particularmente neste passo prefiro mudar apenas um item, para a opção de alterar o nome padrão das Branches futuras de 'master' para 'main':

Após feita a instalação, para execução dos comandos precisaremos do Git Bash (Que é uma aplicação que emula um terminal Unix, uma vez que o Git foi desenvolvido inicialmente para rodar em sistemas Unix).
Mas não se preocupe, ele é instalado automaticamente com a instalação do Git.

Para acessá-lo basta pesquisar em sua bara de tarefas por "Git Bash" e executar os comandos que serão listados a seguir.

Gerando uma Chave SSH

Para gerar nossa chave SSH que fará comunicação com nosso Github, precisamos digitar o seguinte comando no Git Bash:

$ ssh-keygen -t ed25519 -C "your_email@example.com"

O comando ssh-keygen como o próprio nome sugere cria um par de chaves para seu e-mail e utiliza o algorítmo Ed25519, você pode entender mais sobre esse algorítmo aqui.

Após executar esse comando, ele exibirá uma mensagem perguntando em qual arquivo deseja salvar sua chave, basta pressionar Enter para manter o caminho default e prosseguir.

Enter a file in which to save the key
(/c/Users/you/.ssh/id_algorithm):[Press enter]

Nesse momento ele te pedirá uma senha, é importante que você pressione Enter em ambas as vezes, para que ele não crie uma chave que será solicitada toda vez quando for utilizar um repositório.

Enter passphrase (empty for no passphrase): [Type a passphrase]
Enter same passphrase again: [Type passphrase again]

E pronto, sua chave SSH foi gerada com sucesso!

Adicionando sua SSH Key ao SSH-agent

O SSH-agent é um gerenciador de chaves SSH, ele lida com a assinatura de dados de autenticação para você. Ao se autenticar em um servidor é necessário assinar alguns dados usando sua chave privada, para provar quem você é.
O uso de um agente de chave permite o uso de várias chaves de forma simples, não sendo necessário especificar o caminho para cada chave individualmente.

Para iniciar, vamos executar o ssh-agent:

$ eval "$(ssh-agent -s)"

Incluir sua ssh-key ao ssh-agent:

$ ssh-add ~/.ssh/id_ed25519

Adicionando sua nova chave SSH ao Github

A sua chave SSH foi criada no arquivo C:\Users\nome-do-seu-usuario.ssh\id_rsa.pub, você precisará copiar o conteúdo desse arquivo, e isso pode ser feito tanto manualmente (abrindo o arquivo pelo explorador de arquivos e copiando), ou por linha de comando utilizando o clip:

clip < ~/.ssh/id_ed25519.pub

Abra seu Github, vá até Configurações > SSH and GPG Keys e clique no botão "New SSH Key".

Em Title crie o nome que preferir para seu dispositvo novo, e em Key basta colar a chave que foi copiada do terminal com o comando clip, ou manualmente pelo arquivo, e pronto, você configurou o Git e Github com uma chave SSH!

DEV Community: Carine Batista