SharePoint Framework solutions and the new Content Security Policy rollout

Intro - what’s going on?

As Andrew Connell of Voitanos recently pointed out, SharePoint Online is due to roll out enforcement of Content Security Policy in Q5 of 2025.

What this means is that if your SharePoint Framework solutions rely on external scripts - third party scripts that get pulled in dynamically e.g. from a CDN, rather than baked into your bundle - then these are gonna be blocked and your solution will error out.

TLDR; I know what the issue is. How do I fix it?

1. Run gulp bundle as normal.
2. Open the .manifest files under release\manifests\ and edit the internalModuleBaseUrls array to add your missing script sources.
3. Run gulp package-solution as normal.

Read on for the full explanation…

How do I know if this affects me?

When you load your SPFx solution, today you’te going to see a warning in the console. Something like this:

In my case, this is caused because I’m loading a script via externals in the SPFx config.json

What has Microsoft done wrong?

In my opinion, scripts specified in the externals of the spfx config.json should have been getting included in the Trusted Sources automatically, during app install.

Here’s what my externals looks like:

This is the screen during install when you have to approve the new sources:

As you can see, there’s only one source in here and it’s not including my externals.

This is because the only script approved as a trusted source is the cdnBasePath from the write-manifests.json:

What’s the workaround?

The only “quick fix” is to add script URLs to your Trusted Script Sources. You can get that under the SharePoint Admin Center > Advanced > Script Sources:

You can see I’ve already got the gstatic.com script sources in there… let me show you how I added them (hint - I didn’t add them manually).

Doing it this way is OK if your SPFx solution is a one-off. But if your solution is deployed to a lot of tenants, or you want to avoid having to add this Trusted Source manually, you’ll need another approach.

The other approach - automating it

When you run gulp bundle or gulp bundle --ship, it copies your script source in your cdnBasePath into the manifest json files, under the internalModuleBaseUrls property:

But, this is an array. So you can add more scripts sources in here yourself:

Now, you can go ahead and run gulp package-solution which will copy the manifest values into your sppkg file. Add that to your app catalog, and you get the correct approval dialog:

Now, this works - but not smoothly because we have to do a manual update step to those .manifest files in between running gulp bundle and gulp package-solution.

In my case I’m going to add a new action to my github deployment workflow to do a find-and-replace in the manifest files. I’ll maybe post about that automated deployment process another time.

If you have comments about the process or this Content Security Policy issue in general, head over to this github page.