Os 10 erros mais comuns que os desenvolvedores da Web cometem: um tutorial para desenvolvedores

Publicados: 2022-03-11

Desde que o termo World Wide Web foi cunhado em 1990, o desenvolvimento de aplicativos da Web evoluiu de servir páginas HTML estáticas para aplicativos de negócios complexos e completamente dinâmicos.

Hoje temos milhares de recursos digitais e impressos que fornecem instruções passo a passo sobre o desenvolvimento de todos os tipos de aplicações web diferentes. Os ambientes de desenvolvimento são “inteligentes” o suficiente para detectar e corrigir muitos erros com os quais os primeiros desenvolvedores lutavam regularmente. Existem até muitas plataformas de desenvolvimento diferentes que transformam facilmente páginas HTML estáticas simples em aplicativos altamente interativos.

Todos esses padrões, práticas e plataformas de desenvolvimento compartilham um terreno comum e são propensos a problemas semelhantes de desenvolvimento da Web causados ​​pela própria natureza dos aplicativos da Web.

O objetivo dessas dicas de desenvolvimento web é esclarecer alguns dos erros comuns cometidos em diferentes estágios do processo de desenvolvimento web e ajudá-lo a se tornar um desenvolvedor melhor. Abordei alguns tópicos gerais que são comuns a praticamente todos os desenvolvedores da Web, como validação, segurança, escalabilidade e SEO. É claro que você não deve se limitar aos exemplos específicos que descrevi neste guia, pois eles estão listados apenas para dar uma ideia dos possíveis problemas que você pode encontrar.

Erro comum nº 1: validação de entrada incompleta

Validar a entrada do usuário no lado do cliente e do servidor é simplesmente obrigatório ! Estamos todos cientes do sábio conselho “não confie na entrada do usuário” , mas, no entanto, erros decorrentes da validação acontecem com muita frequência.

Uma das consequências mais comuns desse erro é o SQL Injection que está no OWASP Top 10 ano após ano.

Lembre-se de que a maioria das estruturas de desenvolvimento front-end fornece regras de validação prontas para uso que são incrivelmente simples de usar. Além disso, a maioria das principais plataformas de desenvolvimento de back-end usa anotações simples para garantir que os dados enviados estejam de acordo com as regras esperadas. A implementação da validação pode ser demorada, mas deve ser parte de sua prática de codificação padrão e nunca deve ser deixada de lado.

Erro comum nº 2: autenticação sem autorização adequada

Antes de prosseguirmos, vamos nos certificar de que estamos alinhados nesses dois termos. Conforme declarado nas 10 vulnerabilidades de segurança da Web mais comuns:

Autenticação: Verificar se uma pessoa é (ou pelo menos aparenta ser) um usuário específico, desde que tenha fornecido corretamente suas credenciais de segurança (senha, respostas a perguntas de segurança, digitalização de impressões digitais, etc.).

Autorização: Confirmar que um determinado usuário tem acesso a um recurso específico ou tem permissão para realizar uma determinada ação.

Dito de outra forma, autenticação é saber quem é uma entidade, enquanto autorização é saber o que uma determinada entidade pode fazer.

Deixe-me demonstrar esse problema com um exemplo:

Considere que seu navegador mantém as informações do usuário atualmente registradas em um objeto semelhante ao seguinte:

 { username:'elvis', role:'singer', token:'123456789' }

Ao fazer uma alteração de senha, sua aplicação faz o POST:

 POST /changepassword/:username/:newpassword

Em seu método /changepassword , você verifica se o usuário está conectado e o token não expirou . Em seguida, você encontra o perfil do usuário com base no parâmetro :username e altera a senha do seu usuário.

Assim, você validou que seu usuário está logado corretamente e, em seguida, executou a solicitação dele, alterando sua senha. Processo parece OK, certo? Infelizmente, a resposta é NÃO!

