While working on CSP (Content Security Policy) settings on Power Pages to make the site external connections or loading of external references more restrictive, we can find a few challenges if we restrict all to ‘self’, we will break a lot of out-of-the-box functionality as some fonts, scripts and content are by default hosted outside of the website domain (they are on PowerApps, Office, SharePoint and Microsoft domains/CDNs).
To help kickstart enabling CSP in your Power Pages site, this post brings an example of, preventing external scripts not related to Power Pages, and preventing connecting/sending data outside your site, while still allowing Google Material UI icons to be used in the site.
Note: I have not disabled inline scripts and eval (‘unsafe-inline’ & ‘unsafe-eval‘) as this is only a sample policy to get started. Ideally, you would want to remove both and also turn on ‘nonce’ to enhance your site security even further and strengthen the prevention of script injection attacks. But depending on the components and features used, by restricting them you might break existing functionality.
By having the ‘nonce’ attribute added only the scripts rendered by the server that have the correct nonce value and the scripts from trusted sources would be allowed, but by doing so you can have consequences to your existing customisations or some 3rd party components (for example, onclick events added directly via HTML markup and not via event binding will fail due to the restriction):
So try this carefully and remediate accordingly.
This is just a starter example, and obviously there will be further enhancements needed. Also, you might want to restrict the *.microsoft.com domains to specific subdomains.
The CSP Configuration
Here’s the CSP configuration I with the above-mentioned settings:
default-src 'self';
form-action 'self';
frame-ancestors 'self';
object-src 'none';
base-uri 'self';
font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com https://*.sharepointonline.com http://*.cdn.office.net https://*.microsoft.com content.powerapps.com;
script-src 'self' 'unsafe-eval' 'unsafe-inline' https://*.microsoft.com content.powerapps.com;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://*.microsoft.com content.powerapps.com;
img-src 'self' https://content.powerapps.com https://*.microsoft.com;
connect-src 'self' https://content.powerapps.com https://*.microsoft.com;
frame-src 'self';To use this in your Power Pages site, create or edit the HTTP/Content-Security-Policy site setting.
You can also edit those settings via the new preview feature (Security/Advanced settings):
If the settings do not take effect immediately even if you clear the site cache and settings cache, you might want to restart your website.
Results
If your website tries to load an external script or font, or run any action not allowed by the policy, you will get errors in the console (open the browser developer tools to see – F12 key):
If there are sources you missed to add in your settings, you can use those errors logged to troubleshoot.
Conclusion
By sharing this configuration, I hope to provide a useful starting point for anyone looking to enhance their site’s security while maintaining the necessary functionality for Power Pages. Feel free to add your enhancement suggestions in the comments.
References
Content Security Policy (CSP) reference guide
Turn on ‘nonce’ – Microsoft Learn
Manage your site’s Content Security Policy – Microsoft Learn
