API Gateway: OAuth authorization server cannot use external CSS

Document ID : KB000126436
Last Modified Date : 08/02/2019
Show Technical Document Details
Issue:
When customizing the OTK authorization server you may wish to use external stylesheets. However, when doing so the CSS will not be rendered.

 
Cause:
This is caused by the browser enforcing the Content Security Policy set by OTK policy.
The Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks.

The OTK adds a the CSP header in the OTK Security Header Extension policy. The default value below,
allows allows inline style sheets to be used.

default-src 'self'; script-src *.googleapis.com 'unsafe-inline'; img-src * data:; style-src 'unsafe-inline'; font-src * data:;
Resolution:
To work around this

1) Open the OTK Security Header Extension policy
2) Edit the CSP header
3) In the value, look for the section highlighted below

default-src 'self'; script-src *.googleapis.com 'unsafe-inline'; img-src * data:; style-src 'unsafe-inline'; font-src * data:;

4) The directive allows a source host and port to be added. In this case you can add in the source of the CSS.
i.e: If our source CSS is hosted on example.com:6888 we can add it as follows:

default-src 'self'; script-src *.googleapis.com 'unsafe-inline'; img-src * data:; style-src https://*.example.com:6888 'unsafe-inline'; font-src * data:;

5) Save and activate the policy
Additional Information:
https://docops.ca.com/ca-api-management-oauth-toolkit/4-3/en/customizing-the-oauth-toolkit/configure-the-authorization-server