Content Security Policy (CSP) has been discussed many times in the community, but as versions have evolved, many earlier conclusions need revisiting. This article revisits it based on the latest version.

Getting Started

Real-world usage is a bit more involved:

function setCSP(req, res, next) {
  const nonce = crypto.randomBytes(16).toString('base64')
  res.setHeader('Content-Security-Policy', [
    "default-src 'self'",
    `script-src 'self' 'nonce-${nonce}'`,
    "style-src 'self' 'unsafe-inline'",
    "img-src 'self' data: https:",
    "connect-src 'self' https://api.example.com",
    "frame-ancestors 'none'"
  ].join('; '))
  next()
}

This improves both the testability and extensibility of the code.

Source Code Analysis

Here is a complete example:

function setCSP(req, res, next) {
  const nonce = crypto.randomBytes(16).toString('base64')
  res.setHeader('Content-Security-Policy', [
    "default-src 'self'",
    `script-src 'self' 'nonce-${nonce}'`,
    "style-src 'self' 'unsafe-inline'",
    "img-src 'self' data: https:",
    "connect-src 'self' https://api.example.com",
    "frame-ancestors 'none'"
  ].join('; '))
  next()
}

Mind edge-case handling — it is critical in production.

Real-World Applications

The key is understanding the core logic:

function setCSP(req, res, next) {
  const nonce = crypto.randomBytes(16).toString('base64')
  res.setHeader('Content-Security-Policy', [
    "default-src 'self'",
    `script-src 'self' 'nonce-${nonce}'`,
    "style-src 'self' 'unsafe-inline'",
    "img-src 'self' data: https:",
    "connect-src 'self' https://api.example.com",
    "frame-ancestors 'none'"
  ].join('; '))
  next()
}

Performance optimization always depends on the specific context — not every case calls for aggressive tuning.

Optimization Tips

Here are a few ways we can improve on this:

function setCSP(req, res, next) {
  const nonce = crypto.randomBytes(16).toString('base64')
  res.setHeader('Content-Security-Policy', [
    "default-src 'self'",
    `script-src 'self' 'nonce-${nonce}'`,
    "style-src 'self' 'unsafe-inline'",
    "img-src 'self' data: https:",
    "connect-src 'self' https://api.example.com",
    "frame-ancestors 'none'"
  ].join('; '))
  next()
}

This approach has been running stably in production for over six months and has proven itself in real use.

Summary

• CSP is no silver bullet; choose it based on your project's size and tech stack.
• Understanding the underlying principles matters more than memorizing APIs.
• Always verify compatibility before shipping to production.
• In team collaboration, conventions and documentation matter more than the technology itself.
• Keep an eye on the community — technical solutions need to keep iterating.