Você já teve problemas com recursos da web, como folhas de estilo ou imagens, não carregando?
Você está vendo’Falha ao carregar recurso net:: ERR_BLOCKED_BY_CLIENT’ no console do desenvolvedor?
Você também pode ver uma mensagem semelhante: ‘solicitações para o servidor foram bloqueadas por uma extensão’.
Isso é ruim porque pode quebrar seu aplicativo da web ou pelo menos não faz com que pareça certo.
Normalmente, isso se deve a um arquivo ausente no servidor ou a um erro de digitação no URL. Existem casos extremos em que a solicitação não está faltando (status 404), mas outra coisa está bloqueando a solicitação.
Há muitos níveis em que uma solicitação pode ser bloqueada. A causa pode estar na camada de transporte de rede, um servidor proxy ou roteador entre você e o servidor. Também pode ser algo no navegador.
Ontem à noite, recebi um e-mail de um leitor que queria me informar que algumas imagens da postagem do blog não estavam renderizando. Ele e eu presumimos que era um problema 404.
Quando comecei a solucionar o problema, percebi que as imagens não estavam faltando ou estavam incorretas. As imagens renderizadas no Microsoft Edge. No Chrome, as imagens não foram encontradas em lugar nenhum.
FRUSTRANDO !!!!
Após uma investigação mais aprofundada, noto que a solicitação para essas imagens não era 404. mas uma mensagem de erro obscura na cascata da rede,
‘Falha ao carregar o recurso net:: ERR_BLOCKED_BY_CLIENT’
Todos os tipos de cenários malucos passaram pela minha cabeça. Eu me perguntei se houve um problema de cabeçalho, um erro de configuração do servidor ou uma imagem possivelmente malformada que o Chrome não gostou.
Então, fiz o que qualquer bom desenvolvedor ou administrador de sistema faz…
> Eu pesquisei (pesquisei nos motores de busca LOL) o problema. Baixo e eis que encontrei várias perguntas StackOverflow sobre o ‘net:: ERR_BLOCKED_BY_CLIENT’problema .
Resolvendo o problema
Acontece que quando a cascata da rede lista esse erro, isso significa que uma extensão do navegador bloqueou a solicitação. O culpado mais comum é um bloqueador de anúncios como AdBlock Plus .
Em suma, suas solicitações ao servidor foram bloqueadas por uma extensão. Especificamente, o AdBlock Plus estava bloqueando minha imagem.
Mas como posso corrigir isso?
Otimizo todas as minhas imagens criando um array de imagens responsivo. Eu coloco metadados em seus nomes para diferenciar cada tamanho.
O array é gerado por um serviço responsivo de otimização de imagens que estou construindo. À medida que as imagens são geradas, a largura e a altura da imagem são acrescentadas ao nome do arquivo. Fazemos isso para que seja mais fácil para os humanos saber o tamanho da imagem e ajudar o software a analisar as imagens pelo nome.
Felizmente, todas as imagens bloqueadas têm as mesmas dimensões, 300 x 600 pixels. O serviço anexou’-300×600′. a seus nomes de arquivo.
Embora isso normalmente não seja um problema, esse padrão de texto específico corresponde a um padrão na lista de expressões AdBlock Plus.
Vencendo AdBlock Plus
Se você não está familiarizado com a forma como as extensões AdBlock, extensões de”segurança para navegador”ou filtros de spam funcionam, eles usam expressões regulares para procurar padrões de texto. Quando eles encontram uma correspondência, eles bloqueiam a solicitação ou o e-mail.
Eu não tinha certeza de como determinar o que estava causando o problema. Felizmente, o AdBlock Plus oferece uma janela de como a extensão processa as solicitações.
Nas ferramentas de desenvolvedor do Chrome, quando AdBlock plus é instalado, você notará um painel extra chamado AdBlock. Isso listará todas as solicitações de rede exatamente como o painel em cascata da rede, exceto que a lista mostra visualmente como a extensão AdBlock processou essa solicitação específica. Como essas imagens foram bloqueadas, a lista mostra o que causa o bloqueio dos ativos.
Como você pode ver nas imagens, as imagens foram bloqueadas por causa do’-300×600.’padrão no nome. De acordo com a coluna Filtro, a correspondência faz parte dos critérios EasyList usados pelo AdBlock Plus. Minha solução é ajustar o algoritmo de nomenclatura para que o padrão de dimensão da imagem não corresponda ao padrão AdBlock Plus.
Os consumidores podem desativar extensões como AdBlock Plus, mas é duvidoso que o façam. Eles o estão usando por um motivo.
Em vez disso, cabe a nós, desenvolvedores, devops e proprietários de sites detectar esse tipo de problema. Renomeie nossos arquivos para evitar censura desnecessária.
É assim que os bandidos contornam essas extensões. Você não está fazendo nada de ruim, certo ???
Então, inclua isso na sua auditoria de rotina. Certifique-se de que sua página carregue corretamente em navegadores com extensões populares ativadas.
A próxima vez que você vir esta mensagem de erro obscura na árvore da sua rede e não conseguir descobrir o porquê, pode ser devido a uma extensão do navegador. Espero que seus problemas estejam em uma extensão como AdBlock Plus, que permitirá que você saiba por que a solicitação foi bloqueada.
Agora que eu sei que a sequência de caracteres’-300×600.”Está causando a falha ao carregar Recurso ERR_BLOCKED_BY_CLIENT problema Eu voltarei e ajustarei minha lógica de nomenclatura para ajustar o padrão com algo ligeiramente diferente para que não corresponda ao algoritmo da extensão.
