Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(helper/proxy): introduce proxy helper #3589

Open
wants to merge 16 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions jsr.json
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@
"./testing": "./src/helper/testing/index.ts",
"./dev": "./src/helper/dev/index.ts",
"./ws": "./src/helper/websocket/index.ts",
"./proxy": "./src/helper/proxy/index.ts",
"./utils/body": "./src/utils/body.ts",
"./utils/buffer": "./src/utils/buffer.ts",
"./utils/color": "./src/utils/color.ts",
Expand Down
8 changes: 8 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -383,6 +383,11 @@
"types": "./dist/types/helper/conninfo/index.d.ts",
"import": "./dist/helper/conninfo/index.js",
"require": "./dist/cjs/helper/conninfo/index.js"
},
"./proxy": {
"types": "./dist/types/helper/proxy/index.d.ts",
"import": "./dist/helper/proxy/index.js",
"require": "./dist/cjs/helper/proxy/index.js"
}
},
"typesVersions": {
Expand Down Expand Up @@ -587,6 +592,9 @@
],
"conninfo": [
"./dist/types/helper/conninfo"
],
"proxy": [
"./dist/types/helper/proxy"
]
}
},
Expand Down
152 changes: 152 additions & 0 deletions src/helper/proxy/index.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
import { Hono } from '../../hono'
import { proxyFetch } from '.'

describe('Proxy Middleware', () => {
describe('proxyFetch', () => {
beforeEach(() => {
global.fetch = vi.fn().mockImplementation((req) => {
if (req.url === 'https://example.com/compressed') {
return Promise.resolve(
new Response('ok', {
headers: {
'Content-Encoding': 'gzip',
'Content-Length': '1',
'Content-Range': 'bytes 0-2/1024',
'X-Response-Id': '456',
},
})
)
} else if (req.url === 'https://example.com/uncompressed') {
return Promise.resolve(
new Response('ok', {
headers: {
'Content-Length': '2',
'Content-Range': 'bytes 0-2/1024',
'X-Response-Id': '456',
},
})
)
}
return Promise.resolve(new Response('not found', { status: 404 }))
})
})

it('compressed', async () => {
const app = new Hono()
app.get('/proxy/:path', (c) =>
proxyFetch(
new Request(`https://example.com/${c.req.param('path')}`, {
headers: {
'X-Request-Id': '123',
'Accept-Encoding': 'gzip',
},
})
)
)
const res = await app.request('/proxy/compressed')
const req = (global.fetch as ReturnType<typeof vi.fn>).mock.calls[0][0]

expect(req.url).toBe('https://example.com/compressed')
expect(req.headers.get('X-Request-Id')).toBe('123')
expect(req.headers.get('Accept-Encoding')).toBeNull()

expect(res.status).toBe(200)
expect(res.headers.get('X-Response-Id')).toBe('456')
expect(res.headers.get('Content-Encoding')).toBeNull()
expect(res.headers.get('Content-Length')).toBeNull()
expect(res.headers.get('Content-Range')).toBe('bytes 0-2/1024')
})

it('uncompressed', async () => {
const app = new Hono()
app.get('/proxy/:path', (c) =>
proxyFetch(
new Request(`https://example.com/${c.req.param('path')}`, {
headers: {
'X-Request-Id': '123',
'Accept-Encoding': 'gzip',
},
})
)
)
const res = await app.request('/proxy/uncompressed')
const req = (global.fetch as ReturnType<typeof vi.fn>).mock.calls[0][0]

expect(req.url).toBe('https://example.com/uncompressed')
expect(req.headers.get('X-Request-Id')).toBe('123')
expect(req.headers.get('Accept-Encoding')).toBeNull()

expect(res.status).toBe(200)
expect(res.headers.get('X-Response-Id')).toBe('456')
expect(res.headers.get('Content-Length')).toBe('2')
expect(res.headers.get('Content-Range')).toBe('bytes 0-2/1024')
})

it('proxySetRequestHeaders option', async () => {
const app = new Hono()
app.get('/proxy/:path', (c) =>
proxyFetch(
new Request(`https://example.com/${c.req.param('path')}`, {
headers: {
'X-Request-Id': '123',
'X-To-Be-Deleted': 'to-be-deleted',
'Accept-Encoding': 'gzip',
},
}),
{
proxySetRequestHeaders: {
'X-Request-Id': 'abc',
'X-Forwarded-For': '127.0.0.1',
'X-Forwarded-Host': 'example.com',
'X-To-Be-Deleted': undefined,
},
}
)
)
const res = await app.request('/proxy/compressed')
const req = (global.fetch as ReturnType<typeof vi.fn>).mock.calls[0][0]

expect(req.url).toBe('https://example.com/compressed')
expect(req.headers.get('X-Request-Id')).toBe('abc')
expect(req.headers.get('X-Forwarded-For')).toBe('127.0.0.1')
expect(req.headers.get('X-Forwarded-Host')).toBe('example.com')
expect(req.headers.get('X-To-Be-Deleted')).toBeNull()
expect(req.headers.get('Accept-Encoding')).toBeNull()

expect(res.status).toBe(200)
expect(res.headers.get('X-Response-Id')).toBe('456')
expect(res.headers.get('Content-Encoding')).toBeNull()
expect(res.headers.get('Content-Length')).toBeNull()
expect(res.headers.get('Content-Range')).toBe('bytes 0-2/1024')
})

it('proxySetRequestHeaderNames option', async () => {
const app = new Hono()
app.get('/proxy/:path', (c) =>
proxyFetch(
new Request(`https://example.com/${c.req.param('path')}`, {
headers: {
'X-Request-Id': '123',
'Accept-Encoding': 'gzip',
},
}),
{
proxyDeleteResponseHeaderNames: ['X-Response-Id'],
}
)
)
const res = await app.request('/proxy/compressed')
const req = (global.fetch as ReturnType<typeof vi.fn>).mock.calls[0][0]

expect(req.url).toBe('https://example.com/compressed')
expect(req.headers.get('X-Request-Id')).toBe('123')
expect(req.headers.get('Accept-Encoding')).toBeNull()

expect(res.status).toBe(200)
expect(res.headers.get('X-Response-Id')).toBeNull()
expect(res.headers.get('Content-Encoding')).toBeNull()
expect(res.headers.get('Content-Length')).toBeNull()
expect(res.headers.get('Content-Range')).toBe('bytes 0-2/1024')
})
})
})
82 changes: 82 additions & 0 deletions src/helper/proxy/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
/**
* @module
* Proxy Helper for Hono.
*/

