Como usar com segurança imagens vetoriais com WordPress

Publicados: 2019-06-12

Existem dezenas de tipos de arquivos de imagem que você pode usar para sua mídia. Fora da caixa, o WordPress oferece suporte à maioria dos tipos de arquivo de imagem mais populares, incluindo .jpeg , .png , .gif e muito mais. No entanto, não inclui suporte para imagens vetoriais.

Anteriormente, falamos sobre como criar Scalable Vector Graphics (SVGs), bem como seus benefícios. Para este artigo, examinaremos o conceito de SVGs mais uma vez, por que usá-los da maneira errada pode ser inseguro e como implementá-los de fato sem comprometer seu site.

Vamos ao trabalho!

Inscreva-se no nosso canal no Youtube

Uma introdução aos SVGs

SVGs são imagens baseadas não em pixels, mas em vetores, como você deve ter adivinhado pelo nome. Se você tentar abrir um arquivo de imagem normal usando um editor de texto, verá algo sem sentido. No entanto, se você tentou abrir um SVG em vez disso, provavelmente verá um código como o seguinte (retirado de nosso primeiro artigo sobre SVGs): 

<svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'></pre>
<path d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/>
</svg>

Esses, em poucas palavras, são uma série de vetores que compõem uma representação do logotipo da Adobe, com um traço de cor jogado em:

O logotipo da Adobe.

Os SVGs são exclusivos porque mantêm sua qualidade em qualquer tamanho (ou seja, escalonáveis) e ainda terão uma aparência perfeita, independentemente das dimensões usadas. Isso o torna um tipo de arquivo ideal para alguns casos de uso específicos:

  • Logos que você frequentemente desejará reutilizar em diferentes plataformas.
  • Ícones que você deseja dimensionar dependendo do contexto.
  • Imagens que você deseja animar usando Cascading Style Sheets (CSS).

Tecnicamente, existem três maneiras de criar SVGs. Você mesmo poderia escrever o código, o que não é prático, a menos que você seja uma máquina. As outras rotas seriam desenhar um SVG do zero ou pegar uma imagem existente e usar um software como o Illustrator ou Sketch para exportá-la como um SVG.

Apesar dos pontos positivos, existem duas desvantagens em usar SVGs. Em primeiro lugar, eles não são práticos para gráficos complexos. Por exemplo, uma fotografia normal levaria milhões de vetores para ser composta, o que daria um arquivo SVG gigantesco. A segunda desvantagem de usar SVGs está relacionada à segurança - e discutiremos isso na próxima seção.

Por que o uso de SVGs pode afetar a segurança do seu site

Embora geralmente nos referamos a SVGs como arquivos de imagem, seria mais correto chamá-los de 'documentos'. Afinal, você pode abrir, ler e modificar facilmente um arquivo SVG usando um editor de texto, que é semelhante a um documento normal.

O problema está na capacidade de adicionar JavaScript ao lado de informações vetoriais. Teoricamente, isso significa que a implementação do suporte SVG em seu site pode abrir você para ataques se alguém fizer upload de um arquivo contendo código malicioso.

É uma preocupação tão grande que o suporte SVG para WordPress esteja em discussão há mais de seis anos :

Uma passagem do Trac de seis anos atrás.

Embora você não precise percorrer todo o tíquete, a essência é até que haja uma maneira de garantir que o código SVG que você carregou no WordPress seja seguro, implementar o recurso pode causar mais problemas do que benefícios.

No momento, já existem várias ferramentas que você pode usar para garantir a segurança de seus SVGs, chamadas de 'higienizadores'. No entanto, aparentemente não há boas maneiras de implementar sua funcionalidade no WordPress atualmente.

No geral, adicionar suporte SVG ao WordPress é relativamente simples na prática. A verdadeira dificuldade está em fazer isso de uma maneira que não deixe seu site vulnerável a ataques em potencial.

2 maneiras de usar imagens vetoriais com segurança com WordPress

Para esta seção, exploraremos uma abordagem manual e baseada em plug-in para o uso seguro de SVG no WordPress. Você poderá então escolher a melhor opção para suas necessidades. Vamos lá!

1. Adicione suporte SVG manualmente e higienize seu código