Neste ponto é importante verificar se o usuário que está executando a ação e o usuário cuja senha foi alterada são os mesmos. Qualquer informação armazenada no navegador pode ser adulterada, e qualquer usuário avançado pode facilmente atualizar username:'elvis' para username:'Administrator' sem usar nada além das ferramentas internas do navegador.

Portanto, neste caso, apenas cuidamos da Authentication , certificando-nos de que o usuário forneceu credenciais de segurança. Podemos até adicionar a validação de que o método /changepassword só pode ser executado por usuários Authenticated . No entanto, isso ainda não é suficiente para proteger seus usuários de tentativas maliciosas.

Você precisa certificar-se de verificar o solicitante real e o conteúdo da solicitação dentro do seu método /changepassword e implementar a Authorization adequada da solicitação, garantindo que o usuário possa alterar apenas seus dados.

Authentication e Authorization são dois lados da mesma moeda. Nunca os trate separadamente.

Erro comum nº 3: Não está pronto para escalar

No mundo atual de desenvolvimento de alta velocidade, aceleradores de inicialização e alcance global instantâneo de grandes ideias, ter seu MVP (produto mínimo viável) no mercado o mais rápido possível é um objetivo comum para muitas empresas.

No entanto, essa pressão de tempo constante está fazendo com que até mesmo as boas equipes de desenvolvimento da Web ignorem certos problemas. O dimensionamento geralmente é uma daquelas coisas que as equipes consideram garantidas. O conceito de MVP é ótimo, mas vá longe demais e você terá sérios problemas. Infelizmente, selecionar um banco de dados escalável e um servidor web e separar todas as camadas de aplicativos em servidores escaláveis ​​independentes não é suficiente. Há muitos detalhes que você precisa pensar se quiser evitar reescrever partes significativas de seu aplicativo posteriormente - o que se torna um grande problema de desenvolvimento web.

Por exemplo, digamos que você opte por armazenar fotos de perfil carregadas de seus usuários diretamente em um servidor da web. Esta é uma solução perfeitamente válida — os arquivos são rapidamente acessíveis ao aplicativo, os métodos de manipulação de arquivos estão disponíveis em todas as plataformas de desenvolvimento e você pode até mesmo servir essas imagens como conteúdo estático, o que significa carga mínima em seu aplicativo.

Mas o que acontece quando seu aplicativo cresce e você precisa usar dois ou mais servidores web por trás de um balanceador de carga? Mesmo que você tenha dimensionado bem seu armazenamento de banco de dados, servidores de estado de sessão e servidores da Web, a escalabilidade de seu aplicativo falha devido a uma coisa simples, como imagens de perfil. Assim, você precisa implementar algum tipo de serviço de sincronização de arquivos (que terá um atraso e causará erros 404 temporários) ou outra solução alternativa para garantir que os arquivos sejam distribuídos em seus servidores web.

O que você precisava fazer para evitar o problema em primeiro lugar era apenas usar o local de armazenamento de arquivos compartilhados, banco de dados ou qualquer outra solução de armazenamento remoto. Provavelmente teria custado algumas horas extras de trabalho para ter tudo implementado, mas teria valido a pena.

Erro comum nº 4: SEO errado ou ausente

A causa raiz das práticas recomendadas de SEO incorretas ou ausentes em sites da Web são “especialistas em SEO” mal informados. Muitos desenvolvedores da web acreditam que sabem o suficiente sobre SEO e que não é especialmente complexo, mas isso não é verdade. O domínio de SEO requer um tempo significativo gasto pesquisando as melhores práticas e as regras em constante mudança sobre como o Google, Bing e Yahoo indexam a web. A menos que você experimente constantemente e tenha rastreamento e análise precisos, você não é um especialista em SEO e não deve alegar ser um.

Além disso, o SEO é muitas vezes adiado como alguma atividade que é feita no final. Isso tem um alto preço de problemas de desenvolvimento web. SEO não está relacionado apenas à definição de bom conteúdo, tags, palavras-chave, metadados, tags alt de imagem, mapa do site, etc.

