Our Angular app uses keycloak-angular to handle our connections to Keycloak. Everything works fine except for an iframe in which we display a pdf file loaded from our backend. The pdf is set straight as the source of the iframe and the code is very minimal:
<iframe [src]="docSrc | safe:5“ width="100%" height="100%"></iframe>
docSrc is referencing to our https REST endpoint.
It seems the request of iframe is not intercepted by the keycloak-angular or keycloak-js, as there is no preflight request happening and no token used.
We use Angular 15 with: "keycloak-angular": "^13.1.0" "keycloak-js": "^21.1.2"
Following the example of the iframe in the silent-check-sso.html (from the keycloak-angular lib manual) I added this script to our iframe, but without any success:
<iframe [src]="docSrc | safe:5“ width="100%" height="100%">
<html>
<body>
<script>
parent.postMessage(location.href, location.origin);
</script>
</body>
</html>
</iframe>
Request Header:
GET /rest-service/pdfDocuments/1663 HTTP/1.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding: gzip, deflate, br
Accept-Language: de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7
Connection: keep-alive
Cookie: _ga=EXAMPLE....
Host: apigateway.test.com
Referer: https://test-dev.test.com/
Sec-Fetch-Dest: iframe
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-site
Sec-Fetch-User: ?1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
sec-ch-ua: "Not.A/Brand";v="8", "Chromium";v="114", "Google Chrome";v="114"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"
Response Header:
HTTP/1.1 401
Date: Fri, 21 Jul 2023 07:15:08 GMT
Expires: 0
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Frame-Options: DENY
WWW-Authenticate: Bearer
Pragma: no-cache
Content-Security-Policy: frame-ancestors 'self' https://test-dev.test.com/ https://test-dev.test.com/* apigateway.test.com;
Keep-Alive: timeout=60
X-Content-Type-Options: nosniff
X-XSS-Protection: 0
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Transfer-Encoding: chunked
With Keycloak-security deactivated the iframe works flawless and the pdf is displayed.
Do you have any hint how to "activate" the keycloak-angular handling for our iframe?
Assuming the pdf comes from one of the URLs whitelisted in Content-Security-Policy, that should be ok.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP#example_2
X-Frame-Options: DENYseems problematic though.https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
Try hanging X-Frame-Options. You can modify the X-Frame-Options in your backend server to SAMEORIGIN or even remove it completely, but this can pose a security risk, and it's typically not recommended.