Fetch Directive

A Fetch directive is a directive that can be used to control how a browser fetches resources from a website. This directive is part of the Content Security Policy (CSP) specification, which is a security feature that helps prevent cross-site scripting (XSS) attacks by limiting the types of resources that can be loaded by a web page. The Fetch directive is used to specify the types of resources that can be loaded by the browser, such as images, scripts, and stylesheets.

Purpose

The purpose of the Fetch directive is to provide website owners with a way to restrict the types of resources that can be loaded by a web page. This can help prevent malicious scripts and other types of content from being loaded by the browser, thereby reducing the risk of XSS attacks. By using the Fetch directive, website owners can specify which domains are allowed to load resources on their site, as well as the types of resources that can be loaded.

Usage

The Fetch directive is specified as part of the Content Security Policy (CSP) header that is sent by the server to the browser. The CSP header tells the browser which types of resources are allowed to be loaded by the web page. The Fetch directive is used to specify which domains are allowed to load resources on the web page, as well as the types of resources that can be loaded. Here is an example of how the Fetch directive can be used:

Content-Security-Policy: fetch-src 'self' https://example.com;

In this example, the fetch-src directive is used to specify the types of resources that can be loaded by the browser. The self keyword specifies that resources can only be loaded from the same domain as the web page. The https://example.com domain is also allowed to load resources on the web page. This means that any resources that are loaded from other domains will be blocked by the browser.

Directives

There are several directives that can be used with the Fetch directive to specify which types of resources are allowed to be loaded by the browser. These directives include:

self

The self directive specifies that resources can only be loaded from the same domain as the web page. This is the most restrictive setting, and it can help prevent XSS attacks by limiting the types of resources that can be loaded by the browser.

unsafe-inline

The unsafe-inline directive allows inline scripts and styles to be executed on the web page. This directive should be used with caution, as it can increase the risk of XSS attacks.

unsafe-eval

The unsafe-eval directive allows scripts to be executed using the eval() function. This directive is also considered unsafe, as it can increase the risk of XSS attacks.

data

The data directive allows data URIs to be loaded on the web page. Data URIs are URLs that contain encoded data, such as images or scripts. This directive should be used with caution, as it can increase the risk of XSS attacks.

https

The https directive specifies that resources can only be loaded over HTTPS. This can help ensure that sensitive information, such as passwords or credit card numbers, is transmitted securely over the internet.

http

The http directive specifies that resources can only be loaded over HTTP. This directive should be used with caution, as HTTP is not a secure protocol and can be easily intercepted by attackers.

domain

The domain directive specifies which domains are allowed to load resources on the web page. This can help prevent malicious scripts and other types of content from being loaded by the browser.

none

The none directive specifies that no resources are allowed to be loaded on the web page. This is the most restrictive setting, and it can block all types of resources, including images, scripts, and stylesheets.

Examples

Here are some examples of how the Fetch directive can be used to restrict the types of resources that can be loaded by a web page:

Example 1: Restricting resources to the same domain

Content-Security-Policy: fetch-src 'self';

In this example, the fetch-src directive restricts resources to the same domain as the web page. This means that resources cannot be loaded from other domains, which can help prevent XSS attacks.

Example 2: Allowing resources from specific domains

Content-Security-Policy: fetch-src 'self' https://example.com;

In this example, the fetch-src directive allows resources to be loaded from the same domain as the web page, as well as from the https://example.com domain. This means that resources from other domains will be blocked by the browser.

Example 3: Allowing only HTTPS resources

Content-Security-Policy: fetch-src 'self' https:;

In this example, the fetch-src directive only allows resources to be loaded over HTTPS. This can help ensure that sensitive information is transmitted securely over the internet.

Example 4: Blocking all resources

Content-Security-Policy: fetch-src 'none';

In this example, the fetch-src directive blocks all types of resources, including images, scripts, and stylesheets. This is the most restrictive setting, and it can help prevent XSS attacks.