Does CSP enforcement affect classic SharePoint pages?

No. CSP enforcement applies to modern SharePoint pages and the SPFx workbench. Classic pages are not receiving these headers. However, classic pages are on a deprecation path, so this is not a reason to avoid fixing your code.

Can I add domains to the CSP allowlist for my tenant?

Not directly. Microsoft controls the CSP headers on SharePoint Online pages. You cannot modify them through tenant settings or PowerShell. The supported approach is to bundle your dependencies or use the SPFx externals configuration, which routes through the SharePoint CDN.

Will CSS-in-JS libraries like styled-components work?

Most CSS-in-JS libraries inject tags at runtime, which violates style-src without 'unsafe-inline'. Some libraries support nonce-based injection. Check if your library accepts a nonce prop or configuration. If not, switch to CSS modules or .scss files that are processed at build time.

My web part uses a third-party library that calls eval internally. What do I do?

Check if the library has a newer version that removed the eval dependency. Many popular libraries (Handlebars, Lodash templates) shipped CSP-safe builds after eval restrictions became common. If no safe version exists, you need to find an alternative library or fork and patch the eval call yourself.

← Back to Blog

SPFxApril 3, 202610 min read

SharePoint Online CSP Enforcement: SPFx Developer Guide

Fix SPFx web parts broken by Content Security Policy enforcement: resolve inline scripts, eval calls, and style violations with practical solutions.

#SharePoint #CSP #SPFx #security #Content Security Policy

SharePoint Online CSP Enforcement: SPFx Developer Guide

Your SPFx Web Part Just Stopped Working

You deploy a SharePoint Framework solution that has been running fine for months. Suddenly, users report a blank web part or broken functionality. You open the browser console and see this:

Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'nonce-...'"

This is the result of Microsoft enforcing Content Security Policy headers on SharePoint Online pages. If you have SPFx solutions in production, you need to audit them now.

What Is CSP and Why Microsoft Is Enforcing It

Content Security Policy is an HTTP response header that tells the browser which sources of content are trusted. It prevents cross-site scripting (XSS) attacks by blocking unauthorized inline scripts, eval calls, and resources loaded from untrusted origins.

SharePoint Online has historically been lenient with CSP. That changed as Microsoft moved to harden the platform against supply-chain attacks targeting custom solutions. CSP enforcement gives Microsoft a server-side control to limit what client-side code can do, even in tenant-deployed SPFx packages.

Enforcement Rollout Timeline

Date	Change	Impact
June 2025	CSP headers added in report-only mode	No breakage; violations logged
October 2025	`script-src` enforcement begins (targeted release tenants)	Inline scripts blocked
January 2026	`script-src` and `style-src` enforcement reaches GA tenants	Inline scripts and styles blocked
March 2026	Full CSP enforcement including `connect-src` restrictions	Unauthorized API calls blocked
June 2026 (planned)	Strict nonce-based policy for all tenants	Only nonce-tagged scripts execute

If your tenant is on targeted release, you are already under full enforcement. GA tenants have been catching up since Q1 2026.

What Breaks: Common SPFx Patterns That Violate CSP

Inline Scripts via innerHTML

Setting innerHTML with