diff --git a/files/en-us/web/http/headers/content-security-policy/default-src/index.md b/files/en-us/web/http/headers/content-security-policy/default-src/index.md index f8b287a23276838..50ce0c280963cee 100644 --- a/files/en-us/web/http/headers/content-security-policy/default-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/default-src/index.md @@ -81,7 +81,10 @@ Content-Security-Policy: connect-src 'self'; ### Firefox `default-src: none` SVG sprite blocking issue -CSP guidelines often recommend starting with `default-src 'none'` to lock down all resource loading and then adding further directives to open up the policy, allowing you to load just the resources you need. For example, to allow same-origin loading of images only: +> [!NOTE] +> This issue was fixed in Firefox 132; see [bug 1773976](https://bugzil.la/1773976). + +When creating a CSP, you can start with `default-src 'none'` to lock down all resource loading and then add further directives to open up the policy, allowing you to load just the resources you need. For example, to allow same-origin loading of images only: ```http Content-Security-Policy: default-src 'none'; img-src 'self' @@ -95,7 +98,7 @@ However, there is a problem here. If you are embedding SVG sprites defined in ex ``` -your SVG images will be blocked in Firefox if you have a `default-src 'none'` policy set. Firefox does not treat the SVG as an embedded image like other browsers do, therefore `img-src 'self'` will not allow them to be loaded. You need to use `default-src 'self'` if you want your external sprites to load in Firefox (see [bug 1773976](https://bugzil.la/1773976) and [this CSP spec issue](https://github.com/w3c/webappsec-csp/issues/199) for more information). +your SVG images will be blocked in Firefox if you have a `default-src 'none'` policy set. Firefox does not treat the SVG as an embedded image like other browsers do, therefore `img-src 'self'` will not allow them to be loaded. You need to use `default-src 'self'` if you want your external sprites to load in Firefox. Alternatively, if the `default-src 'none'` policy is a hard requirement, you can include the SVG sprites inline in the HTML page: diff --git a/files/en-us/web/security/practical_implementation_guides/csp/index.md b/files/en-us/web/security/practical_implementation_guides/csp/index.md index e35a58183a63f9c..da65d54bf94157f 100644 --- a/files/en-us/web/security/practical_implementation_guides/csp/index.md +++ b/files/en-us/web/security/practical_implementation_guides/csp/index.md @@ -6,134 +6,72 @@ page-type: guide {{QuickLinksWithSubpages("/en-US/docs/Web/Security")}} -The [`Content-Security-Policy`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) HTTP header provides fine-grained control over the locations from which resources on a site can be loaded. +The [`Content-Security-Policy`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) HTTP header provides fine-grained control over the code that can be loaded on a site, and what it is allowed to do. ## Problem -The main problem this article focuses on is Cross-site scripting ({{Glossary("Cross-site_scripting", "XSS")}}) attacks. These are generally due to a lack of control and awareness of the sources from which site resources are loaded. This problem gets more difficult to manage as sites become larger and more complex and increasingly rely on third-party resources such as JavaScript libraries. +The main problem this article focuses on is cross-site scripting ({{Glossary("Cross-site_scripting", "XSS")}}) attacks. These are generally due to a lack of control and awareness of the sources from which site resources are loaded. This problem gets more difficult to manage as sites become larger and more complex and increasingly rely on third-party resources such as JavaScript libraries. + +> [!NOTE] +> CSP is one part of a complete strategy for protecting against XSS attacks. There are other factors involved, such as [output encoding](/en-US/docs/Web/Security/Attacks/XSS#output_encoding) and [sanitization](/en-US/docs/Web/Security/Attacks/XSS#sanitization), which are also important. CSP can also help to fix other problems, which are covered in other articles: - [Preventing clickjacking](/en-US/docs/Web/Security/Practical_implementation_guides/Clickjacking) by stopping your site being embedded into {{htmlelement("iframe")}} elements. This is done using the CSP [`frame-ancestors`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) directive. -- Preventing [manipulator-in-the-middle](/en-US/docs/Glossary/MitM) (MiTM) attacks by upgrading any HTTP connections to HTTPS. This is helped by the CSP [`upgrade-insecure-requests`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) directive. See [HSTS implementation](/en-US/docs/Web/Security/Practical_implementation_guides/TLS#http_strict_transport_security_implementation) for more details. +- Preventing [manipulator-in-the-middle](/en-US/docs/Glossary/MitM) (MiTM) attacks by upgrading any HTTP connections to HTTPS. This is helped by the CSP [`upgrade-insecure-requests`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) directive. See [Upgrading insecure requests](/en-US/docs/Web/HTTP/CSP#upgrading_insecure_requests). ## Solution -Implementing a robust CSP is the best way to prevent XSS vulnerabilities. - -The primary benefit of CSP comes from disabling the use of unsafe inline JavaScript. Inline JavaScript, whether reflected or stored, enables improperly-escaped user inputs to generate code that is interpreted by the web browser as JavaScript. By using CSP to disable inline JavaScript, you can eliminate almost all XSS attacks against your site. - -Disabling inline JavaScript means that _all_ JavaScript must be loaded from external files via {{htmlelement("script")}} elements with `src` attributes. Inline [event handler attributes](/en-US/docs/Web/HTML/Attributes#event_handler_attributes), such as `onclick`, and JavaScript inserted directly inside ` -``` +If you are unable to get a strict CSP to work, an allowlist-based CSP is much better than none, and a CSP like `default-src https:` still provides some protection, disabling unsafe inline/`eval()` and only allowing loading of resources (images, fonts, scripts, etc.) over HTTPS. -```http -Content-Security-Policy: script-src 'strict-dynamic' 'nonce-2726c7f26c' -``` +> [!WARNING] +> If at all possible, avoid including unsafe sources inside your CSP. Examples include: +> +> - `unsafe-inline`. +> - `data:` URIs inside `script-src`, `object-src`, or `default-src`. +> - overly broad sources or form submission targets. +> +> Similarly, the use of `script-src 'self'` can be unsafe for sites with JSONP endpoints. These sites should use a `script-src` that includes the path to their JavaScript source folder(s). -Don't implement the policy yet; only report the violations that would have occurred: +If you are unable to use the `Content-Security-Policy` header, pages can instead include a [``](/en-US/docs/Web/HTML/Element/meta#http-equiv) element. This should be the first {{htmlelement("meta")}} element that appears inside the document {{htmlelement("head")}}. -```http-nolint -Reporting-Endpoints: csp-endpoint="https://example.com/csp-reports" +### Report-only CSPs -Content-Security-Policy-Report-Only: default-src https:; - report-uri /csp-violation-report-endpoint/; - report-to csp-endpoint; -``` +Before implementing any actual CSP with the `Content-Security-Policy` header, you are advised to first test it out using the [`Content-Security-Policy-Report-Only`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only) HTTP header. This allows you to see if any violations would have occurred with that policy. -Disable resource loading and embedding. APIs should use a policy like this: +Sites should use the [`report-to`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/report-to) and [`report-uri`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/report-uri) [reporting directives](/en-US/docs/Glossary/Reporting_directive). These cause the browser to [`POST`](/en-US/docs/Web/HTTP/Methods/POST) JSON reports about CSP violations to endpoints (specified in the {{httpheader("Reporting-Endpoints")}} header in the case of `report-to`). This allows CSP violations to be caught and repaired quickly. -```http -Content-Security-Policy: default-src 'none'; frame-ancestors 'none' -``` +> [!NOTE] +> The `report-to` directive is preferred over the deprecated `report-uri` directive. However, both are still needed because `report-to` does not yet have full cross-browser support. ## See also - [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP) +- [Cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) - [CSP evaluator](https://csp-evaluator.withgoogle.com/) diff --git a/files/en-us/web/security/practical_implementation_guides/index.md b/files/en-us/web/security/practical_implementation_guides/index.md index 7d9f33e11cbff7d..bdcbe084aa38d8b 100644 --- a/files/en-us/web/security/practical_implementation_guides/index.md +++ b/files/en-us/web/security/practical_implementation_guides/index.md @@ -8,30 +8,32 @@ page-type: guide Users frequently input sensitive data on websites, such as names, addresses, passwords, and banking details. As a web developer, it's crucial to protect this information from bad actors who use a wide range of exploits to steal such information and use it for personal gain. The focus of [web security](/en-US/docs/Web/Security) is to help you protect your website against these exploits and secure your users' sensitive data. -This page lists guides that detail the best practices for implementing security features on websites. While these guides do not cover all possible security scenarios and cannot guarantee complete security of your website, following the information and best practices in these guides will make your sites significantly more secure. +This page lists guides that summarize some best practices for implementing security features on websites. While these guides do not cover all possible security scenarios and cannot guarantee complete security of your website, following the information and best practices in these guides will make your sites significantly more secure. -## Content security fundamentals +## HTTP security fundamentals -Most of these guides are directly related to the [HTTP Observatory](/en-US/observatory) tool. Observatory performs security audits on a website and provides a grade and score along with recommendations for fixing the security issues it finds. These guides explain how to resolve issues surfaced by the HTTP Observatory tests: the tool links to the relevant guide for each issue, helping guide you towards an effective resolution. Interestingly, Mozilla's internal developer teams use this guidance when implementing websites to ensure that security best practices are applied. +The guides in this section summarize best practices for implementing HTTP headers correctly to mitigate security issues, and are directly related to the [HTTP Observatory](/en-US/observatory) tool. + +Observatory performs security audits on a website and provides a grade and score along with recommendations for fixing the security issues it finds. These guides explain how to resolve issues surfaced by the HTTP Observatory tests: the tool links to the relevant guide for each issue, helping guide you towards an effective resolution. Interestingly, Mozilla's internal developer teams use this guidance when implementing websites to ensure that security best practices are applied. The guides in the table below are listed in the order that we recommend implementing the security features they describe. This order is based on a combination of each feature's security impact and the ease of its implementation from both operational and developmental perspectives. The table provides information about each feature's impact, difficulty of implementation, whether or not it is required, and a brief description. -| Guide | Impact | Difficulty | Required | Description | -| -------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [TLS configuration](/en-US/docs/Web/Security/Practical_implementation_guides/TLS#tls_configuration) | Medium | Medium | Yes | Use the most secure [Transport Layer Security](/en-US/docs/Glossary/TLS) (TLS) configuration available for your user base. | -| TLS: [Resource loading](/en-US/docs/Web/Security/Practical_implementation_guides/TLS#resource_loading) | Maximum | Low | Yes | Load both passive and active resources via HTTPS. | -| TLS: [HTTP redirection](/en-US/docs/Web/Security/Practical_implementation_guides/TLS#http_redirection) | Maximum | Low | Yes | Websites must redirect to HTTPS; API endpoints should disable HTTP entirely. | -| TLS: [HSTS implementation](/en-US/docs/Web/Security/Practical_implementation_guides/TLS#http_strict_transport_security_implementation) | High | Low | Yes | Notify user agents to connect to sites only over HTTPS, even if the original scheme chosen was HTTP, by using HTTP Strict transport security (HSTS). | -| [Clickjacking prevention](/en-US/docs/Web/Security/Practical_implementation_guides/Clickjacking) | High | Low | Yes | Control how your site may be framed within an {{htmlelement("iframe")}} to prevent [clickjacking](/en-US/docs/Web/Security/Attacks/Clickjacking). | -| [CSRF prevention](/en-US/docs/Web/Security/Practical_implementation_guides/CSRF_prevention) | High | Unknown | Varies | Protect against [Cross-site request forgery](/en-US/docs/Glossary/CSRF) (CSRF) using `SameSite` cookies and anti-CSRF tokens. | -| [Secure cookie configuration](/en-US/docs/Web/Security/Practical_implementation_guides/Cookies) | High | Medium | Yes | Set all cookies as restrictively as possible. | -| [CORP implementation](/en-US/docs/Web/Security/Practical_implementation_guides/CORP) | High | Medium | Yes | Protect against speculative side-channel attacks by using Cross-Origin Resource Policy (CORP). | -| [MIME type verification](/en-US/docs/Web/Security/Practical_implementation_guides/MIME_types) | Low | Low | No | Verify that all your websites are setting the proper [MIME types](/en-US/docs/Glossary/MIME_type) for all resources. | -| [CSP implementation](/en-US/docs/Web/Security/Practical_implementation_guides/CSP) | High | High | Yes | Provide fine-grained control over where site resources can be loaded from with [Content Security Policy](/en-US/docs/Glossary/CSP) (CSP). | -| [CORS configuration](/en-US/docs/Web/Security/Practical_implementation_guides/CORS) | High | Low | Yes | Define the non-same origins that are allowed to access the content of pages and have resources loaded from them by using [Cross-Origin Resource Sharing](/en-US/docs/Glossary/CORS) (CORS). | -| [Referrer policy configuration](/en-US/docs/Web/Security/Practical_implementation_guides/Referrer_policy) | Low | Low | Yes | Improve privacy for users and prevent leaking of internal URLs via the {{httpheader("Referer")}} header. | -| [robots.txt configuration](/en-US/docs/Web/Security/Practical_implementation_guides/Robots_txt) | Low | Low | No | Tell robots (such as search engine indexers) how to behave by instructing them not to crawl certain paths on the website. | -| [SRI implementation](/en-US/docs/Web/Security/Practical_implementation_guides/SRI) | Low | Low | No | Verify that fetched resources (for example, from a CDN) are delivered without unexpected manipulation by using [Subresource Integrity](/en-US/docs/Glossary/SRI) (SRI). | +| Guide | Impact | Difficulty | Required | Description | +| -------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [TLS configuration](/en-US/docs/Web/Security/Practical_implementation_guides/TLS#tls_configuration) | Medium | Medium | Yes | Use the most secure [Transport Layer Security](/en-US/docs/Glossary/TLS) (TLS) configuration available for your user base. | +| TLS: [Resource loading](/en-US/docs/Web/Security/Practical_implementation_guides/TLS#resource_loading) | Maximum | Low | Yes | Load both passive and active resources via HTTPS. | +| TLS: [HTTP redirection](/en-US/docs/Web/Security/Practical_implementation_guides/TLS#http_redirection) | Maximum | Low | Yes | Websites must redirect to HTTPS; API endpoints should disable HTTP entirely. | +| TLS: [HSTS implementation](/en-US/docs/Web/Security/Practical_implementation_guides/TLS#http_strict_transport_security_implementation) | High | Low | Yes | Notify user agents to connect to sites only over HTTPS, even if the original scheme chosen was HTTP, by using HTTP Strict transport security (HSTS). | +| [Clickjacking prevention](/en-US/docs/Web/Security/Practical_implementation_guides/Clickjacking) | High | Low | Yes | Control how your site may be framed within an {{htmlelement("iframe")}} to prevent [clickjacking](/en-US/docs/Web/Security/Attacks/Clickjacking). | +| [CSRF prevention](/en-US/docs/Web/Security/Practical_implementation_guides/CSRF_prevention) | High | Unknown | Varies | Protect against [Cross-site request forgery](/en-US/docs/Glossary/CSRF) (CSRF) using `SameSite` cookies and anti-CSRF tokens. | +| [Secure cookie configuration](/en-US/docs/Web/Security/Practical_implementation_guides/Cookies) | High | Medium | Yes | Set all cookies as restrictively as possible. | +| [CORP implementation](/en-US/docs/Web/Security/Practical_implementation_guides/CORP) | High | Medium | Yes | Protect against speculative side-channel attacks by using Cross-Origin Resource Policy (CORP). | +| [MIME type verification](/en-US/docs/Web/Security/Practical_implementation_guides/MIME_types) | Low | Low | No | Verify that all your websites are setting the proper [MIME types](/en-US/docs/Glossary/MIME_type) for all resources. | +| [CSP implementation](/en-US/docs/Web/Security/Practical_implementation_guides/CSP) | High | High | Yes | Provide fine-grained control over the code that can be loaded on a site and what it is allowed to do with a [Content Security Policy](/en-US/docs/Glossary/CSP) (CSP), thereby mitigating Cross-site scripting ({{Glossary("Cross-site_scripting", "XSS")}}) vulnerabilities. | +| [CORS configuration](/en-US/docs/Web/Security/Practical_implementation_guides/CORS) | High | Low | Yes | Define the non-same origins that are allowed to access the content of pages and have resources loaded from them by using [Cross-Origin Resource Sharing](/en-US/docs/Glossary/CORS) (CORS). | +| [Referrer policy configuration](/en-US/docs/Web/Security/Practical_implementation_guides/Referrer_policy) | Low | Low | Yes | Improve privacy for users and prevent leaking of internal URLs via the {{httpheader("Referer")}} header. | +| [robots.txt configuration](/en-US/docs/Web/Security/Practical_implementation_guides/Robots_txt) | Low | Low | No | Tell robots (such as search engine indexers) how to behave by instructing them not to crawl certain paths on the website. | +| [SRI implementation](/en-US/docs/Web/Security/Practical_implementation_guides/SRI) | Low | Low | No | Verify that fetched resources (for example, from a CDN) are delivered without unexpected manipulation by using [Subresource Integrity](/en-US/docs/Glossary/SRI) (SRI). | ## User information security