Articles
Introduction to HTML
Tags Related to Meta Information

Tags Related to Meta Information

This article explains tags related to meta-information.

It explains the <meta> tag, including points related to SEO, responsive design, and Content-Security-Policy.

YouTube Video

Tags Related to Meta Information

<meta> tag 

1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • The <meta> tag provides metadata for the HTML document. The metadata is not displayed on the page but is used by search engines and browsers. The <meta> tag is used for page descriptions, keywords, author information, and responsive design settings.

<meta name="viewport"> tag 

1<meta name="viewport" content="width=device-width, initial-scale=1">
  • The <meta name="viewport"> tag controls the layout and scaling of web pages on different devices. It is commonly used in responsive design to ensure proper display on mobile devices.

<meta name="description"> tag 

1<meta name="description" content="An example webpage">
  • The <meta name="description"> tag is used to briefly describe the content of a web page. Search engines use this description to display a summary of the page in search results.

<meta name="keywords"> tag 

1<meta name="keywords" content="HTML, CSS, JavaScript">
  • The <meta name="keywords"> tag provides a list of keywords relevant to the page content. Search engines use these keywords to better understand the page content.

<meta name="author"> tag 

1<meta name="author" content="John Doe">
  • The <meta name="author"> tag specifies the author of the web page. This information is mainly used by search engines and tools to accurately identify the page's author.

<meta http-equiv="refresh"> tag 

1<meta http-equiv="refresh" content="5; url=https://example.com">
  • The <meta http-equiv="refresh"> tag is used to automatically refresh the page or redirect to another URL after a specified time. It is useful for reloading the page or redirecting the user.

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

1<meta http-equiv="cache-control" content="no-cache">
  • The <meta http-equiv="cache-control"> tag is used to control the caching behavior of the web page. It can specify whether to cache the page or revalidate it upon subsequent access.

<meta http-equiv="expires"> tag 

1<meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT">
  • The <meta http-equiv="expires"> tag sets an expiration date for the page content. Once the specified date has passed, the content becomes outdated, and the browser is prompted to retrieve a new version.

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

1<meta http-equiv="X-UA-Compatible" content="IE=edge">
  • The <meta http-equiv="X-UA-Compatible"> tag is used to specify compatibility mode for Internet Explorer. This tag ensures that the browser uses the appropriate version of the rendering engine to display the page.

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

The http-equiv="content-security-policy" attribute in an HTML meta tag is a function to apply specific security rules in the browser to enhance web page security. By using this attribute, website developers can set policies regarding resource loading and script execution to prevent attacks such as XSS (Cross-Site Scripting) and data injection.

What is Content-Security-Policy?

Content-Security-Policy (CSP) is a type of HTTP header used to control what external resources (images, scripts, stylesheets, etc.) a web page can load and what kinds of code can be executed. It is usually sent as an HTTP header but can also be defined within HTML using a meta tag. This method allows specifying CSP on the client side instead of setting headers on the server side.

For example, you can set CSP in the HTML meta tag as follows:.

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

In this example, the following policies are set:

  • default-src 'self': Basically, all resources are only loaded from the same origin (itself).
  • img-src https://example.com: Images are only loaded from https://example.com.
  • script-src 'self' https://apis.google.com: Scripts can only be executed from the same origin or from https://apis.google.com.

Differences between http-equiv and HTTP headers

Typically, Content-Security-Policy is sent from the server to the client as an HTTP header. However, if you set it on the client side using the meta tag, it can be written directly in the HTML.

However, there are some important differences between setting it as an HTTP header and specifying it with a meta tag:

  1. Priority: A CSP sent via HTTP headers takes precedence over one specified in a meta tag. This means that if a CSP is set on the server side, it will not be overridden by a meta tag used on the client side.

  2. Application Timing: A CSP specified via HTTP headers is applied before the page is loaded. On the other hand, a CSP specified via a meta tag is applied when the HTML is parsed, so resources might already be loaded.

Directives available in CSP

In CSP, various directives are used to specify policies that allow or disallow loading and execution of certain types of resources. Typical directives include the following:.

  • default-src: Specifies the default source policy for all resources. It applies to resources not specified by other directives.
  • script-src: Specifies the source for JavaScript. To prevent XSS attacks, you can restrict the loading of scripts from external sites.
  • style-src: Specifies the source for CSS. By restricting the loading of stylesheets from external sources, you can prevent attacks on your site's styles.
  • img-src: Specifies the source for images. You can restrict the loading of images from external sources.
  • connect-src: Specifies the URLs allowed for XMLHttpRequests and WebSocket connections. This ensures the security of external API and WebSocket communications.

By combining these directives, you can build detailed policies for resources on your web page.

Practical CSP settings for enhancing security

Below is an example of CSP settings to enhance your website’s security. This can reduce the risk of XSS attacks and data leaks.

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';">

The following policies are applied with this configuration:

  • default-src 'self': All resources are loaded only from the same origin.
  • script-src 'self' https://trusted-cdn.com: Scripts are loaded only from the same origin or a trusted CDN.
  • object-src 'none': The object tag is not used. This is to prevent Flash or plugin-based attacks.
  • style-src 'self': Stylesheets are only loaded from the origin itself.
  • base-uri 'self': The URL base set by the <base> tag is limited to the origin itself.
  • form-action 'self': The form submission destination is limited to the origin itself. This reduces the risk of form data being sent to external sites.

Conclusion

By using http-equiv="content-security-policy" to define CSP within HTML, it is possible to enhance the security of the webpage. A properly configured CSP is a powerful tool that reduces the risk of XSS attacks and data leaks and protects your website.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

Tags used in the head sectionRecent Trends in HTML