carlosscheffer

Fala pessoal, tudo bem? Espero que sim! Meu primeiro post aqui na Casa do Desenvolvedor, e vim trazer uma experiência que estava me incomodando um tempo, pois não encontrávamos uma solução satisfatória para uma brecha de segurança em uma aplicação que minha equipe é responsável. A aplicação é portal web onde é feito um gerenciamento por software-houses, este portal é construído em VueJs, e hospedado na Amazon através do S3, com o Cloudfront. O que é fingerprint? "Fingerprint" vem do inglês, e sua tradução significa impressão digital. É uma analogia ao rastreamento de uma impressão digital humana, onde é possível rastreá-la até uma pessoa. Em software este conceito é empregado quando algo é possível rastrear até uma tecnologia, serviço, etc. O caso que estava incomodando a nossa equipe, foi a sinalização de uma brecha de segurança, onde havia essa tal "fingerprint" que nada mais era de um header de resposta dizendo qual era o serviço que está sendo hospedada nossa aplicação. O header era assim: Sim! Este header de resposta parece inofensivo, mas isto é considerado, por analistas de segurança, uma brecha de segurança, pois uma pessoa mal-intencionada pode explorar brechas existentes sobre a tecnologia e/ou serviço utilizado. Então supomos neste caso que o AmazonS3 tenha alguma brecha de segurança, a pessoa mal-intencionada conseguirá facilmente saber onde focar seus esforços de intrusão, pois afinal de contas ela já sabe que tal serviço dispõe dessa falha. A solução Pois, bem! Não encontrávamos de uma maneira muito clara a solução para este problema de maneira simples no CloudFront ou S3, então estávamos cogitando a possibilidade da utilização de um proxy reverso, ou então a utilização de lamba@edge, porém a utilização de ambas soluções além de demandar um esforço de configuração, uma camada a mais para aplicação, iria acarretar algum aumento de custos. Insistência de minha parte em tentar achar uma solução mais simples para este caso, e fuçando no Console da AWS encontrei um novo item no menu, de Cloudfront e fui buscar do que se tratava, e adivinhem só, era o que estávamos sentindo falta 🤩 Este novo recurso do Cloudfront permite criar políticas de cache, requests a origem (S3) e políticas de headers de resposta, podendo inclusive sobrescrever headers da origem. Então para fazer a remoção, realizei a criação de uma nova política de header de resposta, que a chamei de "Remove-Fingerprints" a qual adicionei um header personalizado, "Server" com o valor "TecnoSpeed SA" e sinalizando para sobrescrever o header da Origem, que vinha com o valor "AmazonS3". Em seguida salvei, e fui em minha distribuição em "Cloudfront > Distribuitions > XX0XX0X0X0XXXX > Edit behavior" e procurei por "Response headers policy" onde bastou eu selecionar a política que acabei de criar Em seguida, salvei a minha alteração e criei uma invalidação de cache (CloudFront > Distributions > XX0XX0X0X0XXXX > Create invalidation), para forçar a aplicação a carregar minhas alterações imediatamente Agora só esperar a invalidação ser completada , e prontinho! A aplicação de meu squad está um pouquinho mais segura e o pessoal da equipe segurança mais feliz 😅 Espero ter de alguma forma ter colaborado! Para ler mais sobre esse novo recurso do CloudFront clique aqui. Até a próxima, se ajudou, dê um curtir logo abaixo 😆

Olá @PuauloAraujo, essa semana! Fique atendo xD

Fala @erick0007, tudo bem? Seria interessante você nos dizer qual linguagem está utilizando para entendermos como poderíamos te orientar. Caso seja JavaScript você poderia utilizar template literals. Ex: //considerando que você já tenha definido as variáveis anteriormente, basta passar conforme abaixo: const url = `https://www.your-erick.com/file?status=${status}&trans_id=${trans_id}&user_id=${user_id}&sub_id=${subid}&sub_id_2=${subid_2}&amount_local=${amount_local}&amount_usd=${amount_usd }&offer_id=${offer_ID}&hash=${secure_hash}&ip_click=${ip_click}` // exemplo de como fazer o post: fetch(url, { method: 'POST' }) .then(T => T.json()) .then(console.log) Espero ter ajudado 😉

