Tags Relacionadas a Informações Meta

Este artigo explica as tags relacionadas a meta-informações.

Ele explica a tag <meta>, incluindo pontos relacionados a SEO, design responsivo e Content-Security-Policy.

YouTube Video

Tags Relacionadas a Informações Meta

Tag <meta>

1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0">

• A tag <meta> fornece metadados para o documento HTML. Os metadados não são exibidos na página, mas são usados por motores de busca e navegadores. A tag <meta> é usada para descrições de páginas, palavras-chave, informações do autor e configurações de design responsivo.

Tag <meta name="viewport">

1<meta name="viewport" content="width=device-width, initial-scale=1">

• A tag <meta name="viewport"> controla o layout e a escala das páginas da web em diferentes dispositivos. É comumente usada em design responsivo para garantir a exibição adequada em dispositivos móveis.

Tag <meta name="description">

1<meta name="description" content="An example webpage">

• A tag <meta name="description"> é usada para descrever brevemente o conteúdo de uma página da web. Os motores de busca usam essa descrição para exibir um resumo da página nos resultados de busca.

Tag <meta name="keywords">

1<meta name="keywords" content="HTML, CSS, JavaScript">

• A tag <meta name="keywords"> fornece uma lista de palavras-chave relevantes para o conteúdo da página. Os motores de busca usam essas palavras-chave para entender melhor o conteúdo da página.

Tag <meta name="author">

1<meta name="author" content="John Doe">

• A tag <meta name="author"> especifica o autor da página da web. Essa informação é usada principalmente por motores de busca e ferramentas para identificar com precisão o autor da página.

Tag <meta http-equiv="refresh">

1<meta http-equiv="refresh" content="5; url=https://example.com">

• A tag <meta http-equiv="refresh"> é usada para atualizar automaticamente a página ou redirecionar para outra URL após um tempo especificado. É útil para recarregar a página ou redirecionar o usuário.

Tag <meta http-equiv="cache-control">

1<meta http-equiv="cache-control" content="no-cache">

• A tag <meta http-equiv="cache-control"> é usada para controlar o comportamento de cache da página da web. Ela pode especificar se deve armazenar a página em cache ou revalidá-la em acessos subsequentes.

Tag <meta http-equiv="expires">

1<meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT">

• A tag <meta http-equiv="expires"> define uma data de expiração para o conteúdo da página. Uma vez que a data especificada tenha passado, o conteúdo torna-se desatualizado e o navegador é incentivado a obter uma nova versão.

Tag <meta http-equiv="X-UA-Compatible">

1<meta http-equiv="X-UA-Compatible" content="IE=edge">

• A tag <meta http-equiv="X-UA-Compatible"> é usada para especificar o modo de compatibilidade para o Internet Explorer. Esta tag garante que o navegador use a versão apropriada do motor de renderização para exibir a página.

Tag <meta http-equiv="content-security-policy">

O atributo http-equiv="content-security-policy" em uma tag meta HTML é uma função para aplicar regras de segurança específicas no navegador, a fim de melhorar a segurança da página web. Ao usar este atributo, os desenvolvedores de sites podem definir políticas relacionadas ao carregamento de recursos e execução de scripts para evitar ataques como XSS (Cross-Site Scripting) e injeção de dados.

O que é Content-Security-Policy?

Content-Security-Policy (CSP) é um tipo de cabeçalho HTTP usado para controlar quais recursos externos (imagens, scripts, folhas de estilo, etc.) uma página web pode carregar e quais tipos de código podem ser executados. Normalmente, ele é enviado como um cabeçalho HTTP, mas também pode ser definido dentro do HTML usando uma tag meta. Este método permite especificar o CSP no lado do cliente, em vez de configurar os cabeçalhos no lado do servidor.

Por exemplo, você pode definir CSP na tag meta do HTML da seguinte maneira:.

1<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://example.com; script-src 'self' https://apis.google.com">

Neste exemplo, as seguintes políticas são definidas:

• default-src 'self': Basicamente, todos os recursos são carregados apenas da mesma origem (o próprio site).
• img-src https://example.com: As imagens são carregadas apenas de https://example.com.
• script-src 'self' https://apis.google.com: Os scripts só podem ser executados da mesma origem ou de https://apis.google.com.

Diferenças entre http-equiv e cabeçalhos HTTP

Normalmente, o Content-Security-Policy é enviado do servidor para o cliente como um cabeçalho HTTP. No entanto, se você configurá-lo no lado do cliente usando a tag meta, ele pode ser escrito diretamente no HTML.

No entanto, existem algumas diferenças importantes entre defini-lo como um cabeçalho HTTP e especificá-lo com uma tag meta:

1. Prioridade: Um CSP enviado por meio de cabeçalhos HTTP tem precedência sobre um especificado em uma tag meta. Isso significa que, se um CSP está configurado no lado do servidor, ele não será substituído por uma tag meta usada no lado do cliente.

2. Tempo de Aplicação: Um CSP especificado por meio de cabeçalhos HTTP é aplicado antes que a página seja carregada. Por outro lado, um CSP especificado por meio de uma tag meta é aplicado quando o HTML é analisado, portanto, os recursos podem já ter sido carregados.

Diretivas disponíveis no CSP

No CSP, várias diretivas são usadas para especificar políticas que permitem ou restringem o carregamento e a execução de certos tipos de recursos. As diretivas típicas incluem o seguinte:.

• default-src: Especifica a política padrão de origem para todos os recursos. Aplica-se a recursos não especificados por outras diretivas.
• script-src: Especifica a origem para JavaScript. Para evitar ataques XSS, você pode restringir o carregamento de scripts de sites externos.
• style-src: Especifica a origem para CSS. Restringindo o carregamento de folhas de estilo de fontes externas, você pode evitar ataques ao estilo do seu site.
• img-src: Especifica a origem para imagens. Você pode restringir o carregamento de imagens de fontes externas.
• connect-src: Especifica os URLs permitidos para XMLHttpRequests e conexões WebSocket. Isso garante a segurança das comunicações com APIs externas e WebSockets.

Combinando estas diretrizes, você pode criar políticas detalhadas para os recursos em sua página web.

Configurações práticas de CSP para melhorar a segurança

Abaixo está um exemplo de configurações de CSP para melhorar a segurança do seu site. Isso pode reduzir o risco de ataques XSS e vazamento de dados.

1<meta http-equiv="Content-Security-Policy"
2    content="default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none'; style-src 'self'; base-uri 'self'; form-action 'self';">

As seguintes políticas são aplicadas com esta configuração:

• default-src 'self': Todos os recursos são carregados apenas da mesma origem.
• script-src 'self' https://trusted-cdn.com: Scripts são carregados apenas da mesma origem ou de uma CDN confiável.
• object-src 'none': A tag object não é usada. Isso é para prevenir ataques baseados em Flash ou plugins.
• style-src 'self': As folhas de estilo são carregadas apenas da própria origem.
• base-uri 'self': A URL base definida pela tag <base> é limitada à própria origem.
• form-action 'self': O destino do envio do formulário é limitado à própria origem. Isso reduz o risco de os dados do formulário serem enviados para sites externos.

Conclusão

Ao usar http-equiv="content-security-policy" para definir CSP dentro do HTML, é possível aumentar a segurança da página da web. Um CSP configurado corretamente é uma ferramenta poderosa que reduz o risco de ataques XSS e vazamentos de dados, protegendo seu site.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video