Assim como na escalabilidade, você deve pensar em SEO desde o momento em que começa a construir seu aplicativo da web, ou pode descobrir que concluir seu projeto de implementação de SEO significa reescrever todo o seu sistema.

Erro Comum Nº 5: Tempo ou Ações de Consumo do Processador em Manipuladores de Solicitações

Um dos melhores exemplos desse erro é enviar e-mail com base em uma ação do usuário. Muitas vezes os desenvolvedores pensam que fazer uma chamada SMTP e enviar uma mensagem diretamente do manipulador de solicitação do usuário é a solução.

Digamos que você criou uma livraria online e espera começar com algumas centenas de pedidos diários. Como parte do processo de recebimento de pedidos, você envia e-mails de confirmação sempre que um usuário publica um pedido. Isso funcionará sem problemas no início, mas o que acontece quando você dimensiona seu sistema e, de repente, recebe milhares de solicitações enviando e-mails de confirmação? Você obtém tempos limite de conexão SMTP, cota excedida ou o tempo de resposta do aplicativo diminui significativamente, pois agora está lidando com e-mails em vez de usuários.

Qualquer ação que consuma tempo ou processador deve ser tratada por um processo externo enquanto você libera suas solicitações HTTP o mais rápido possível. Nesse caso, você deve ter um serviço de correio externo que esteja coletando pedidos e enviando notificações.

Erro comum nº 6: não otimizar o uso da largura de banda

A maior parte do desenvolvimento e teste ocorre em um ambiente de rede local. Portanto, ao baixar 5 imagens de plano de fundo, cada uma com 3 MB ou mais, você pode não identificar um problema com a velocidade de conexão de 1 Gbit em seu ambiente de desenvolvimento. Mas quando seus usuários começarem a carregar uma página inicial de 15 MB em conexões 3G em seus smartphones, você deve se preparar para uma lista de reclamações e problemas.

Otimizar o uso da largura de banda pode proporcionar um ótimo aumento de desempenho e, para obter esse aumento, você provavelmente precisará apenas de alguns truques. Existem poucas coisas que muitos bons desenvolvedores da web fazem por padrão, incluindo:

  1. Minificação de todo JavaScript
  2. Minificação de todos os CSS
  3. Compressão HTTP do lado do servidor
  4. Otimização do tamanho e resolução da imagem

Erro comum nº 7: não desenvolver para diferentes tamanhos de tela

O design responsivo tem sido um grande tema nos últimos anos. A expansão dos smartphones com diferentes resoluções de tela trouxe muitas novas formas de acessar o conteúdo online, que também vem com uma série de problemas de desenvolvimento web. O número de visitas ao site provenientes de smartphones e tablets cresce a cada dia, e essa tendência está se acelerando.

Para garantir uma navegação e acesso contínuos ao conteúdo do site, você deve permitir que os usuários o acessem de todos os tipos de dispositivos.

Existem inúmeros padrões e práticas para a construção de aplicativos web responsivos. Cada plataforma de desenvolvimento tem suas próprias dicas e truques, mas existem alguns frameworks que são independentes de plataforma. O mais popular é provavelmente o Twitter Bootstrap. É uma estrutura HTML, CSS e JavaScript de código aberto e gratuita que foi adotada por todas as principais plataformas de desenvolvimento. Basta aderir aos padrões e práticas do Bootstrap ao criar seu aplicativo e você obterá um aplicativo da Web responsivo sem nenhum problema.

Erro comum nº 8: incompatibilidade entre navegadores

