Entendendo o Content Security Policy - CSP

O que é CSP?

O Content Security Policy (Política de Segurança de Conteúdo) é uma camada adicional de segurança, que permite aos administradores do site ter controle sobre os recursos que o agente de usuário é permitido carregar em determinada página.

A intenção dessa camada de segurança é impedir que ataques de injeção de códigos (scripts entre sites) resultantes da execução de conteúdo malicioso ocorram na página web. Esses ataques são efetuados com o intuito de executar roubo de dados e até a desfiguração do site para distribuição de malware.

Como o CSP afeta o Hand Talk Plugin?

Agora que entendemos o que é a Política de Segurança de Conteúdo - CSP e qual a sua funcionalidade fica mais fácil de entender o por quê do Hand Talk Plugin não estar sendo carregado em seu website.

Como foi explicado anteriormente, o CSP é uma camada adicional de segurança que permite os administradores do site controlarem o conteúdo que pode ser carregado na página. Caso seu website tenha a camada de CSP configurada, você irá precisar efetuar a liberação para o carregamento de conteúdo do Hand Talk Plugin.

Que tal vermos um exemplo prático de bloqueio?

Ao tentar abrir o Hand Talk plugin notamos que não conseguimos efetuar o carregamento completo. Quando abrimos a ferramenta de desenvolvedores para o browser, na aba console podemos notar a seguinte mensagem.

 ⛔ Refused to load the image 'blob:<URL>' because it violates the following Content Security Policy directive: "img-src * 'self' data: https:". Note that '*' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches self's scheme. blob:' must be added explicitely.

Basicamente, essa mensagem me informa que a página se recusa a carregar o conteúdo de imagens (img-src) do Hand Talk Plugin porque a URL viola a diretiva de Política de Segurança de Conteúdo.

Ao navegarmos para aba Network da ferramenta de desenvolvedores do browser, nota-se: existem algumas requisições que estão sendo bloqueadas pelo servidor do website.

Ao abrir os links que estão sendo bloqueados pelo servidor podemos notar que esses arquivos se tratam das texturas do tradutor do Hand Talk plugin.

Como configurar a liberação do Hand Talk em website?

A configuração de CSP em seu website pode variar de acordo com o ambiente utilizado. Na maioria dos ambientes, essa configuração pode ser realizada com a adição de uma tag <meta>.

Para configurar a liberação do bloqueio que ocorre no exemplo prático mostrado acima nós podemos utilizar a tag <meta> da seguinte forma:

<meta http-equiv="Content-Security-Policy" content="img-src 'self' blob: https://handtalk.me/;"/>

Na tag meta descrita acima, efetuamos a liberação dos conteúdos de imagem para o domínio da handtalk (https://handtalk.me/), com isso seu CSP estará configurado para liberar o carregamento do Hand Talk plugin.