Introduction
A Content Security Policy (CSP) is a security standard that provides an additional layer of protection from cross-site scripting (XSS), clickjacking, and other code injection attacks. It is a defensive measure against any attacks that rely on executing malicious content in a trusted web context, or other attempts to circumvent the same-origin policy.
webMethods Developer Portal is protected with CSP. So if you wanted too use the custom font (refer Customization section in documentation) or if you want to use SAML SSO with redirect binding then there would be set of CSP issues reported in browser console. The browser would not allow to load the scripts. In this tutorial you will learn how to configure the CSP so that external URL can be added as trusted source.
Pre-requisite
- Basic knowledge of CSP
- Basic knowledge of webMethods Developer Portal
Steps to follow
In this tutorial we will try adding custom font, so it will be get restricted by browser and we would see the steps to enable it.
Step 1: Adding font in theme
Go to Administration → Themes, click customization button of your current theme
Navigate to Theme → Font subsection
Provide the external font URL and font name
Step 2: Activate theme
Now activate the theme
After activating you’ll notice font’s are not loaded in appropriate style. If you check the browser developer console it would have reported unable to load the font script due to CSP policy
Step 3: Adding the external font URL as trusted source
1. Shutdown the webMethods Developer Portal
2. Based on the deployment there are different ways to edit the CSP Policy
2.A. On-premise i.e Local installation
Navigate to <Installation_Location>/profiles/CTP/configuration you would find dpo_wrapper.conf open to edit
Add following java property [wrapper.java.additional.2006=-Dportal.server.config.headers.content-security-policy=“default-src ‘self’; img-src * ‘self’ data:; object-src ‘none’; child-src * mailto: tel: ms-word:; font-src ‘self’ https://fonts.gstatic.com; script-src ‘self’; style-src ‘self’ ‘unsafe-inline’ https://fonts.goggleapis.com; form-action ‘self’ *.okta.com; frame-ancestors ‘self’;”]. In this example for font i’ve added google font URL similarly for SAML SSO case i’ve added Okta URL
2.B. Docker Deployment
In docker deployment, as part of docker run cmd you can pass the CSP value as environment variable ex:
docker run -d -e SPRING_ELASTICSEARCH_REST_URIS="http://lean-elastic:9200" -e PORTAL_SERVER_CONFIG_HEADERS_CONTENT_SECURITY_POLICY="default-src 'self'; img-src * 'self' data:; object-src 'none'; child-src * mailto: tel: ms-word:; font-src 'self' https://fonts.gstatic.com; script-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; form-action 'self' *.okta.com; frame-ancestors 'self';" --name portalbundle --net lean-network -p 80:8083 -p 443:8084 kub-sic/devportal:10.15.0.0.126
3. Start the webMethods Developer Portal
Step 4: Validate the change
Open the developer tool in browser you should be able to see the CSP you provided as part of response headers
Now activate the theme
The font should be loaded properly. You won’t be seeing CSP error in browser console
