ToolGrid — Product & Engineering
Leads product strategy, technical architecture, and implementation of the core platform that powers ToolGrid calculators.
Loading...
Preparing your workspace
Generate Content Security Policy (CSP) headers to protect websites from XSS attacks, clickjacking, and data injection. Create, customize, and validate CSP directives with visual builder and policy testing.
Note: AI can make mistakes, so please double-check it.
Find domains from code snippets or logs
No resources discovered yet.
Fine-tune your security layers
Your policy is active. It will strictly block any resource not explicitly listed above. Use with caution in production.
Deployment Config Pack (Paid)
UpgradeCommon questions about this tool
CSP is a security header that helps prevent XSS attacks, clickjacking, and data injection by controlling which resources (scripts, styles, images) can be loaded on your website. It's an essential security measure for modern web applications.
Use the visual builder to select allowed sources for scripts, styles, images, fonts, and other resources. The generator creates a CSP directive string that you can add to your website's HTTP headers or meta tags.
'self' allows resources only from the same origin (same protocol, domain, and port) as your page, providing strong security. '*' allows resources from any origin, which is convenient but less secure and should be avoided in production.
After implementing CSP, check your browser's console for CSP violation reports. The generator includes a testing mode that simulates resource loading to help identify potential issues before deploying to production.
Inline scripts and styles are blocked by default in strict CSP. You can use 'unsafe-inline' (not recommended) or better alternatives like nonces or hashes to allow specific inline content while maintaining security.
Pick a security preset like strict, moderate, or lenient, then adjust individual directives in the Directive Management panel; the tool keeps a `CSPPolicy` object with your choices. The preview card assembles these into a single header line by joining each directive\u0019s name and sources, prefixed with either `Content-Security-Policy` or `Content-Security-Policy-Report-Only` depending on the Report Only toggle.
The builder starts with common directives like `default-src`, `script-src`, `style-src`, `img-src`, and `connect-src`, and lets you add others from `DIRECTIVES_LIST` such as `frame-ancestors` or `form-action`. For each one you can combine keywords like `'self'`, `'none'`, `'unsafe-inline'`, `https:`, or `data:` and custom domains discovered by the Resource Discovery scanner, which extracts hostnames from pasted HTML, logs, or uploaded files.
The generator itself doesn\u0019t run live requests, but it gives you a raw header string and a Security Health panel that marks each directive as Strong, Balanced, or Relaxed based on heuristics like the presence of `*` or `'unsafe-inline'`. You can copy the header from the preview and apply it in your server or meta tags, then iterate by tightening sources or moving from Report Only to enforcing mode once the page still loads correctly.
Yes, the Run AI Security Audit button sends the current `CSPPolicy` to the `csp-generator` backend via `geminiService.executeGemini`, which returns an `AIAuditResult` with a numeric score, a summary, and a list of vulnerabilities each with severity, message, and fix text. The AIAuditor component visualizes this as a progress bar and per-issue cards with concrete recommendations you can apply by editing directives in the builder.
The Preview panel shows the full header line and provides a Copy button that writes it to your clipboard, as well as an Export action that downloads it as a `.txt` file. You can then paste that value into an HTTP `Content-Security-Policy` header, or adapt the same directive string into a meta CSP tag in your HTML if you prefer meta-based deployment.
Verified content & sources
This tool's content and its supporting explanations have been created and reviewed by subject-matter experts. Calculations and logic are based on established research sources.
Scope: interactive tool, explanatory content, and related articles.
ToolGrid — Product & Engineering
Leads product strategy, technical architecture, and implementation of the core platform that powers ToolGrid calculators.
ToolGrid — Research & Content
Conducts research, designs calculation methodologies, and produces explanatory content to ensure accurate, practical, and trustworthy tool outputs.
Based on 1 research source:
Learn what this tool does, when to use it, and how it fits into your workflow.
This free online Content Security Policy generator (CSP generator) creates CSP headers for websites. CSP is a security feature that controls which resources a website can load. This tool works as a browser-based CSP header generator that helps you build, customize, and test CSP policies without writing code manually.
Websites face security threats like cross-site scripting attacks, clickjacking, and data injection. These attacks happen when malicious code runs on your site or when attackers trick users into clicking harmful links. CSP prevents these attacks by blocking unauthorized resources. The problem is that CSP syntax is complex. You must list every allowed source for scripts, styles, images, fonts, and more. One mistake can break your site or leave security gaps.
This tool is for website developers, security professionals, and site administrators who want an online tool to create Content Security Policy headers without memorizing every directive. Beginners can use presets to get started quickly. Technical users can fine-tune policies for their specific needs. Professionals can audit existing policies and optimize them for better security. A related operation involves checking security headers as part of a similar workflow.
Content Security Policy is a browser security feature. It tells browsers which sources are allowed to load resources on your page. Resources include JavaScript files, CSS stylesheets, images, fonts, and data connections. CSP works by blocking everything by default, then allowing only sources you explicitly permit.
CSP uses directives to control different resource types. Each directive has a name like script-src or style-src. Each directive lists allowed sources. Sources can be domains like example.com, special keywords like 'self' for same origin, or wildcards like https: for all HTTPS sites. The browser checks each resource request against these rules. If a resource comes from an unlisted source, the browser blocks it. For adjacent tasks, checking HTTP headers addresses a complementary step.
CSP can run in two modes. Enforce mode blocks violations immediately. Report-only mode logs violations but does not block them. Report-only mode is useful for testing. You can see what would be blocked without breaking your site. Once you fix all issues, you switch to enforce mode.
People struggle with CSP for several reasons. They do not know which domains their site uses. They forget about third-party scripts, fonts, or analytics. They use inline scripts and styles, which CSP blocks by default. They create policies that are too strict and break functionality. Or they create policies that are too loose and provide little protection. When working with related formats, generating secure passwords can be a useful part of the process.
This tool solves these problems with a visual builder. You select security presets to start. You add or remove directives as needed. You configure allowed sources for each directive. The tool shows a live preview of your policy. It can scan your code to find domains automatically. It can audit your policy for security issues.
Use this tool in these situations: In some workflows, generating passkeys is a relevant follow-up operation.
This tool performs text generation and validation, not numeric calculations.
The CSP string generation works by combining directives. Each directive is formatted as "directive-name source1 source2 source3". Multiple directives are joined with semicolons and spaces. The header name depends on report-only mode. Enforce mode uses "Content-Security-Policy". Report-only mode uses "Content-Security-Policy-Report-Only". For related processing needs, generating MD5 hashes handles a complementary task.
Source validation checks if a source string is valid. It accepts special keywords like 'self', 'none', 'unsafe-inline', 'unsafe-eval', 'strict-dynamic', and 'wasm-unsafe-eval'. It accepts protocol schemes like https: and data:. It accepts domain names matching standard domain patterns. It accepts wildcard domains like *.example.com. It accepts the universal wildcard *.
The resource scanner uses regular expressions to find URLs and domains in text. It extracts domains from URLs, counts occurrences, and categorizes them by type. It limits results to 50 domains to prevent UI issues. It normalizes domains to lowercase and removes protocol prefixes.
Security health assessment uses simple heuristics. A directive is marked secure if it only allows 'self'. It is marked at-risk if it includes 'unsafe-inline' or '*'. Otherwise it is marked moderate. This is a visual guide, not a comprehensive security analysis.
The AI audit sends your policy to a backend service for analysis. The service evaluates security risks, checks for common mistakes, and provides recommendations. Results include a numeric security score and a list of vulnerabilities with severity levels and fix suggestions.
| Directive | What it controls | Common sources |
|---|---|---|
| default-src | Fallback for other fetch directives | 'self', 'none', https: |
| script-src | JavaScript files and inline scripts | 'self', 'unsafe-inline', specific CDN domains |
| style-src | CSS stylesheets and inline styles | 'self', 'unsafe-inline', font CDNs |
| img-src | Images and image data | 'self', data:, image CDN domains |
| connect-src | AJAX requests and WebSocket connections | 'self', API domains, analytics domains |
| font-src | Web fonts | 'self', font CDN domains, data: |
| object-src | Plugins like Flash or Java applets | 'none' (recommended) |
| media-src | Audio and video files | 'self', media CDN domains |
| frame-src | Iframe embeds | 'self', trusted embed domains |
| worker-src | Web Workers and Service Workers | 'self', blob:, specific worker domains |
| manifest-src | Web app manifest files | 'self' |
| base-uri | Base element URLs | 'self', 'none' |
| form-action | Form submission targets | 'self', specific form handler domains |
| frame-ancestors | Which sites can embed your page | 'none', 'self', trusted parent domains |
We’ll add articles and guides here soon. Check back for tips and best practices.
Summary: Generate Content Security Policy (CSP) headers to protect websites from XSS attacks, clickjacking, and data injection. Create, customize, and validate CSP directives with visual builder and policy testing.