feat(secure-headers): enable to set nonce in CSP #2577

usualoma · 2024-04-30T11:40:57Z

Usage

_middleware.ts

import { createRoute } from "honox/factory";
import { secureHeaders, NONCE } from "hono/secure-headers";

export default createRoute(
  secureHeaders({
    contentSecurityPolicy: {
      scriptSrc: [NONCE, 'https://allowed1.example.com', 'https://allowed2.example.com'],
    },
  })
);

_renderer

import { Style } from "hono/css";
import { jsxRenderer } from "hono/jsx-renderer";
import { Script } from "honox/server";

export default jsxRenderer(
  ({ children, title }, c) => {
    return (
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
          />
          <title>{title}</title>
          <Style />
        </head>
        <body>
          {children}
          <Script src="/app/client.ts" async nonce={c.get('secureHeadersNonce')} />
        </body>
      </html>
    );
  },
  { stream: true }
);

Author should do the followings, if applicable

Add tests
Run tests
yarn denoify to generate files for Deno

usualoma · 2024-04-30T12:03:46Z

Customisation of nonce values.

The pre-defined NONCE is convenient, but if you want to generate the nonce value yourself, you can also specify a function as follows.

import { createRoute } from "honox/factory";
import { secureHeaders, NONCE } from "hono/secure-headers";

function myNonceGenerator(ctx) {
  // This function is called on every request.
  const nonce = Math.random().toString(36).slice(2)
  ctx.set('myNonce', nonce)
  return `'nonce-${nonce}'`
}

export default createRoute(
  secureHeaders({
    contentSecurityPolicy: {
      scriptSrc: [myNonceGenerator, 'https://allowed1.example.com', 'https://allowed2.example.com'],
    },
  })
);

usualoma · 2024-04-30T12:04:39Z

@yusukebe Would you please review?

deno_dist/middleware/secure-headers/index.ts

src/middleware/secure-headers/index.ts

deno_dist/middleware/secure-headers/index.ts

yusukebe · 2024-04-30T21:55:25Z

Hi @usualoma

Almost all is good! I've left some comments.

…ment

…strictly

usualoma · 2024-04-30T22:47:56Z

All fixed!

yusukebe

LGTM!

yusukebe · 2024-05-01T08:58:31Z

@usualoma

Thanks! Let's go with this.

