query.live fetch headers must contain "accept: text/event-stream" so bypass MITM anti-viruses and proxies
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
Describe the bug
This issue continues old chain of proxy-related SSE problems: https://github.com/sveltejs/kit/issues/15921
So I won't describe all this in here, it is a bit redundant.
I finally managed to reproduce those users problems: Some antiviruses and/or MITM proxies breaks query.live and make the requests hung forever.
The solution is quite simple: SSE requests must contain accept: text/event-stream header. That's all.
I have tested it on the real Kaspersky MITM traffic analyzer - it works.
The point is sveltekit is using fetch instead of EventSource to simplify some thing (personally I did the PR), but we do not imitate it's behavior. I compared the headers and the only difference was that EventSource adds accept: text/event-stream header while fetch keeps accept: *.
The change is in this small file https://github.com/sveltejs/kit/blob/e76b3d778bacb429fdb40a41b13ff04b54d97c1f/packages/kit/src/runtime/client/remote-functions/query-live/iterator.js#L28
But there I see https://github.com/sveltejs/kit/blob/e76b3d778bacb429fdb40a41b13ff04b54d97c1f/packages/kit/src/runtime/client/remote-functions/query-live/iterator.js#L45 which is, in fact, will never be reached if we add accept.
I'm not sure if SSE response could ever make a redirect with a different content-type. Originally EventSource would not accept this behavior.
So, what do you think? Can we add the header and what to do with the redirect?
Reproduction
As as temporary solution I'm using this snippet in hooks.client:
(() => {
const _fetch = window.fetch.bind(window);
window.fetch = (input, init = {}) => {
const url = typeof input === 'string' ? input : input instanceof Request ? input.url : String(input);
if (url.includes('/remote/')) {
const headers = new Headers(init.headers ?? (input instanceof Request ? input.headers : undefined));
headers.set('Accept', 'text/event-stream');
init = {...init, headers};
console.log('[fetch patch] Accept: text/event-stream', url);
}
return _fetch(input, init);
};
console.log('[fetch patch] enabled');
})();
Logs
System Info
---
Severity
serious, but I can work around it
Additional Information
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in packages/kit/src/runtime/client/remote-functions/query-live/iterator.js, especially the fetch around line 28 and the response handling around line 45. Check how adding the Accept header affects redirects and content-type handling, then verify that query.live requests send text/event-stream and still handle valid responses correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- api, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 74/100