For inline SVG, use a restrictive Content Security Policy (CSP) that blocks unapproved scripts and styles: avoid 'unsafe-inline', set explicit script-src and style-src rules, and use a nonce or hash only for trusted inline code that the page genuinely needs. Add object-src 'none' if the site does not need embedded objects, and test the policy in report-only mode before enforcing it. CSP is an important layer, not a substitute for sanitizing or rejecting untrusted SVG.
Why inline SVG needs active-content controls
Inline SVG is markup in the HTML page, not merely a picture file. SVG can contain script references and event-handler attributes; when active code runs, it can act in the page’s context. MDN warns that user-provided SVG input can be a cross-site scripting (XSS) vector. See MDN’s SVGScriptElement: href property documentation.
That is why a policy that permits broad inline JavaScript is a poor fit for pages that render SVG, particularly if any SVG content comes from users or another untrusted source.
Which CSP directives should you set?
Restrict scripts with script-src
script-src governs JavaScript sources, including inline script execution and inline event-handler attributes such as onload. If script-src is absent, default-src can act as its fallback. Set script-src explicitly so script permissions are clear; do not add 'unsafe-inline' just to make existing inline code run.
#1 Best Overall
If a trusted inline <script> block is required, authorize it with a nonce or a matching hash rather than permitting arbitrary inline scripts. A nonce must be unpredictable and freshly generated for each response, and should appear only on trusted script elements. A hash authorizes matching content, so it must be recalculated whenever that content changes. MDN describes these options in its script-src directive reference.
Constrain styles with style-src
style-src controls stylesheet sources and inline styles. Avoid 'unsafe-inline' here too. A nonce or matching hash can authorize a needed inline <style> block, but a nonce does not automatically permit arbitrary style attributes. See MDN’s style-src directive reference.
Rank #2
Block unused object and embed content
Set object-src 'none' if the application does not need content loaded through <object> or <embed>. This is a containment measure; it does not replace script and style restrictions for inline SVG.
Choose nonces or hashes for the code you actually need
| Option | Best fit | What to account for |
|---|---|---|
| Nonce | Pages whose HTML is generated dynamically and can attach a nonce to trusted inline elements. | Generate a fresh, unpredictable nonce for each response; do not reuse it as a standing authorization. |
| Hash | Stable inline script or style content. | The hash must match the exact content and be recalculated when the bytes change. |
Neither option is a general-purpose permission for arbitrary SVG event-handler attributes. Prefer removing event-handler attributes and binding behavior through trusted application code. These CSP rules do not establish that arbitrary user-supplied SVG is safe; sanitize or reject it according to the application’s threat model.
Free tools Windows power users keep installed
One-click scans. No signup required.
Use a starting policy, then tailor it to the application
This nonce-based policy illustrates a restrictive starting shape:
Content-Security-Policy: default-src 'self'; script-src 'nonce-{PER-RESPONSE-RANDOM}'; style-src 'self'; img-src 'self'; object-src 'none'; base-uri 'none'Replace the nonce placeholder with a fresh, unpredictable value for each response and put that value only on trusted script elements. The example is not a universal drop-in header: the application may need different rules for scripts, styles, images, fonts, connections, or frames. Add only the sources and resource types the application actually requires. MDN explains the default-src fallback behavior in its default-src directive reference.
Rank #4
Test in report-only mode before enforcement
- Send a
Content-Security-Policy-Report-Onlyheader with the policy you intend to enforce. Report-only mode lets you observe violations without blocking the resources. - Exercise the pages and SVG features that matter, then review reported violations. Separate required dependencies from unexpected or unsafe behavior.
- Adjust the relevant directives narrowly to allow legitimate application behavior; do not resolve violations by broadly adding
'unsafe-inline'. - When the policy behaves as intended, deploy it as an enforcing
Content-Security-Policyheader and continue checking for breakage as the application changes.
MDN’s CSP implementation guide covers nonce and hash policies, unsafe-source warnings, object-src 'none', and report-only rollout.
Do not apply image-context assumptions to inline SVG
SVG used as an image has browser restrictions on scripts and external resources, but those restrictions do not carry over to SVG viewed directly or embedded as a document with <iframe>, <object>, or <embed>. Inline SVG is also a distinct context from an SVG loaded as an image. Therefore, an image-use restriction is not a replacement for the page’s CSP when SVG is inline or presented as a document. See MDN’s SVG as an image documentation.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