O processo de desenvolvimento está, na maioria dos casos, sob forte pressão de tempo. Todo aplicativo precisa ser lançado o mais rápido possível e até mesmo bons desenvolvedores da Web geralmente se concentram em fornecer funcionalidade em vez de design. Independentemente do fato de a maioria dos desenvolvedores ter o Chrome, Firefox, IE instalado, eles estão usando apenas um desses 90% do tempo. É uma prática comum usar um navegador durante o desenvolvimento e, assim que o aplicativo estiver quase pronto, você começará a testá-lo em outros navegadores. Isso é perfeitamente razoável – supondo que você tenha muito tempo para testar e corrigir problemas que aparecem neste estágio.

No entanto, existem algumas dicas de desenvolvimento da Web que podem economizar um tempo significativo quando seu aplicativo atingir a fase de teste entre navegadores:

  1. Você não precisa testar em todos os navegadores durante o desenvolvimento; é demorado e ineficaz. No entanto, isso não significa que você não possa trocar de navegador com frequência. Use um navegador diferente a cada dois dias e você pelo menos reconhecerá os principais problemas no início da fase de desenvolvimento.
  2. Tenha cuidado ao usar estatísticas para justificar o não suporte a um navegador. Existem muitas organizações que são lentas na adoção de novos softwares ou na atualização. Milhares de usuários que trabalham lá ainda podem precisar de acesso ao seu aplicativo e não podem instalar o navegador gratuito mais recente devido a políticas internas de segurança e negócios.
  3. Evite o código específico do navegador. Na maioria dos casos, existe uma solução elegante que é compatível com vários navegadores.

Erro comum nº 9: não planejar a portabilidade

A suposição é a mãe de todos os problemas! Quando se trata de portabilidade, esse ditado é mais verdadeiro do que nunca. Quantas vezes você viu problemas no desenvolvimento da Web, como caminhos de arquivos codificados, cadeias de conexão de banco de dados ou suposições de que uma determinada biblioteca estará disponível no servidor? Assumir que o ambiente de produção corresponderá ao seu computador de desenvolvimento local está simplesmente errado.

A configuração ideal do aplicativo deve ser livre de manutenção:

  1. Certifique-se de que seu aplicativo possa ser dimensionado e executado em um ambiente de vários servidores com balanceamento de carga.
  2. Permitir configuração simples e clara – possivelmente em um único arquivo de configuração.
  3. Lide com exceções quando a configuração do servidor web não é a esperada.

Erro comum nº 10: Antipadrões RESTful

As APIs RESTful tomaram seu lugar no desenvolvimento web e vieram para ficar. Quase todas as aplicações web implementaram algum tipo de serviço REST, seja para uso interno ou integração com sistema externo. Mas ainda vemos padrões e serviços RESTful quebrados que não aderem às práticas esperadas.

Dois dos erros mais comuns cometidos ao escrever uma API RESTful são:

  1. Usando verbos HTTP errados. Por exemplo, usando GET para gravar dados. O HTTP GET foi projetado para ser idempotente e seguro, o que significa que não importa quantas vezes você chame GET no mesmo recurso, a resposta deve ser sempre a mesma e nenhuma alteração no estado do aplicativo deve ocorrer.

  2. Não enviando códigos de status HTTP corretos. O melhor exemplo desse erro é enviar mensagens de erro com o código de resposta 200.

     HTTP 200 OK { message:'there was an error' }

Você só deve enviar HTTP 200 OK quando a solicitação não tiver gerado erro. Em caso de erro, você deve enviar 400, 401, 500 ou qualquer outro código de status apropriado para o erro ocorrido.

Uma visão geral detalhada dos códigos de status HTTP padrão pode ser encontrada aqui.

Embrulhar

Desenvolvimento da Web é um termo extremamente amplo que pode abranger legitimamente o desenvolvimento de um site, serviço da Web ou aplicativo da Web complexo.

A principal lição deste guia de desenvolvimento web é o lembrete de que você deve sempre ter cuidado com autenticação e autorização, planejar a escalabilidade e nunca assumir nada apressadamente - ou estar pronto para lidar com uma longa lista de problemas de desenvolvimento web!