Fix CSP Script-Src Violations for Blocked JavaScript

In this tutorial, you'll learn about Fix CSP Script. We cover key concepts, practical examples, and best practices.

Your browser console shows Refused to load the script because the script-src directive in your Content Security Policy does not include the source domain. Without the correct script-src configuration, JavaScript from CDNs, analytics, or inline script tags is silently blocked and your application breaks.

Wrong

The CSP header only allows scripts from the origin itself but the page loads scripts from multiple external domains.

Content-Security-Policy: script-src 'self'

<script src="https://cdn.example.com/widget.js"></script>
<script src="https://analytics.google.com/ga.js"></script>
<script>
  initApp();
</script>

Refused to load the script 'https://cdn.example.com/widget.js' because it
violates the following Content Security Policy directive: "script-src 'self'".

Refused to load the script 'https://analytics.google.com/ga.js' because it
violates the following Content Security Policy directive: "script-src 'self'".

Refused to execute inline script because it violates the following Content
Security Policy directive: "script-src 'self'". Either the 'unsafe-inline'
keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required for
inline execution.

Right

Add each external domain to script-src and use a nonce or hash for inline scripts.

Content-Security-Policy: script-src 'self' https://cdn.example.com https://analytics.google.com 'nonce-abc123'

<script src="https://cdn.example.com/widget.js"></script>
<script src="https://analytics.google.com/ga.js"></script>
<script nonce="abc123">
  initApp();
</script>

For Node.js with helmet:

const helmet = require('helmet');
const crypto = require('crypto');

app.use((req, res, next) => {
  res.locals.nonce = crypto.randomBytes(16).toString('base64');
  next();
});

app.use(helmet.contentSecurityPolicy({
  directives: {
    scriptSrc: ["'self'", 'https://cdn.example.com', (req, res) => `'nonce-${res.locals.nonce}'`],
  },
}));

All scripts now load without errors. The inline script with the correct nonce executes safely.

Prevention

• Specify exact external domains in script-src instead of using 'unsafe-inline' or *.
• Use a nonce ('nonce-...') for inline scripts that must execute. Generate a fresh nonce per request.
• Use a hash ('sha256-...') for inline scripts whose content never changes.
• Avoid 'unsafe-inline' in script-src as it allows any inline script and defeats CSP's XSS protection.
• Audit all script sources on your page before deploying a CSP. Use Content-Security-Policy-Report-Only first.
• Monitor violation reports to catch unauthorized script injection attempts.

DodaTech Tools

Doda Browser's CSP debugger shows exactly which directive blocked each script and suggests the correct source to add. DodaZIP's security scanner reports all CSP violations across page loads. Durga Antivirus Pro uses strict script-src with nonces across its web-based management console to prevent XSS injection.

FAQ