Cloudflare Rewritter not working properly on hono 3 and superior #1486

Stuntback46 · 2023-09-20T17:08:50Z

Stuntback46
Sep 20, 2023

import { Hono } from 'hono'

const app = new Hono()

app.use('*', async (c, next) => {
  await next()
  class Rewriter {
    async element(element: Element) {
    const html = test;
        element.replace(html, {html:true})
    }
  }
  const rewriter = new HTMLRewriter().on('img', new Rewriter())
  c.res = rewriter.transform(c.res)
})

app.get('*', async (c, next) => {
  const res = await fetch(c.req.raw)
  return new Response(res.body, res)
})
// app.get('*', async(c) => {
//   const res = await fetch(c.req.raw)
//   const test = await res.text()
//   return c.html(
//     test
//   )
// })

const test = `Long Lorem ipsum`

export default app

If I run that code the Long Lorem ipsum get cut and if I comment app.get('*', async (c, next) => { const res = await fetch(c.req.raw) return new Response(res.body, res) }) and uncomment // app.get('*', async(c) => { // const res = await fetch(c.req.raw) // const test = await res.text() // return c.html( // test // ) // }) It work but I am loosing the server header

Here an example of what the server answer:

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>HTML 5 Boilerplate</title>
		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link
			href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,700;1,800&display=swap"
			rel="stylesheet"
		/>
	</head>

	<body>
        <img src="/static/images/hono-title.png" width="300" />
		<img src="/static/images/hono-title.png" width="300" />
		<img src="/static/images/hono-title.png" width="300" />
		<img src="/static/images/hono-title.png" width="300" />
		<img src="/static/images/hono-title.png" width="300" />
		<img src="/static/images/hono-title.png" width="300" />
		<img src="/static/images/hono-title.png" width="300" />
		<img src="/static/images/hono-title.png" width="300" />
	</body>
</html>

Could you please help, this was working with hono 2.5.8 and except rewriting the body I should not modify the server response.

yusukebe · 2023-09-20T22:22:43Z

yusukebe
Sep 20, 2023
Maintainer

Hi @Stuntback46

That seems to be working well in my environment. Is this a wrong way to reproduce?

0 replies

Stuntback46 · 2023-09-20T22:46:17Z

Stuntback46
Sep 20, 2023
Author

Hello, @yusukebe , thanks for your reply, basically the issue happen when the server behind answer with a content length so the page stop loading once the content length reached (If you rewrite we lot of content for example).
Before when rewritten the header Content-Length was automatically removed I suppose and the Transfer-Encoding automatically set.
So I was not understanding why the content on the response is cut.

I did a dirty solution like that and it works, the issue is we modify the server response even when we did not rewrite anything:

      app.get('*', async(c) => {
        const res = await fetch(c.req.raw);
        const headers = new Headers(res.headers);
        headers.delete("Content-Length");
        headers.append("Transfer-Encoding", "chunked");
        const myInit = {...res, headers:headers};
        const response = new Response(res.body, myInit);
        return response
      })

So to reproduce you need to check if you answer with Content-Length header and need to inject lot of content for example a whole paragraph of text.

Thanks again for your help!

2 replies

Stuntback46 Oct 16, 2023
Author

@yusukebe any Idea?

yusukebe Oct 16, 2023
Maintainer

Hmm, if I had a project to reproduce it, I could answer, but I don't have one right now.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hono

Cloudflare Rewritter not working properly on hono 3 and superior #1486

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Hono

Cloudflare Rewritter not working properly on hono 3 and superior #1486

Stuntback46 Sep 20, 2023

Replies: 2 comments · 2 replies

yusukebe Sep 20, 2023 Maintainer

Stuntback46 Sep 20, 2023 Author

Stuntback46 Oct 16, 2023 Author

yusukebe Oct 16, 2023 Maintainer

Stuntback46
Sep 20, 2023

Replies: 2 comments 2 replies

yusukebe
Sep 20, 2023
Maintainer

Stuntback46
Sep 20, 2023
Author

Stuntback46 Oct 16, 2023
Author

yusukebe Oct 16, 2023
Maintainer