[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [hono](https://hono.dev/) ([source](https://togithub.com/honojs/hono)) | [`4.2.9` -> `4.3.0`](https://renovatebot.com/diffs/npm/hono/4.2.9/4.3.0) | [![age](https://developer.mend.io/api/mc/badges/age/npm/hono/4.3.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/hono/4.3.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/hono/4.2.9/4.3.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/hono/4.2.9/4.3.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>honojs/hono (hono)</summary> ### [`v4.3.0`](https://togithub.com/honojs/hono/releases/tag/v4.3.0) [Compare Source](https://togithub.com/honojs/hono/compare/v4.2.9...v4.3.0) Hono v4.3.0 is now available! Let's take a look at the new features. #### Improve the RPC-mode Thanks to [@kosei28](https://togithub.com/kosei28), [@nakasyou](https://togithub.com/nakasyou), and [@NamesMT](https://togithub.com/NamesMT), the RPC mode has been improved! ##### `c.text()` is typed The response of `c.text()` was just a `Response` object, not typed. ```ts const routes = app.get('/about/me', (c) => { return c.text('Me!') // the response is not typed }) ``` With this release, it will be a `TypedResponse` and you can get the type within the client created by `hc`. ```ts const client = hc<typeof routes>('http://localhost:8787') const res = await client.about.me.$get() const text = await res.text() // text is typed as "Me!" const json = await res.json() // json is never! ``` ##### Support all JSON primitives We added the tests for the responses of `c.json()` to have the correct types and support inferring all primitives. The all tests below are passed! ```ts const app = new Hono() const route = app .get('/api/string', (c) => c.json('a-string')) .get('/api/number', (c) => c.json(37)) .get('/api/boolean', (c) => c.json(true)) .get('/api/generic', (c) => c.json(Math.random() > 0.5 ? Boolean(Math.random()) : Math.random())) type AppType = typeof route const client = hc<AppType>('http://localhost') const stringFetch = await client.api.string.$get() const stringRes = await stringFetch.json() const numberFetch = await client.api.number.$get() const numberRes = await numberFetch.json() const booleanFetch = await client.api.boolean.$get() const booleanRes = await booleanFetch.json() const genericFetch = await client.api.generic.$get() const genericRes = await genericFetch.json() type stringVerify = Expect<Equal<'a-string', typeof stringRes>> expect(stringRes).toBe('a-string') type numberVerify = Expect<Equal<37, typeof numberRes>> expect(numberRes).toBe(37) type booleanVerify = Expect<Equal<true, typeof booleanRes>> expect(booleanRes).toBe(true) type genericVerify = Expect<Equal<number | boolean, typeof genericRes>> expect(typeof genericRes === 'number' || typeof genericRes === 'boolean').toBe(true) // using .text() on json endpoint should return string type textTest = Expect<Equal<Promise<string>, ReturnType<typeof genericFetch.text>>> ``` ##### Status code type If you explicitly specify the status code, such as `200` or `404`, in `c.json()`. It will be added as a type for passing to the client. ```ts // server.ts const app = new Hono().get( '/posts', zValidator( 'query', z.object({ id: z.string() }) ), async (c) => { const { id } = c.req.valid('query') const post: Post | undefined = await getPost(id) if (post === undefined) { return c.json({ error: 'not found' }, 404) // Specify 404 } return c.json({ post }, 200) // Specify 200 } ) export type AppType = typeof app ``` You can get the data by the status code. ```ts // client.ts const client = hc<AppType>('http://localhost:8787/') const res = await client.posts.$get({ query: { id: '123' } }) if (res.status === 404) { const data: { error: string } = await res.json() console.log(data.error) } if (res.ok) { const data: { post: Post } = await res.json() console.log(data.post) } // { post: Post } | { error: string } type ResponseType = InferResponseType<typeof client.posts.$get> // { post: Post } type ResponseType200 = InferResponseType<typeof client.posts.$get, 200> ``` #### Improve compatibility with React The compatibility of `hono/jsx/dom` has been improved. Now, these React libraries work with `hono/jsx/dom`! - [react-toastify](https://togithub.com/fkhadra/react-toastify) - [spinners-react](https://togithub.com/adexin/spinners-react) - [Radix UI Primitives](https://www.radix-ui.com/primitives) The below demo is working with `hono/jsx/dom`, not React. ![Google Chrome](https://togithub.com/honojs/hono/assets/10682/b2f93c52-d1b6-40ea-b075-22c49d18a723) If you want to use React libraries with `hono/jsx/dom`, set-up `tsconfig.json` and `vite.config.ts` like the followings: `tsconfig.json`: ```json { "compilerOptions": { "paths": { "react": ["./node_modules/hono/dist/jsx/dom"], "react-dom": ["./node_modules/hono/dist/jsx/dom"] } } } ``` `vite.config.ts`: ```ts import { defineConfig } from 'vite' export default defineConfig({ resolve: { alias: { react: 'hono/jsx/dom', 'react-dom': 'hono/jsx/dom' } } }) ``` Thanks [@usualoma](https://togithub.com/usualoma)! #### `createApp()` in Factory Helper `createApp()` method is added to Factory Helper. If you use this method with `createFactory()`, you can avoid redundancy in the definition of the `Env` type. If your application is like this, you have to set the `Env` in two places: ```ts import { createMiddleware } from 'hono/factory' type Env = { Variables: { myVar: string } } // 1. Set the `Env` to `new Hono()` const app = new Hono<Env>() // 2. Set the `Env` to `createMiddleware()` const mw = createMiddleware<Env>(async (c, next) => { await next() }) app.use(mw) ``` By using `createFactory()` and `createApp()`, you can set the Env only in one place. ```ts import { createFactory } from 'hono/factory' // ... // Set the `Env` to `createFactory()` const factory = createFactory<Env>() const app = factory.createApp() // factory also has `createMiddleware()` const mw = factory.createMiddleware(async (c, next) => { await next() }) ``` #### Deprecate `serveStatic` for Cloudflare Workers `serveStatic` exported by `hono/cloudflare-workers` has been deprecated. If you create an application which serves static asset files, use Cloudflare Pages instead. #### Other features - Cookie Helper - delete cookie returns the deleted value [https://github.com/honojs/hono/pull/2512](https://togithub.com/honojs/hono/pull/2512) - Bearer Authenticate - add `headerName` option [https://github.com/honojs/hono/pull/2514](https://togithub.com/honojs/hono/pull/2514) - JSX/DOM - preserve the state of element even if it is repeatedly evaluated by children [https://github.com/honojs/hono/pull/2563](https://togithub.com/honojs/hono/pull/2563) - Mimes utility - expose built-in MIME types [https://github.com/honojs/hono/pull/2516](https://togithub.com/honojs/hono/pull/2516) - Serve Static - expose serve-static builder [https://github.com/honojs/hono/pull/2515](https://togithub.com/honojs/hono/pull/2515) - Secure Headers - enable to set nonce in CSP [https://github.com/honojs/hono/pull/2577](https://togithub.com/honojs/hono/pull/2577) - Server-Timing - allow `crossOrigin` in TimingOptions to be a function [https://github.com/honojs/hono/pull/2359](https://togithub.com/honojs/hono/pull/2359) - Client - add `init` option [https://github.com/honojs/hono/pull/2592](https://togithub.com/honojs/hono/pull/2592) #### All Updates - fix(request): infer params in a path includes one or more optional parameter by [@yusukebe](https://togithub.com/yusukebe) in [https://github.com/honojs/hono/pull/2576](https://togithub.com/honojs/hono/pull/2576) - feat(rpc): Add status code to response type by [@kosei28](https://togithub.com/kosei28) in [https://github.com/honojs/hono/pull/2499](https://togithub.com/honojs/hono/pull/2499) - feat(helper/cookie): delete cookie returns the deleted value by [@sor4chi](https://togithub.com/sor4chi) in [https://github.com/honojs/hono/pull/2512](https://togithub.com/honojs/hono/pull/2512) - feat(bearer-auth): add `headerName` option by [@eliasbrange](https://togithub.com/eliasbrange) in [https://github.com/honojs/hono/pull/2514](https://togithub.com/honojs/hono/pull/2514) - feat(jsx/dom): improve compatibility with React by [@usualoma](https://togithub.com/usualoma) in [https://github.com/honojs/hono/pull/2553](https://togithub.com/honojs/hono/pull/2553) - fix(jsx): preserve the state of element even if it is repeatedly evaluated by children by [@usualoma](https://togithub.com/usualoma) in [https://github.com/honojs/hono/pull/2563](https://togithub.com/honojs/hono/pull/2563) - feat: expose built-in MIME types by [@cometkim](https://togithub.com/cometkim) in [https://github.com/honojs/hono/pull/2516](https://togithub.com/honojs/hono/pull/2516) - feat: expose serve-static builder by [@cometkim](https://togithub.com/cometkim) in [https://github.com/honojs/hono/pull/2515](https://togithub.com/honojs/hono/pull/2515) - feat(secure-headers): enable to set nonce in CSP by [@usualoma](https://togithub.com/usualoma) in [https://github.com/honojs/hono/pull/2577](https://togithub.com/honojs/hono/pull/2577) - chore(pr_template): Use Bun instead of yarn by [@nakasyou](https://togithub.com/nakasyou) in [https://github.com/honojs/hono/pull/2582](https://togithub.com/honojs/hono/pull/2582) - feat(cloudflare-workers): deprecate `serveStatic` by [@yusukebe](https://togithub.com/yusukebe) in [https://github.com/honojs/hono/pull/2583](https://togithub.com/honojs/hono/pull/2583) - feat(types): improve response types flow by [@NamesMT](https://togithub.com/NamesMT) in [https://github.com/honojs/hono/pull/2581](https://togithub.com/honojs/hono/pull/2581) - docs(readme): remove Benchmarks section by [@yusukebe](https://togithub.com/yusukebe) in [https://github.com/honojs/hono/pull/2591](https://togithub.com/honojs/hono/pull/2591) - feat: improve `ToSchema` & `WebSocket Helper` types by [@NamesMT](https://togithub.com/NamesMT) in [https://github.com/honojs/hono/pull/2588](https://togithub.com/honojs/hono/pull/2588) - feat(factory): add `createApp()` by [@yusukebe](https://togithub.com/yusukebe) in [https://github.com/honojs/hono/pull/2573](https://togithub.com/honojs/hono/pull/2573) - feat(hc): add `init` option by [@NamesMT](https://togithub.com/NamesMT) in [https://github.com/honojs/hono/pull/2592](https://togithub.com/honojs/hono/pull/2592) - feat(timing): allow crossOrigin in TimingOptions to be a function by [@jonahsnider](https://togithub.com/jonahsnider) in [https://github.com/honojs/hono/pull/2359](https://togithub.com/honojs/hono/pull/2359) - Next by [@yusukebe](https://togithub.com/yusukebe) in [https://github.com/honojs/hono/pull/2600](https://togithub.com/honojs/hono/pull/2600) #### New Contributors - [@kosei28](https://togithub.com/kosei28) made their first contribution in [https://github.com/honojs/hono/pull/2499](https://togithub.com/honojs/hono/pull/2499) - [@NamesMT](https://togithub.com/NamesMT) made their first contribution in [https://github.com/honojs/hono/pull/2581](https://togithub.com/honojs/hono/pull/2581) - [@jonahsnider](https://togithub.com/jonahsnider) made their first contribution in [https://github.com/honojs/hono/pull/2359](https://togithub.com/honojs/hono/pull/2359) **Full Changelog**: honojs/hono@v4.2.9...v4.3.0 </details> --- ### Configuration 📅 **Schedule**: Branch creation - "before 4am on Monday" in timezone America/Chicago, Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/autoblocksai/cli).  Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

usualoma added 2 commits April 30, 2024 18:50

feat(secure-headers): enable to set nonce in CSP

907448b

chore: denoify

b039cc3

This was referenced Apr 30, 2024

feat: Enable to pass nonce to script component honojs/honox#164

Merged

support CSP nonce for <Script> component honojs/honox#157

Open

refactor(secure-headers): remove debug logs

ffc17b3

yusukebe added the v4.3 label Apr 30, 2024

yusukebe reviewed Apr 30, 2024

View reviewed changes

yusukebe changed the base branch from main to next April 30, 2024 22:03

usualoma added 4 commits May 1, 2024 07:24

refactor(secure-headers): remove useless eslint-disable-next-line com…

1389979

…ment

refactor(secure-headers): specify type for getCSPDirectives() more …

a6e1277

…strictly

feat(secure-headers): export ContentSecurityPolicyOptionHandler

e184f6a

chore: denoify

20df8f6

yusukebe approved these changes May 1, 2024

View reviewed changes

yusukebe merged commit 869cf28 into honojs:next May 1, 2024
10 checks passed

MonsterDeveloper mentioned this pull request May 17, 2024

Type bug introduced in v4.3.0 in secureHeaders middleware #2693

Closed

rmarscher mentioned this pull request May 19, 2024

Generated nonce for secure headers middleware uses NodeJS Buffer API #2725

Closed

ishaan-jaff mentioned this pull request May 24, 2024

[Snyk] Upgrade hono from 4.1.5 to 4.3.0 ishaan-jaff/litellm#1

Open

This was referenced Jul 22, 2024

Update dependency hono to v4 Zareix/zrx-link#38

Open

fix(deps): update dependency hono to v4 - autoclosed approvers/members-assoc#41

Closed

fix(deps): update dependency hono to v4 - autoclosed graphql-crystal/benchmarks#290

Closed

This was referenced Nov 18, 2024

feat(css): add CSP nonce to hono/css related style and script tags #3685

Merged

CSP support for CSS Helper #3694

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(secure-headers): enable to set nonce in CSP #2577

feat(secure-headers): enable to set nonce in CSP #2577

usualoma commented Apr 30, 2024

usualoma commented Apr 30, 2024 •

edited

Loading

usualoma commented Apr 30, 2024

yusukebe commented Apr 30, 2024

usualoma commented Apr 30, 2024

yusukebe left a comment

yusukebe commented May 1, 2024

feat(secure-headers): enable to set nonce in CSP #2577

feat(secure-headers): enable to set nonce in CSP #2577

Conversation

usualoma commented Apr 30, 2024

Usage

Author should do the followings, if applicable

usualoma commented Apr 30, 2024 • edited Loading

Customisation of nonce values.

usualoma commented Apr 30, 2024

yusukebe commented Apr 30, 2024

usualoma commented Apr 30, 2024

yusukebe left a comment

Choose a reason for hiding this comment

yusukebe commented May 1, 2024

usualoma commented Apr 30, 2024 •

edited

Loading