Acredito que entendi, Felipe. Basicamente você quer fazer um "webcrawler", que nada mais é do que um robô que acessa páginas na web. Eu havia ficado um pouco confuso quando você disse sobre "rodar na web", pois há vários formatos possíveis e entendíveis neste termo. Nada te impede de rodar Python na web, desde que você rode num servidor através de uma comunicação com seu frontend. Mas muitas vezes a gente se pergunta como? Mais abaixo eu falo um pouco sobre isso. Sobre linguagem é relativo, que linguagem você está acostumado? Eu trabalhando com Node.js/JavaScript a alguns anos, então eu daria/dou preferência para ela, principalmente neste caso, pois ela consegue se dar bem para resolver o problema proposto (inclusive recomendo 😅). Python também é comumente utilizada neste cenário, mas o ponto que gostaria de frisar é não necessariamente haverá uma melhor linguagem. Mas beleza, depois da palestrinha vou falar de Node e JavaScript que são cenários que eu manjo. Dê uma olhada neste post/tutorial aqui, de como criar um com NodeJS um "webcrawler", com certeza ele vai te ajudar. Mas uma dica que eu dou, é que você não crie diretamente no ".js" de seu site/sistema, quero dizer no frontend. \ Isso por que deves considerar recursos e o tempo de resposta da busca que fez em outro site... No modelo ideal você teria este "crawler", que chamo "worker", buscando "tarefas" para ser executada, essa busca pode ser de uma fila ou banco de dados. E assim que o worker identificar haver algo nesta fila, ele trabalhará para executar o que lhe foi demandado e atualizar o status da demanda. Assim você poderá consultar no seu frontend. Desenhei superficialmente um fluxo para você se inspirar. Este primeiro é oque o usuário/você deverá fazer . Este já é (superficialmente) fluxo que seu worker deverá fazer para que o usuário saiba o resultado. Quando falo em atualizar status, seria atualizar o registro no banco de dados. Eu mostrei um cenário que grandes empresas/aplicações utilizam para lidar com esse tipo de tarefa, principalmente em larga escala, alta demanda, ele é bom, porém pode ser custoso e complexo no início. Assim sendo estas são minhas sugestões (pode ser que haja até mais simples, mas são essas que EU achei legais): - Você poderia tentar seguir o tutorial que te mandei, e adaptar para uma página na web, muita coisa que roda em node pode rodar no browser - Hospedando sua aplicação em python num servidor onde ele leia uma fila/banco de dados (sinceramente acho essa a mais viável, tendo em vista com boa parte pronta) - Ou fazer me Node.js e hospedando num servidor onde ela leia uma fila/banco de dados Espero ter ajudado e boa sorte no projeto! Depois me diz o que você fez 😉

E ai @WPita, conseguiu resolver? Você utiliza a solução da TecnoSpeed?

Beleza @Alex Bianchi? Consegue colar o código aqui para nós? A imagem é comprimida então ficou bem pequena 😐

Fala @Nem1Real, beleza? Há dois errinhos no seu código. O primeiro é que você deveria chamar a função "ObterConta" dentro do evento de click do botão login, no formato que você fez a função "ObterConta" é executado quando o navegador acessa página do seu formulário. Deixando assim: BotaoEntrar.addEventListener('click', function (event) { event.preventDefault(); const conta = ObterConta(form); console.log(conta) }) O segundo errinho, é o fato da propriedade "textcontent" não estar pegando o valor do input, retornando undefined. Altera "textcontent" para "value" e deverá funcionar, veja o exemplo: function ObterConta(form) { var conta = { email: form.email.value, senha: form.senha.value } return conta; } Qualquer dúvida só chamar 😉

E ai @felipepereira, tudo bem? Não entendi o que você quer dizer com isso: Pode explicar um pouco mais?

Oi @italosaraiva.dev, beleza? Não entendi muito bem, se você não quer width:100% você quer que a imagem tenha a mesma largura que o mapa abaixo? Se for, você pode utilizar a propriedade max-width igual ao mapa, juntamente com width:100%. Em telas menores, como celulares, o width irá acompanhar a largura da tela, se for menor que a largura máxima definida.

Oi @PuauloAraujo, realmente está estranho! Vou confirmar com o pessoal do comitê do desafio, mas creio que onde esteja "CPF do depositante", seja "CPF do Destinatário". Assim que possível trago a confirmação 😊 Ah, estou movendo o tópico para a sessão de dúvidas do desafio 😉

Olá @PuauloAraujo, tudo bem? O depósito é uma operação de entrada, cometemos um engano na hora de montar o doc, vou providenciar a correção 😅 Qualquer dúvida, estamos aqui 😉

Oi Luisa, tudo bem? Não sei se entendi muito bem, mas seria algo assim? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Casa do Desenvolvedor</title> </head> <body> <h1>Hello Casa do Desenvolvedor! </h1> <div id="conteudo-do-json"></div> </body> <script> const jsonComHtml = { exemplo: `<a href="https://forum.casadodesenvolvedor.com.br/topic/35156-html-dentro-do-json/">Exemplo</a>` } document.getElementById("conteudo-do-json").innerHTML = jsonComHtml.exemplo; </script> </html> Me diz se lhe ajudou. Qualquer dúvida é só responder =D