API Gateway: OAuth authorization server cannot use external CSS


Article ID: 126436


Updated On:


STARTER PACK-7 CA Rapid App Security CA API Gateway


When customizing the OTK authorization server you may wish to use external stylesheets. However, when doing so the CSS will not be rendered.



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:;


Component: APIGTW


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