// Typical header names for requests for proxy use
type ProxyRequestHeaderName = 'X-Forwarded-For' | 'X-Forwarded-Proto' | 'X-Forwarded-Host'

interface ProxyRequestInit extends RequestInit {
/**
* Headers that are overwritten in requests to the origin server.
* Specify undefined to delete the header.
*/
proxySetRequestHeaders?: Partial<Record<ProxyRequestHeaderName, string>> &
Record<string, string | undefined>
/**
* Headers included in the response from the origin server that should be removed in the response to the client.
*/
proxyDeleteResponseHeaderNames?: string[]
}

interface ProxyFetch {
(input: RequestInfo | URL, init?: ProxyRequestInit): Promise<Response>
(input: string | URL | globalThis.Request, init?: ProxyRequestInit): Promise<Response>
}

/**
* Fetch API wrapper for proxy.
* The parameters and return value are the same as for `fetch` (except for the proxy-specific options).
*
* The “Accept-Encoding” header is replaced with an encoding that the current runtime can handle.
* Unnecessary response headers are deleted and a Response object is returned that can be returned
* as is as a response from the handler.
*
* @example
* ```ts
* app.get('/proxy/:path', (c) => {
* return proxyFetch(new Request(`http://${originServer}/${c.req.param('path')}`, c.req.raw), {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like not using new Request() style like this:

app.get('/proxy/:path', (c) => {
  return proxyFetch(`https://example.com/${c.req.param('path')}`, {
    ...c.req.raw,
    proxySetRequestHeaders: {
      'X-Forwarded-For': '127.0.0.1',
    },
  })
})

Then, if you have the following code:

app.get('/proxy/:path', (c) =>
  proxyFetch(
    new Request(`https://example.com/${c.req.param('path')}`, {
      headers: {
        'X-Request-Id': '123',
        'Accept-Encoding': 'gzip',
      },
    }),
    {
      proxyDeleteResponseHeaderNames: ['X-Response-Id'],
    }
  )
)

you can also write it with not using new Request() style:

app.get('/proxy/:path', (c) =>
  proxyFetch(`https://example.com/${c.req.param('path')}`, {
    headers: {
      'X-Request-Id': '123',
      'Accept-Encoding': 'gzip',
    },
    proxyDeleteResponseHeaderNames: ['X-Response-Id'],
  })
)

These are short and user does not have to call new Request(). Both are okay, but I would like to write all cases in the code or examples with not using new Request() style. What do you think of it?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yusukebe
Sorry for the late reply. I understand your point.

I also think that it would be better not to show the raw part of c.req.raw if possible. I think that there is a risk in the statement that ‘all headers are transferred by default’, but I think that it would be best not to write raw.

And, because proxySetRequestHeaders and proxyDeleteResponseHeaderNames are also difficult to understand, I feel that it would be good to be able to write the following for proxies for GET requests.

app.get('/proxy/:path', (c) => {
  return proxyFetch(`http://${originServer}/${c.req.param('path')}`, {
    headers: {
      ...c.req.header(), // optional, specify only when header forwarding is truly necessary.
      'X-Forwarded-For': '127.0.0.1',
      'X-Forwarded-Host': c.req.header('host'),
      Authorization: undefined, // do not propagate request headers contained in c.req.header('Authorization')
    },
  }).then((res) => {
    res.headers.delete('Cookie')
    return res
  })
})

I wish it were possible to write a proxy for arbitrary requests, including POST, in a simpler way.

* proxySetRequestHeaders: {
* 'X-Forwarded-For': '127.0.0.1',
* 'X-Forwarded-Host': c.req.header('host'),
* Authorization: undefined, // do not propagate request headers contained in c.req.raw
* },
* proxyDeleteResponseHeaderNames: ['Cookie'],
* })
* })
* ```
*/
export const proxyFetch: ProxyFetch = async (input, proxyInit) => {
const {
proxySetRequestHeaders = {},
proxyDeleteResponseHeaderNames = [],
...requestInit
} = proxyInit ?? {}

const req = new Request(input, requestInit)
req.headers.delete('accept-encoding')

for (const [key, value] of Object.entries(proxySetRequestHeaders)) {
if (value !== undefined) {
req.headers.set(key, value)
} else {
req.headers.delete(key)
}
}

const res = await fetch(req)
const resHeaders = new Headers(res.headers)
if (resHeaders.has('content-encoding')) {
resHeaders.delete('content-encoding')
// Content-Length is the size of the compressed content, not the size of the original content
resHeaders.delete('content-length')
}
for (const key of proxyDeleteResponseHeaderNames) {
resHeaders.delete(key)
}

return new Response(res.body, {
...res,
headers: resHeaders,
})
}
Loading