This article provides details on configuring the content security policy (CSP) for Freshdesk portal layout customization. CSP is a security layer that protects your Freshdesk portal from attacks.
To configure CSP:
Log in to Freshdesk as admin.
If you have a Classic and Mint Theme (portal v1), go to Admin > Portals >Customize portals and select Layout & pages.
Under Head, enter the content security policy syntax.
<meta http-equiv="Content-Security-Policy" content="script-src example1.scriptsource.com example2.scriptsource.com; style-src example1.stylesource.com example2.stylesource.com; frame-src example1.framesource.com example2.framesource.com; connect-src example1.connectsrc.com example2.connectsrc.com" />
Note:For portal Classic and Mint Theme, add 'unsafe-eval' in script & style source.
Example: <meta http-equiv="Content-Security-Policy" content="style-src *.freshdesk.com *.freshworks.com https://fonts.googleapis.com/css https://*.freshchat.com/ 'unsafe-inline' example1.stylesource.com example2.stylesource.com; connect-src https://*.freshdesk.com https://*.freshworks.com https://www.google-analytics.com/ example1.connectsrc.com" />
If you have a Marina theme (portal v2), go to Admin > Portals > Customize and select Edit theme.
Click on the Pages tab.
Under Head, enter the content security policy syntax.
<meta http-equiv="Content-Security-Policy" content="script-src example1.scriptsource.com example2.scriptsource.com; style-src example1.stylesource.com example2.stylesource.com; frame-src example1.framesource.com example2.framesource.com; connect-src example1.connectsrc.com example2.connectsrc.com" />- After making the changes, Save and Publish.
You can check if the CSP layer is reflected in your portal by checking the sources. To find the sources on the portal, right-click anywhere on the portal and select Inspect > Select Elements tab.
List of default sources:
Along with default sources, add the sources based on your customizations to avoid disruptions in the flow.
Script source: "*.freshdesk.com *.freshworks.com https://s3.amazonaws.com/assets.freshdesk.com/ https://s3.amazonaws.com/cdn.freshdesk.com
https://www.google.com/recaptcha/api.js https://www.recaptcha.net/recaptcha/ https://www.gstatic.com/recaptcha/ https://www.google.com/recaptcha/enterprise.js
https://www.google-analytics.com/analytics.js https://static.freshdev.io/fdk/2.0/assets/fresh_parent.js https://s3.amazonaws.com/assets.freshdesk.com/widget/freshwidget.js https://www.dropbox.com/static/api/1/dropbox.js https://www.dropbox.com/static/api/2/dropins.js https://cdn.freshbots.ai/assets/share/js/freshbots.min.js
https://cdn.euc-freshbots.ai/assets/share/js/freshbots.min.js https://cdn.in-freshbots.ai/assets/share/js/freshbots.min.js https://cdn.au-freshbots.ai/assets/share/js/freshbots.min.js
https://*.freshchat.com/ 'unsafe-inline'"
font source: "*.freshdesk.com *.freshworks.com https://fonts.googleapis.com/css https://fonts.gstatic.com/ data:"
style source: "*.freshdesk.com *.freshworks.com https://fonts.googleapis.com/css https://*.freshchat.com/ 'unsafe-inline'"
connect source: "https://*.freshdesk.com https://*.freshworks.com https://www.google-analytics.com/"
frame source: "https:"
image source: "https: data: blob:"
Note: For accounts with cname domains, add the domain name in all the source tags. Ex: image source: "https: data: blob: https://cname.com/ "
The security of your support portal is enhanced by implementing a Content Security Policy (CSP) with a nonce attribute.
What is a Nonce?
A nonce (number used once) is a unique, randomly generated value that:
Is added to your portal’s CSP header.
Must be included in all approved inline <script> and <style> tags.
Helps block unauthorized scripts and styles, protecting against cross-site scripting (XSS) attacks.
Only scripts and styles with the correct nonce value will run.
Impact on Portal Customization
All style and script tags in the Marina theme include a nonce.
When you add custom scripts or styles, make sure to:
Add the nonce attribute.
Use the correct value: nonce="{{portal.nonce}}".
To add a nonce attribute to your portal theme,
Go to Admin > Portals > <Choose the respective portal that requires changes>
In the Appearance tab, click Clone and Edit theme
In the Pages tab, click Insert Placeholder
Under Content Security Policy, click Nonce. A nonce="{{portal.nonce}}" will appear where you have the cursor.
Meta Tag Changes
When configuring CSP for your portal, add these keywords:
script-src 'strict-dynamic' 'nonce-{{portal.nonce}}';
style-src 'nonce-{{portal.nonce}}';
style-src-attr 'unsafe-inline';
How to Add the Nonce Attribute
Example:
<script src="/path/to/your/script.js" nonce="{{portal.nonce}}"></script>
<style nonce="{{portal.nonce}}">
.custom-class {
color: blue;
}
</style>
Common Issues & Fixes
1. Blocked Inline Styles
Inline styles (like style="color:red") will be blocked without a nonce.
Copy-pasted tables with inline styling may lose formatting.
Inline images with styles (e.g., width/height) might not display correctly.
Rich-text editors may not render inline styling as expected.
Solution:
Allow inline styles by adding 'unsafe-inline' under style-src-attr in the CSP meta tag:
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline' 'nonce-{{portal.nonce}}' 'unsafe-eval' 'strict-dynamic';
style-src 'self' 'nonce-{{portal.nonce}}'; style-src-attr 'unsafe-inline';">
2. Inline Event Handlers & javascript: URIs Blocked
Inline events like onclick or href="javascript:..." will no longer work.
Fix: Use event listeners instead.
Before (Blocked):
<button onclick="alert('Hello');">Click Me</button>
<a href="javascript:console.log('Run');">Execute</a>
After (Works):
<button id="myButton">Click Me</button>
<a href="#" id="myLink">Execute</a>
<script nonce="{{portal.nonce}}">
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('myButton')?.addEventListener('click', () => alert('Hello!'));
document.getElementById('myLink')?.addEventListener('click', (e) => {
e.preventDefault();
console.log('Event triggered');
});
});
</script>
Impact on Widgets
When enabling widgets on a portal that uses CSP with a nonce, you must include the nonce in the widget scripts.
Help Widget
<script nonce="{{portal.nonce}}">
window.fwSettings = {
'widget_id': 159000000494,
'cspNonce': "{{portal.nonce}}"
};
!function(){if("function"!=typeof window.FreshworksWidget){
var n=function(){n.q.push(arguments)};n.q=[],window.FreshworksWidget=n}}()
</script>
<script type='text/javascript' nonce="{{portal.nonce}}"
src='https://widget.freshworks.com/widgets/159000000494.js'
async defer>
</script>
Chat Widget
<script nonce="{{portal.nonce}}">
window.fcWidgetMessengerConfig = { cspNonce: "{{portal.nonce}}" }
</script>
<script nonce="{{portal.nonce}}"
src='//fw-cdn.com/14371184/6121115.js'
chat='true'>
</script>
Chat Widget (Old Version)
<script nonce="{{portal.nonce}}">
function initFreshChat() {
window.fcWidget.init({
token: "***********",
host: "https://integratechat5.freshpori.com",
cspNonce: "{{portal.nonce}}"
});
}
function initialize(i,t){
var e;
i.getElementById(t) ? initFreshChat() :
((e=i.createElement("script")).id=t,e.async=!0,
e.src="https://integratechat5.freshpori.com/js/widget.js",
e.onload=initFreshChat,i.head.appendChild(e))
}
function initiateCall(){
initialize(document,"Freshchat-js-sdk")
}
window.addEventListener ?
window.addEventListener("load",initiateCall,!1) :
window.attachEvent("load",initiateCall,!1);
</script>