|
| 1 | +--- |
| 2 | +title: Support for Content Security Policy (CSP) in SharePoint Online |
| 3 | +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 |
| 5 | +author: andrewconnell-msft2 |
| 6 | +ms.author: v-jconnell |
| 7 | +--- |
| 8 | +# Support for Content Security Policy (CSP) in SharePoint Online |
| 9 | + |
| 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. |
| 11 | + |
| 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. |
| 13 | + |
| 14 | +Learn more about CSP on MDN: [Content Security Policy (CSP)](https://developer.mozilla.org/docs/Web/HTTP/Guides/CSP). |
| 15 | + |
| 16 | +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. |
| 17 | + |
| 18 | +> [!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.** |
| 20 | +
|
| 21 | +## How Content Security Policy Works in SharePoint Online |
| 22 | + |
| 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. |
| 24 | + |
| 25 | +## Content Security Policy and SPFx Solutions |
| 26 | + |
| 27 | +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. |
| 28 | + |
| 29 | +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. |
| 30 | + |
| 31 | +SPFx developers have multiple options they can implement to load scripts in their solutions for various scenarios. These include: |
| 32 | + |
| 33 | +### Option 1: Deploy SPFx Scripts to an External CDN |
| 34 | + |
| 35 | +SPFx developers can optionally configure their SPFx solutions to not include the JavaScript bundles in the package and instead, deploy these scripts to their own locations. For instance, a vendor might elect to deploy their scripts to their own managed Content Delivery Network (CDN). |
| 36 | + |
| 37 | +When implementing this scenario, the SPFx package is configured to load scripts from a remote domain. The developer then must deploy the scripts to that location in addition to deploying the SPFx package (**\*.sppkg**) to the SharePoint Online App Catalog. |
| 38 | + |
| 39 | +This is done by setting the `cdnBasePath` property in the **./config/write-manifests.json** file. |
| 40 | + |
| 41 | +> [!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: |
| 43 | +> |
| 44 | +> - [Deploy your SharePoint client-side web part to Azure CDN](web-parts/get-started/deploy-web-part-to-cdn.md) |
| 45 | +> - [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) |
| 46 | +> - [Host an SPFx extension from the Microsoft 365 CDN (Hello World part 4)](extensions/get-started/hosting-extension-from-office365-cdn.md) |
| 47 | +
|
| 48 | +### Option 2: Pull Script Dependencies from a CDN |
| 49 | + |
| 50 | +Another common scenario is when a SPFx solution takes a dependency on a popular library, but instead of including it in the SPFx component's JavaScript bundle, they configure the solution to exclude it from the bundle and instead instruct the SPFx runtime to pull the library from the remote CDN. |
| 51 | + |
| 52 | +This is done by adding the external script reference to the `externals` property in the **./config/config.json** file. |
| 53 | + |
| 54 | +> [!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: |
| 56 | +> |
| 57 | +> - [Add an external library to your SharePoint client-side web part](web-parts/basics/add-an-external-library.md) |
| 58 | +
|
| 59 | +### Option 3: Dynamically Load a Script with the SPComponent Loader |
| 60 | + |
| 61 | +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). |
| 62 | + |
| 63 | +```ts |
| 64 | +async SPComponentLoader.loadScript('https://some-external-site/script.js'); |
| 65 | +``` |
| 66 | + |
| 67 | +## Content Security Policy Impact on SPFx Solutions |
| 68 | + |
| 69 | +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. |
| 70 | + |
| 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. |
| 72 | + |
| 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. |
| 74 | + |
| 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): |
| 76 | + |
| 77 | + |
| 78 | + |
| 79 | +## Managing the Content Security Policy rules in SharePoint Online |
| 80 | + |
| 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. |
| 82 | + |
| 83 | +To add an entry, in a browser, go to the **Trusted Script Sources**: **SharePoint Online Admin Center** > **Advanced** > **Script sources**. |
| 84 | + |
| 85 | + |
| 86 | + |
| 87 | +Add a new entry by selecting **Add source**, or select and edit an existing entry. The **Source expression** must be a valid CSP expression: |
| 88 | + |
| 89 | + |
| 90 | + |
| 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**. |
| 92 | + |
| 93 | +If the entry was manually added or edited, the column states **Added from script sources**. |
| 94 | + |
| 95 | + |
| 96 | + |
| 97 | +## Viewing Content Security Policy Violations |
| 98 | + |
| 99 | +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. |
| 100 | + |
| 101 | +> [!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.** |
| 103 | +
|
| 104 | +### View CSP Violations in the Browser's Console |
| 105 | + |
| 106 | +When the browser detects a CSP violation, it logs it to the console: |
| 107 | + |
| 108 | + |
| 109 | + |
| 110 | +The following code is a formatted version of the error in the screenshot with added line breaks to improve readability: |
| 111 | + |
| 112 | +```txt |
| 113 | +[Report Only] Refused to load the script 'about:blank#blocked' because it |
| 114 | +violates the following Content Security Policy directive: "script-src 'unsafe-eval' |
| 115 | +
|
| 116 | +https://ichicraft-widgetboard.azurewebsites.net/s/1/INVALID |
| 117 | +'self' |
| 118 | +https://contentstorage.osi.office.net |
| 119 | +https://swx.cdn.skype.com |
| 120 | +https://res.delve.office.com |
| 121 | +https://lpcres.delve.office.com |
| 122 | +https://widget.uservoice.com |
| 123 | +https://by2.uservoice.com |
| 124 | +https://www.bing.com/api/maps |
| 125 | +https://www.bing.com/rms |
| 126 | +https://fabriciss.azureedge.net |
| 127 | +https://ajax.aspnetcdn.com |
| 128 | +https://js.monitor.azure.com |
| 129 | +https://r4.res.office365.com |
| 130 | +https://public-cdn.sharepointonline.com |
| 131 | +https://teams.microsoft.com |
| 132 | +*.cdn.office.net |
| 133 | +*.fluidpreview.office.net |
| 134 | +*.onecdn.static.microsoft |
| 135 | +https://webshell.suite.office.com |
| 136 | +https://amcdn.msftauth.net |
| 137 | +https://res-1.cdn.office.net |
| 138 | +https://webshell.suite.officeppe.com |
| 139 | +https://res-2.public.onecdn.static.microsoft |
| 140 | +https://df.loki.delve.office.com |
| 141 | +https://c5-excel-15.cdn.office.net |
| 142 | +https://c5-onenote-15.cdn.office.net |
| 143 | +https://c5-powerpoint-15.cdn.office.net |
| 144 | +https://c5-visio-15.cdn.office.net |
| 145 | +https://c5-word-view-15.cdn.office.net |
| 146 | +https://res-2.df.onecdn.static.microsoft |
| 147 | +https://res-1.df.onecdn.static.microsoft |
| 148 | +https://res-3-sdf.cdn.office.net |
| 149 | +https://shell.cdn.office.net |
| 150 | +
|
| 151 | +'nonce-mvvlikiedo'". |
| 152 | +
|
| 153 | +Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback. |
| 154 | +``` |
| 155 | + |
| 156 | +The first URL listed before is the one that triggered the CSP violation. After installing an app from the SharePoint Store, the trusted script source was modified to include `INVALID` in the URL. The requested script didn't include the string `INVALID` in the URL. |
| 157 | + |
| 158 | +### View CSP Violations in Microsoft Purview |
| 159 | + |
| 160 | +In addition to logging CSP violations to the browser's console, SharePoint Online also logs them to Microsoft Purview. |
| 161 | + |
| 162 | +In the browser, navigate to the **Audit** solution in **[Microsoft Purview](https://purview.microsoft.com/)** from the Microsoft 365 Admin Center. |
| 163 | + |
| 164 | +From the **Search** page, search for the **Activity - friendly names** value **Violated Content Security Policy**, or the **Activity - operation names** value **ViolatedContentSecurityPolicy**: |
| 165 | + |
| 166 | + |
| 167 | + |
| 168 | + |
| 169 | + |
| 170 | +Selecting a search result opens the side panel with the audit details. Take note of the following properties: |
| 171 | + |
| 172 | +- **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. |
| 174 | + |
| 175 | + |
0 commit comments