Security Headers (CSP)
Relevant source files
The following files were used as context for generating this wiki page:
The QR-Tool application is a purely client-side tool where all processing occurs in the user's browser. To enhance security and protect users from common web vulnerabilities like Cross-Site Scripting (XSS) and data injection, the project implements a set of strict HTTP security headers, including a Content Security Policy (CSP). These headers are defined in the public/_headers file, which is intended to be used by hosting platforms like Netlify or Vercel to serve the application with appropriate security controls.
This configuration is a key part of the application's overall security posture, which also includes comprehensive input validation and leveraging React's built-in XSS protection. The security audit report confirms that these measures are in place and effective.
Sources: README.md:25, 83-89, SECURITY_AUDIT_REPORT.md:80-92, SECURITY.md
Header Configuration
The security headers are defined in the public/_headers file. When deployed on a compatible static hosting provider, these rules are applied to all responses, instructing the browser on how to handle the application's content securely.
Sources: README.md:57, SECURITY_AUDIT_REPORT.md:80-82, 91-92
_headers File Content
The following configuration is specified in the public/_headers file:
Content-Security-Policy: default-src 'self'; img-src 'self' blob: data:; style-src 'self' 'unsafe-inline'; script-src 'self'; connect-src 'self'
Referrer-Policy: strict-origin-when-cross-origin
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Permissions-Policy: camera=(), microphone=(), geolocation=(), payment=()
X-XSS-Protection: 1; mode=block
Sources: SECURITY_AUDIT_REPORT.md:83-89
This diagram illustrates how the headers are applied when a user accesses the application.
This flowchart shows the process of a hosting platform reading the _headers file and applying the security policies to the HTTP response before it reaches the user's browser.
Header Breakdown
The following table summarizes each configured security header and its purpose within the QR-Tool application.
| Header | Value | Description |
|---|---|---|
Content-Security-Policy | default-src 'self'; img-src 'self' blob: data:; style-src 'self' 'unsafe-inline'; script-src 'self'; connect-src 'self' | Restricts sources for content, scripts, styles, and images to prevent XSS. |
Referrer-Policy | strict-origin-when-cross-origin | Limits the amount of referrer information sent to other origins, enhancing user privacy. |
X-Content-Type-Options | nosniff | Prevents the browser from MIME-sniffing a response away from the declared content-type. |
X-Frame-Options | DENY | Prevents the page from being rendered in an <frame>, <iframe>, <embed>, or <object>, mitigating clickjacking attacks. |
Permissions-Policy | camera=(), microphone=(), geolocation=(), payment=() | Disables APIs for camera, microphone, geolocation, and payments, as they are not used by the application. |
X-XSS-Protection | 1; mode=block | Enables the browser's built-in XSS filter and instructs it to block the page from rendering if an attack is detected. |
Sources: SECURITY_AUDIT_REPORT.md:83-89
Content Security Policy (CSP) In-Depth
The Content-Security-Policy is the most critical header for preventing XSS. It defines a whitelist of trusted sources from which assets can be loaded.
Sources: SECURITY_AUDIT_REPORT.md:80-90
CSP Directives
The policy is composed of several directives that control specific resource types.
This diagram breaks down the configured Content Security Policy into its individual directives.
The table below explains the rationale for each directive's value based on the application's functionality.
| Directive | Allowed Sources | Rationale |
|---|---|---|
default-src | 'self' | Establishes a baseline policy that all resources should be loaded from the same origin as the application itself. |
img-src | 'self' blob: data: | Allows images from the same origin ('self'), from blob: URLs (used for the user-uploaded logo), and from data: URLs (used for exporting the QR code canvas to PNG/JPG). |
style-src | 'self' 'unsafe-inline' | Allows stylesheets from the same origin and permits the use of inline styles. The security audit notes that 'unsafe-inline' is necessary for the qrcode.react library to function correctly but is considered an acceptable risk due to React's built-in XSS protection. |
script-src | 'self' | Restricts all executable scripts to be loaded only from the same origin, preventing the execution of malicious third-party scripts. |
connect-src | 'self' | Restricts network requests (like fetch or XHR) to the same origin. As the application is fully client-side and makes no external API calls, this is a strict and secure default. |
Sources: SECURITY_AUDIT_REPORT.md:84, 90, 107-114, src/App.jsx:546-577, src/components/ExportPanel.jsx:39-42
Security Context and Rationale
The security headers are part of a multi-layered defense strategy.
- Client-Side Focus: Since the application is entirely client-side, protecting the user's browser environment is paramount. The CSP and other headers are the primary server-side mechanism to enforce this protection.
Sources: README.md:144 - Mitigating XSS: While React provides automatic escaping for HTML content, the
script-src 'self'directive provides a crucial second layer of defense, ensuring that even if an injection vulnerability were found, it could not be used to load and execute a malicious script from an external domain.
Sources: SECURITY_AUDIT_REPORT.md:58-63 - Controlled Image Loading: The
img-srcdirective is specifically tailored to the application's needs. It allowsblob:URLs, which are essential for the logo upload feature where a local file is displayed without being sent to a server. It also allowsdata:URLs, which are necessary for the canvas-to-image export functionality.
Sources: src/App.jsx:569-577, src/components/ExportPanel.jsx:39-42 - Disabling Unused Features: The
Permissions-Policyproactively disables browser features that are not required by the QR-Tool, adhering to the principle of least privilege.
Sources: SECURITY_AUDIT_REPORT.md:88
Summary
The QR-Tool project implements a robust set of security headers, with a well-defined Content Security Policy at its core. This configuration is defined in the public/_headers file and is designed to be automatically applied by modern static hosting platforms. The policy is tailored to the application's specific needs, allowing necessary functionalities like logo uploads (blob:) and image exports (data:) while restricting all other scripts and resources to the same origin. This significantly hardens the application against XSS and other client-side attacks, forming a critical component of its overall security architecture.
Sources: README.md:87, SECURITY_AUDIT_REPORT.md:80-92