API Gateway: OAuth authorization server cannot use external CSS

book

Article ID: 126436

calendar_today

Updated On:

Products

STARTER PACK-7 CA Rapid App Security CA API Gateway

Issue/Introduction

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

Environment

Release:
Component: APIGTW

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