Auth cookie and iframe

Ionic Framework
1

Hi,

I have an app where authentication is cookie based. The auth request is done via XHR using the HttpClient. I can call for the login API and get the response successfully. The API response also returns a Set-Cookie header.

In other parts of the app, there are iframe embedded to load content from the project’s website.

I can see the data across different pages loaded via iframe are in-sync. For example:

Load /product-1 in iframe - I add this product to cart
Load /product-2 in iframe - I add this product to cart
Load /cart in iframe - I can see product 1 and 2 in the cart (even when I restart the app)

The problem comes when I try to access the member page via iframe. It seems the iframe doesn’t recognize that I am logged in when I sign in via the API (as per above).

Both the API and the website are on same domain. My guess is due to browser security, the iframe is kept separate from the parent window.

Reason for using iframe is the content needs to be loaded within a tab due to the look and feel of the app.

Questions:

  1. Is it possible to inject cookies into the iframe? Since the API returns a “Set-Cookie” header, I am thinking of retrieving from the XHR response and then try to inject into the iframe. Is this possible? Not sure if withCredentials: true will help in this case, since I am using iframe to load some content pages.

  2. Alternatively, would it be better for the API to return a short-lived token (e.g. 123) in its response and using this response, pass it over to the iframe URL (e.g. /member?token=123). And in the iframe, the website to detect this and sign in the user to the session. This should be something like JWT. But I feel this is not secure too.

I do not have control over the API. Are there any other options available?

1 Like