Você pode adicionar suporte SVG ao WordPress em questão de minutos com um trecho de código. No entanto, isso deixaria você aberto aos possíveis problemas de segurança que discutimos antes. A abordagem mais segura para a implementação de SVG envolve as seguintes etapas:

  1. Habilite o suporte SVG modificando seu arquivo functions.php .
  2. Restrinja as funções de usuário que você deseja, impedindo-as de fazer upload de arquivos .svg para o WordPress.
  3. Limpe todos os arquivos SVG antes de carregá-los.

No geral, as etapas um e dois não são difíceis de realizar. A primeira tarefa é acessar seu site através do protocolo de transferência de arquivos (FTP) e navegar até a pasta raiz do WordPress. Lá dentro, procure seu arquivo functions.php , abra-o e adicione o seguinte código (cortesia de Chris Coyier da CodePen e CSS Tricks): 

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }

  $filetype = wp_check_filetype( $filename, $mimes );

  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];

}, 10, 4 );

function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

Isso cumpre duas funções - permite fazer upload de arquivos SVG para o WordPress e visualizá-los em sua biblioteca de mídia. Depois de adicionar o código, salve as alterações em seu arquivo functions.php e feche-o.

As coisas agora ficam um pouco mais complicadas, pois precisamos evitar que usuários em quem não confiamos carreguem SVGs corrompidos. Por exemplo, você pode confiar em seus editores e autores para enviar os arquivos corretos, mas não em seus colaboradores. Existem duas maneiras de fazer isso:

  1. Crie funções de usuário personalizadas com acesso limitado ou nenhum acesso à Biblioteca de mídia.
  2. Use um plugin, como WP Upload Restriction, para limitar os tipos de arquivos que cada função de usuário pode carregar.

Ambas as abordagens têm suas falhas, o que é uma das razões implementação SVG manual pode ficar complicado. No entanto, depois de definir um método para garantir que ninguém possa carregar arquivos SVG maliciosos, você também precisa garantir que não o fará por engano.

O ideal é que você execute cada SVG que carregar em seu site por meio de uma ferramenta de limpeza antes de fazer isso. Isso pegará seu arquivo, certifique-se de que ele não inclua nada desagradável e remova se incluir. No final das contas, isso deixa você com um arquivo SVG limpo que pode finalmente carregar no WordPress.

2. Use o plug-in Safe SVG

Com a abordagem acima, queríamos mostrar como a implementação segura de SVG pode ser complexa. Isso é para que você possa apreciar adequadamente o que o plug-in Safe SVG faz.

O plug-in Safe SVG.

Em suma, este plug-in cuida de todos os problemas que listamos antes, incluindo:

  • Permitindo que você carregue SVGs em primeiro lugar.
  • Certificando-se de que você pode ver seus SVGs na Biblioteca de mídia.
  • Limpar o código de cada SVG carregado para evitar problemas de segurança.

Este é basicamente um tipo de plug-in plug-and-play e é definitivamente a abordagem mais direta para a implementação segura de SVG no WordPress. Se você pretende usar SVGs, recomendamos que experimente.

Como animar SVGs usando CSS e plug-ins

Se você passar por todos os problemas (dependendo do método} usado) de implementação de SVGs no WordPress, provavelmente vai querer obter o máximo retorno do seu investimento. Isso significa usar CSS para animar seus SVGs se a situação exigir. Existem duas maneiras de realizar o processo, que abordamos no passado:

  1. Anime SVGs manualmente com CSS, como faria com qualquer outro elemento.
  2. Use ferramentas como o SVGator para ajudá-lo a gerar e animar SVGs.

Se você deseja experimentar um pouco, algumas animações aqui e ali podem realmente elevar a experiência do usuário do seu site. Mais importante, usar SVGs e CSS para fazer isso é muito melhor do que, digamos, adicionar vídeos ou GIFs, principalmente para dispositivos móveis.

Conclusão

Os SVGs são uma escolha fantástica para muitas situações. Para dar um exemplo, eles são a opção perfeita para logotipos de sites devido à sua escalabilidade. Em geral, o uso de SVGs pode ajudá-lo a criar um site com maior capacidade de resposta, o que é sempre bom no que diz respeito aos usuários.

No entanto, se você estiver planejando adicionar suporte SVG ao WordPress, certifique-se de usar uma abordagem que mantenha seu site seguro. Existem dois métodos de recomendação:

  1. Adicione suporte SVG manualmente e higienize seu código.
  2. Use o plug-in Safe SVG.

Você tem alguma dúvida sobre como usar SVGs com segurança no WordPress? Vamos falar sobre eles na seção de comentários abaixo!

Imagem em miniatura do artigo: microtic / shutterstock.com