huggingface
iframe throws 403 error when sending a message
Issue
Use case: I would like to embed the Chat UI in an iframe in Qualtrics.
Issue: Sending a message from the Chat UI in an iframe results in 403 error with the message below.
You don't have access to this conversation. If someone gave you this link, ask them to use the 'share' feature instead.
When the disclaimer was shown, a new tab was opened after dismissing it. Thus, I removed the disclaimer hoping that Chat UI in the iframe would work. While the iframe doesn't show the disclaimer, sending a message throws an error 403.
Unsuccessful fix attempts
As suggested in https://github.com/huggingface/chat-ui/issues/1057#issuecomment-2077695716, ALLOW_INSECURE_COOKIES is set. I also tried setting PUBLIC_ORIGIN to both the URL of my self-hosted Chat UI and to the Qualtrics website that shows the iframe, but none worked—i.e., the 403 error is still shown.
.env.local
ALLOW_INSECURE_COOKIES=true
Related
- Not in iframe - https://github.com/huggingface/chat-ui/issues/1057
- iframe compatibility - https://github.com/huggingface/chat-ui/issues/349
- Mention of the new tab solution - https://github.com/huggingface/chat-ui/issues/1003#issuecomment-2056851928
- Accepting disclaimer opens new tab - https://github.com/huggingface/chat-ui/pull/580
Errors shown in the browser console, where myqualtrics and mychatui are placeholders:
Access to internal resource at 'https://myqualtrics/chatui/manifest.json' from origin 'https://mychatui' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
SecurityError: Blocked a frame with origin from accessing a cross-origin frame
Any chance you could host chat-ui and qualtrics on the same domain name ? Otherwise the session cookie for the embedded iframe will be treated as a third party cookie which will break auth (and give you the 403 error you're seeing)
We were having similar issues between the space on the hub displaying the iframe: https://huggingface.co/spaces/huggingchat/chat-ui/ and the chat-ui space itself: https://huggingchat-chat-ui.static.hf.space/
Unfortunately, hosting the two on the same domain name will not be possible.
Where is the error coming from? Are there any alternatives available?
If you point me in the right direction, I could take a look at a potential PR to fix this issue in chat-ui.
This line is confusing me.
sameSite: dev || env.ALLOW_INSECURE_COOKIES === "true" ? "lax" : "none", secure: !dev && !(env.ALLOW_INSECURE_COOKIES === "true")
Shouldn't the none be strict or none and lax be swapped. And if we are using none shouldn't secure always be true.
It works for me with the following change in code:
sameSite: dev || env.ALLOW_INSECURE_COOKIES === "true" ? "none" : "lax", secure: true,
in auth.ts, instead of:
sameSite: dev || env.ALLOW_INSECURE_COOKIES === "true" ? "lax" : "none", secure: !dev && !(env.ALLOW_INSECURE_COOKIES === "true"),