<zhead>

Meta Tags

Content-Security-Policy

Learn how to use the Content-Security-Policy meta tag to improve your site.

Defines which dynamic resources are allowed to load, thus helping to prevent cross-site scripting attacks, data injection, and other malicious attempts to exploit web page vulnerabilities.

Parameters

default-src
Sets the default policy for fetching resources such as JavaScript, images, CSS, fonts, AJAX requests, frames, HTML5 media.
<meta http-equiv="Content-Security-Policy" content="default-src" />
script-src
Specifies valid sources for JavaScript.
<meta http-equiv="Content-Security-Policy" content="script-src" />
style-src
Allows control over stylesheets and style elements.
<meta http-equiv="Content-Security-Policy" content="style-src" />
img-src
Defines valid sources of images.
<meta http-equiv="Content-Security-Policy" content="img-src" />
connect-src
Limits the origins to which you can connect (via XHR, WebSockets, and EventSource).
<meta http-equiv="Content-Security-Policy" content="connect-src" />
font-src
Specifies valid sources for fonts loaded using @font-face.
<meta http-equiv="Content-Security-Policy" content="font-src" />
object-src
Allows control over Flash and other plugins.
<meta http-equiv="Content-Security-Policy" content="object-src" />
media-src
Specifies valid sources of audio and video, using the <audio> and <video> elements.
<meta http-equiv="Content-Security-Policy" content="media-src" />
frame-src
Specifies valid sources for nested browsing contexts loading using elements such as <frame> and <iframe>.
<meta http-equiv="Content-Security-Policy" content="frame-src" />
export type Content-Security-Policy =
     /**
   * Sets the default policy for fetching resources such as JavaScript, images, CSS, fonts, AJAX requests, frames, HTML5 media.
  **/
    'default-src'
    /**
   * Specifies valid sources for JavaScript.
  **/
    'script-src'
    /**
   * Allows control over stylesheets and style elements.
  **/
    'style-src'
    /**
   * Defines valid sources of images.
  **/
    'img-src'
    /**
   * Limits the origins to which you can connect (via XHR, WebSockets, and EventSource).
  **/
    'connect-src'
    /**
   * Specifies valid sources for fonts loaded using @font-face.
  **/
    'font-src'
    /**
   * Allows control over Flash and other plugins.
  **/
    'object-src'
    /**
   * Specifies valid sources of audio and video, using the <audio> and <video> elements.
  **/
    'media-src'
    /**
   * Specifies valid sources for nested browsing contexts loading using elements such as <frame> and <iframe>.
  **/
    'frame-src'

Code Examples

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://apis.google.com;" />
Allows scripts, styles, and images to load from the site's own origin and scripts from Google APIs, tightening security by restricting external resources.
<meta http-equiv="Content-Security-Policy" content="script-src 'nonce-2726c7f26c'" />
Permits the execution of inline script and style elements that match the specified nonce value, securing against unauthorized script execution.
<meta http-equiv="Content-Security-Policy" content="default-src *;" />
Allows loading of resources from any source, significantly weakening the security posture and exposing the site to potential attacks.
<meta http-equiv="Content-Security-Policy" content="script-src 'unsafe-inline';" />
Enables the execution of all inline scripts, posing a high risk of XSS attacks by allowing execution of malicious scripts injected into the page.

Recommendations

  • 01
    Test Policy Before Full Implementation
    To avoid breaking content, use the Content-Security-Policy-Report-Only mode to monitor potential issues before enforcing a strict policy.
  • 02
    Use Nonce or Hash for Inline Scripts
    To safely allow inline scripts, utilize the nonce or hash attributes to whitelist specific scripts, reducing the risk of injection attacks.
  • 03
    Avoid Using 'unsafe-inline' and 'unsafe-eval'
    These settings significantly lower the protection level of your CSP, exposing the site to potential XSS attacks. Use more specific source whitelisting instead.

Related Documentation

Related Meta Tags

default-style

http-equiv

Specifies the name of the preferred stylesheet to use on a web page. This allows users or user agents to choose the default stylesheet amongst many provided.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="default-style" content="Main Style">
</html>
Correct use case where "Main Style" is precisely the title of one of the page’s alternative stylesheets.

refresh

http-equiv

Used to redirect the user to a new URL after a certain number of seconds, or to refresh the current page. While it can be useful for redirecting users or refreshing content, its usage is generally discouraged in favor of server-side redirects or JavaScript for a better user experience and performance.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="refresh" content="5;url=http://example.com">
</html>
Redirects the user to "http://example.com" after 5 seconds, giving a brief moment to read any important information before the redirect.

X-UA-Compatible

http-equiv

Advises the web browser to display the webpage in compatibility view or a specific version of Internet Explorer. Primarily used to instruct Internet Explorer to use its Edge rendering engine.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
</html>
Instructs Internet Explorer to use the latest available rendering engine, ensuring more modern, standards-compliant HTML & CSS features are used.

content-type

http-equiv

Defines the MIME type and character encoding for the HTML document. It sets the character set used for the HTML document, which is crucial for correctly displaying text.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</html>
This example specifies the HTML document type with UTF-8 character encoding, ensuring correct text display and maximum compatibility.

Content-Security-Policy

http-equiv

Defines which dynamic resources are allowed to load, thus helping to prevent cross-site scripting attacks, data injection, and other malicious attempts to exploit web page vulnerabilities.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://apis.google.com;">
</html>
Allows scripts, styles, and images to load from the site's own origin and scripts from Google APIs, tightening security by restricting external resources.