diff --git a/docs/spfx/content-securty-policy-trusted-script-sources.md b/docs/spfx/content-securty-policy-trusted-script-sources.md index da35369a5..6607ff710 100644 --- a/docs/spfx/content-securty-policy-trusted-script-sources.md +++ b/docs/spfx/content-securty-policy-trusted-script-sources.md @@ -1,26 +1,35 @@ --- title: Support for Content Security Policy (CSP) in SharePoint Online 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. -ms.date: 05/02/2025 +ms.date: 11/17/2025 author: andrewconnell-msft2 -ms.author: v-jconnell +ms.author: bjansen --- # Support for Content Security Policy (CSP) in SharePoint Online -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. +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. -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. +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. Learn more about CSP on MDN: [Content Security Policy (CSP)](https://developer.mozilla.org/docs/Web/HTTP/Guides/CSP). 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. > [!IMPORTANT] -> 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.** +> 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**. + +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: + +```powershell +Set-SPOTenant -DelayContentSecurityPolicyEnforcement $true +``` + +> [!NOTE] +> This option will be available in the SPO Management Shell version that will be released by the end of November 2025. ## How Content Security Policy Works in SharePoint Online -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. +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. ## Content Security Policy and SPFx Solutions @@ -28,7 +37,7 @@ By default, SharePoint Online is configured to allow the browser to load scripts 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. -SPFx developers have multiple options they can implement to load scripts in their solutions for various scenarios. These include: +SPFx developers have multiple options they can implement to load and use scripts in their solutions for various scenarios. These include: ### Option 1: Deploy SPFx Scripts to an External CDN @@ -39,7 +48,7 @@ When implementing this scenario, the SPFx package is configured to load scripts This is done by setting the `cdnBasePath` property in the **./config/write-manifests.json** file. > [!NOTE] -> 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: +> 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: > > - [Deploy your SharePoint client-side web part to Azure CDN](web-parts/get-started/deploy-web-part-to-cdn.md) > - [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,7 +61,7 @@ Another common scenario is when a SPFx solution takes a dependency on a popular This is done by adding the external script reference to the `externals` property in the **./config/config.json** file. > [!NOTE] -> 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: +> 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: > > - [Add an external library to your SharePoint client-side web part](web-parts/basics/add-an-external-library.md) @@ -60,25 +69,78 @@ This is done by adding the external script reference to the `externals` property 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). -```ts +```typescript async SPComponentLoader.loadScript('https://some-external-site/script.js'); ``` +### Option 4: Use Inline Script + +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: + +- Any ` + ``` + +- Inline Event Handlers (JavaScript embedded in HTML attributes): + + ```html + + ... + ``` + + ```javascript + const testDiv = document.createElement('div'); + testDiv.setAttribute('onclick', "alert('Hi')"); + testDiv.click(); + ``` + +- JavaScript embedded in href or src attributes: + + ```html + Click + ``` + +- Document.write() with Inline Scripts: + + ```javascript + document.write(""); + ``` + +- Dynamically Created Inline Scripts: + + ```javascript + const s = document.createElement('script'); + s.textContent = "alert('Hi')"; + document.head.appendChild(s); + ``` + +- InnerHTML or insertAdjacentHTML with `"; + ``` + ## Content Security Policy Impact on SPFx Solutions 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. -However, if your solution implements any of the three (3) options previously listed, or another option such as dynamically adding a `