Skip to content

Commit 6092c58

Browse files
jansenbebjansenandrewconnell
authored
CSP update (#10482)
* CSP updates * CSP updates * scipt editor inline script updates * Updates * fix warning on ms author * Minor update * Added note to explain CSP only applies to SPFx on modern pages * Fix grammatical & markdown formatting issues in CSP documentation Corrected grammatical errors and improved clarity in the documentation regarding Content Security Policy (CSP) in SharePoint Online. Markdown code in bullets should be 2x indented --------- Co-authored-by: bjansen <[email protected]> Co-authored-by: Andrew Connell <[email protected]>
1 parent 9523583 commit 6092c58

File tree

1 file changed

+89
-18
lines changed

1 file changed

+89
-18
lines changed

docs/spfx/content-securty-policy-trusted-script-sources.md

Lines changed: 89 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,43 @@
11
---
22
title: Support for Content Security Policy (CSP) in SharePoint Online
33
description: Learn how SharePoint Online implements Content Security Policy to protect against various attack vectors, and how you can ensure your SharePoint Framework components are valid.
4-
ms.date: 05/02/2025
4+
ms.date: 11/17/2025
55
author: andrewconnell-msft2
6-
ms.author: v-jconnell
6+
ms.author: bjansen
77
---
88
# Support for Content Security Policy (CSP) in SharePoint Online
99

10-
In web development, Content Security Policy (CSP) is a security feature that help prevent against various attack vectors including [cross-site scripting](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting) (XSS), [clickjacking](https://developer.mozilla.org/docs/Web/Security/Attacks/Clickjacking), and other code injection attacks.
10+
In web development, Content Security Policy (CSP) is a security feature that helps prevent against various attack vectors, including [cross-site scripting](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting) (XSS), [clickjacking](https://developer.mozilla.org/docs/Web/Security/Attacks/Clickjacking), and other code injection attacks.
1111

12-
CSP enables a site to control which resources a page is allowed to load. It works though a series of instructions to the browser from the website that instruct the browser what the page is allowed to load.
12+
CSP enables a site to control which resources a page is allowed to load. It works through a series of instructions to the browser from the website, which instruct the browser what the page is allowed to load.
1313

1414
Learn more about CSP on MDN: [Content Security Policy (CSP)](https://developer.mozilla.org/docs/Web/HTTP/Guides/CSP).
1515

1616
In this article, you'll learn how CSP works with custom SharePoint Framework (SPFx) solutions, how to identify and find CSP violations, and how to configure trusted sources in SharePoint Online.
1717

1818
> [!IMPORTANT]
19-
> Content Security Policy (CSP) is currently rolling out in SharePoint Online, however **no scripts are currently being blocked. CSP violations are only being logged at this time.**
19+
> Content Security Policy (CSP) is currently rolled out in SharePoint Online in reporting mode and thus not impacting solutions; the **enforcement of Content Security Policy (CSP) will start from March 1, 2026**.
20+
21+
If the enforcement on March 1, 2026, is too soon because you need more time to review and update your existing SPFx solutions, you can delay the enforcement by 90 days, until June 1, 2026, using SPO Management Shell:
22+
23+
```powershell
24+
Set-SPOTenant -DelayContentSecurityPolicyEnforcement $true
25+
```
26+
27+
> [!NOTE]
28+
> This option will be available in the SPO Management Shell version that will be released by the end of November 2025.
2029
2130
## How Content Security Policy Works in SharePoint Online
2231

23-
When a browser requests a script, if CSP is enabled on the site, the browser checks the script location against the CSP rules. If the CSP restrictions allow the location of the script to be loaded by the browser, the browser proceeds with the request. However if CSP rules to not allow the location, the browser doesn't load the script and logs the error in the browser's Console.
32+
When a browser requests a script, if CSP is enabled on the site, the browser checks the script location against the CSP rules. If the CSP restrictions allow the location of the script to be loaded by the browser, the browser proceeds with the request. However, if CSP rules to not allow the location, the browser doesn't load the script and logs the error in the browser's Console.
2433

2534
## Content Security Policy and SPFx Solutions
2635

2736
By default, SharePoint Online is configured to allow the browser to load scripts used to implement SharePoint Online. This includes scripts from custom SPFx solutions that include scripts in the **\*.sppkg** deployment packages.
2837

2938
The default setting for new SPFx solutions is to include the JavaScript bundles that implement SPFx components in the package. When an SPFx app is installed, the assets included in the package are deployed to the site's **ClientSideAssets** folder.
3039

31-
SPFx developers have multiple options they can implement to load scripts in their solutions for various scenarios. These include:
40+
SPFx developers have multiple options they can implement to load and use scripts in their solutions for various scenarios. These include:
3241

3342
### Option 1: Deploy SPFx Scripts to an External CDN
3443

@@ -39,7 +48,7 @@ When implementing this scenario, the SPFx package is configured to load scripts
3948
This is done by setting the `cdnBasePath` property in the **./config/write-manifests.json** file.
4049

4150
> [!NOTE]
42-
> Learn more how to configure SPFx solutions so the JavaScript bundles and other scripts are deployed to a location other than SharePoint Online in the following articles:
51+
> Learn more about how to configure SPFx solutions so the JavaScript bundles and other scripts are deployed to a location other than SharePoint Online in the following articles:
4352
>
4453
> - [Deploy your SharePoint client-side web part to Azure CDN](web-parts/get-started/deploy-web-part-to-cdn.md)
4554
> - [Host your client-side web part from Microsoft 365 CDN (Hello World part 4)](web-parts/get-started/hosting-webpart-from-office-365-cdn.md)
@@ -52,33 +61,86 @@ Another common scenario is when a SPFx solution takes a dependency on a popular
5261
This is done by adding the external script reference to the `externals` property in the **./config/config.json** file.
5362

5463
> [!NOTE]
55-
> Learn more how to configure the SPFx bundling process to exclude the library from the bundle and instruct the SPFx runtime to load the library from the remote CDN prior to loading the SPFx component's bundle in the following article:
64+
> Learn more about how to configure the SPFx bundling process to exclude the library from the bundle and instruct the SPFx runtime to load the library from the remote CDN prior to loading the SPFx component's bundle in the following article:
5665
>
5766
> - [Add an external library to your SharePoint client-side web part](web-parts/basics/add-an-external-library.md)
5867
5968
### Option 3: Dynamically Load a Script with the SPComponent Loader
6069

6170
Another option SPFx developers can implement is to conditionally load a script through code. This is done using the [SPComponentLoader](/javascript/api/sp-loader/spcomponentloader).
6271

63-
```ts
72+
```typescript
6473
async SPComponentLoader.loadScript('https://some-external-site/script.js');
6574
```
6675

76+
### Option 4: Use Inline Script
77+
78+
While script in the majority of cases is included via script files, there's also the option to use inline script. Inline script use cases are:
79+
80+
- Any `<script>` block directly in HTML:
81+
82+
```html
83+
<script>console.log('Hello');</script>
84+
```
85+
86+
- Inline Event Handlers (JavaScript embedded in HTML attributes):
87+
88+
```html
89+
<button onclick="alert('Hi')">Click</button>
90+
<body onload="init()">...</body>
91+
```
92+
93+
```javascript
94+
const testDiv = document.createElement('div');
95+
testDiv.setAttribute('onclick', "alert('Hi')");
96+
testDiv.click();
97+
```
98+
99+
- JavaScript embedded in href or src attributes:
100+
101+
```html
102+
<a href="javascript:alert('Hi')">Click</a>
103+
```
104+
105+
- Document.write() with Inline Scripts:
106+
107+
```javascript
108+
document.write("<script>alert('Hi')</script>");
109+
```
110+
111+
- Dynamically Created Inline Scripts:
112+
113+
```javascript
114+
const s = document.createElement('script');
115+
s.textContent = "alert('Hi')";
116+
document.head.appendChild(s);
117+
```
118+
119+
- InnerHTML or insertAdjacentHTML with `<script>`:
120+
121+
```javascript
122+
element.innerHTML = "<script>alert('Hi')</script>";
123+
```
124+
67125
## Content Security Policy Impact on SPFx Solutions
68126
69127
As stated above, the CSP settings in SharePoint Online are configured to load scripts hosted in SharePoint Online. This means that if you include the resources in your SPFx package, *the default configuration for new SPFx solutions*, the CSP settings in SharePoint Online will have no impact on your custom solution.
70128
71-
However, if your solution implements any of the three (3) options previously listed, or another option such as dynamically adding a `<script>` element to the component's HTML, the default CSP settings in SharePoint Online will impact your solution.
129+
Of the options mentioned above, if you implement [Option 1: Deploy SPFx Scripts to an External CDN](#option-1-deploy-spfx-scripts-to-an-external-cdn) or [Option 2: Pull Script Dependencies from a CDN](#option-2-pull-script-dependencies-from-a-cdn), SharePoint Online will take care of this for you. When the SPFx solution is installed in a site, SharePoint Online will add the value set in the project's `cdnBasePath` and `externals` to the new **Trusted script sources** in the SharePoint Online Admin Center. Notice the new message that appears when adding an app from the SharePoint Store that implements [Option 1: Deploy SPFx Scripts to an External CDN](#option-1-deploy-spfx-scripts-to-an-external-cdn) or [Option 2: Pull Script Dependencies from a CDN](#option-2-pull-script-dependencies-from-a-cdn):
72130
73-
Of the options mentioned above, if you implement [Option 1: Deploy SPFx Scripts to an External CDN](#option-1-deploy-spfx-scripts-to-an-external-cdn), SharePoint Online will take care of this for you. When the SPFx solution is installed in a site, SharePoint Online will add the value set in the project's `cdnBasePath` to the new **Trusted script sources** in the SharePoint Online Admin Center.
131+
![Automatically adding trusted script sources](../images/content-securty-policy-trusted-script-sources/add-app-with-tss.png)
74132
75-
If your SPFx solution loads scripts any other way, you'll need to manually add an entry to the **Trusted script sources**. Notice the new message that appears when adding an app from the SharePoint Store that implements [Option 1: Deploy SPFx Scripts to an External CDN](#option-1-deploy-spfx-scripts-to-an-external-cdn):
133+
However, if your solution implements [Option 3](#option-3-dynamically-load-a-script-with-the-spcomponent-loader) or [Option 4](#option-4-use-inline-script), the default CSP settings in SharePoint Online will impact your solution.
76134
77-
![Automatically adding trusted script sources](../images/content-securty-policy-trusted-script-sources/add-app-with-tss.png)
135+
> [!IMPORTANT]
136+
>
137+
> - If your SPFx solution loads scripts any other way, you'll need to manually add an entry to the **Trusted script sources**. If your SPFx solutions use inline script, then the recommended approach is to move the inline script into a script file, as **inline script will be blocked by the Content Security Policy (CSP)** in SharePoint Online.
138+
> - The community [Script Editor web part](https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-script-editor) and its variations also use an inline script whenever the user adds a script on a page via the web part. Added script will not execute, added HTML will still work.
139+
> - CSP is only enforced for scripts on non-classic pages; for example, a SharePoint SPFx web part hosted on a classic wiki page will not have policies applied.
78140
79141
## Managing the Content Security Policy rules in SharePoint Online
80142
81-
In addition to the default CSP settings, SharePoint Online will append another supported locations listed in the **Trusted Script Sources** area of the SharePoint Online Admin Center.
143+
In addition to the default CSP settings, SharePoint Online will append supported locations listed in the **Trusted Script Sources** area of the SharePoint Online Admin Center in the CSP header so that script can be loaded from these locations.
82144
83145
To add an entry, in a browser, go to the **Trusted Script Sources**: **SharePoint Online Admin Center** > **Advanced** > **Script sources**.
84146
@@ -88,7 +150,12 @@ Add a new entry by selecting **Add source**, or select and edit an existing entr
88150
89151
![Add or edit a script source in the Trusted Script Sources](../images/content-securty-policy-trusted-script-sources/add-script-source.png)
90152
91-
The **Status** column on the **Trusted Script Sources** indicates how the entry was added to the list. If it was automatically is added from a SPFx solution that implements [Option 1: Deploy SPFx Scripts to an External CDN](#option-1-deploy-spfx-scripts-to-an-external-cdn), the column states **Imported from app catalog**.
153+
> [!NOTE]
154+
>
155+
> - CSP expressions that are too permissive such as `*`, `*.domain`, `'unsafe-inline'`, `'wasm-unsafe-eval'` and `'strict-dynamic'` are not allowed.
156+
> - The maximum number of entries in the Trusted Script Sources is 300. If you need to go beyond, the recommendation is to use wildcards to consolidate entries.
157+
158+
The **Status** column on the **Trusted Script Sources** indicates how the entry was added to the list. If it was automatically added from a SPFx solution that implements [Option 1: Deploy SPFx Scripts to an External CDN](#option-1-deploy-spfx-scripts-to-an-external-cdn), the column states **Imported from app catalog**.
92159
93160
If the entry was manually added or edited, the column states **Added from script sources**.
94161
@@ -99,7 +166,7 @@ If the entry was manually added or edited, the column states **Added from script
99166
When the browser requests a script that violates the SharePoint Online CSP settings, it will display a message in the browser's console and log it to Microsoft Purview.
100167
101168
> [!IMPORTANT]
102-
> Content Security Policy (CSP) is currently rolling out in SharePoint Online, **no scripts are currently being blocked. CSP violations are only being logged at this time.**
169+
> Content Security Policy (CSP) is currently rolling out in SharePoint Online; no scripts are currently being blocked. CSP violations are only being logged at this time.**
103170
104171
### View CSP Violations in the Browser's Console
105172
@@ -170,6 +237,10 @@ From the **Search** page, search for the **Activity - friendly names** value **V
170237
Selecting a search result opens the side panel with the audit details. Take note of the following properties:
171238
172239
- **DocumentUrl**: This indicates the page in the SharePoint Online site where the CSP violation occurred.
173-
- **BlockedUrl**: This indicates the URL of the script that violated the CSP configuration.
240+
- **BlockedUrl**: This indicates the URL of the script that violated the CSP configuration or contains “inline” when the violation came from loading an inline script.
174241
175242
![Microsoft Purview Audit Record](../images/content-securty-policy-trusted-script-sources/purview-audit-record.png)
243+
244+
## Testing with CSP Enforced
245+
246+
The enforcement of Content Security Policy (CSP) for SharePoint Online will start from March 1, 2026, but you can already now verify your application's behavior by adding the `csp=enforce` URL parameter to the page containing the SPFx solution you want to test. To enforce CSP in reporting mode, use `csp=report`.

0 commit comments

Comments
 (0)