0

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?

bogilfip
  • 1
  • 1
  • What do your request headers say? It might be security related with Content-Security-Policy, X-Frame-Options disallowing the embedding of iframes all together? – Joosep Parts Jul 20 '23 at 12:48
  • Dear Joosep, thanks for your comment! I added the request and response headers to my question. Generally the iframe works. Without Keycloak security everything works fine. – bogilfip Jul 21 '23 at 07:43

1 Answers1

0

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: DENY seems 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.

Joosep Parts
  • 5,372
  • 2
  • 8
  • 33
  • Dear Joosep. We changed our Spring Security settings and now the Header contains X-Frame-Options: SAMEORIGIN. Unfortunately the Angular-keycloak Interceptor is still not doing a preflight request or using the token – bogilfip Jul 25 '23 at 08:58