acrylblends 0.3.0 → 0.4.0

package/plugins/acryl-router/src/core/middleware/cors/index.ts

@@ -0,0 +1,163 @@
+/**
+ * @module
+ * CORS Middleware for App.
+ */
+
+import type { Context } from '../../context.ts'
+import type { MiddlewareHandler } from '../../types.ts'
+
+type CORSOptions = {
+  origin?:
+    | string
+    | string[]
+    | ((
+        origin: string,
+        c: Context
+      ) => Promise<string | undefined | null> | string | undefined | null)
+  allowMethods?: string[] | ((origin: string, c: Context) => Promise<string[]> | string[])
+  allowHeaders?: string[]
+  maxAge?: number
+  credentials?: boolean
+  exposeHeaders?: string[]
+}
+
+/**
+ * CORS Middleware for App.
+ *
+ *
+ * @param {CORSOptions} [options] - The options for the CORS middleware.
+ * @param {string | string[] | ((origin: string, c: Context) => Promise<string | undefined | null> | string | undefined | null)} [options.origin='*'] - The value of "Access-Control-Allow-Origin" CORS header.
+ * @param {string[] | ((origin: string, c: Context) => Promise<string[]> | string[])} [options.allowMethods=['GET', 'HEAD', 'PUT', 'POST', 'DELETE', 'PATCH', 'QUERY']] - The value of "Access-Control-Allow-Methods" CORS header.
+ * @param {string[]} [options.allowHeaders=[]] - The value of "Access-Control-Allow-Headers" CORS header.
+ * @param {number} [options.maxAge] - The value of "Access-Control-Max-Age" CORS header.
+ * @param {boolean} [options.credentials] - The value of "Access-Control-Allow-Credentials" CORS header.
+ * @param {string[]} [options.exposeHeaders=[]] - The value of "Access-Control-Expose-Headers" CORS header.
+ * @returns {MiddlewareHandler} The middleware handler function.
+ *
+ * @example
+ * ```ts
+ * const app = new App()
+ *
+ * app.use('/api/*', cors())
+ * app.use(
+ *   '/api2/*',
+ *   cors({
+ *     origin: 'http://example.com',
+ *     allowHeaders: ['X-Custom-Header', 'Upgrade-Insecure-Requests'],
+ *     allowMethods: ['POST', 'GET', 'OPTIONS'],
+ *     exposeHeaders: ['Content-Length', 'X-Kuma-Revision'],
+ *     maxAge: 600,
+ *     credentials: true,
+ *   })
+ * )
+ *
+ * app.all('/api/abc', (c) => {
+ *   return c.json({ success: true })
+ * })
+ * app.all('/api2/abc', (c) => {
+ *   return c.json({ success: true })
+ * })
+ * ```
+ */
+export const cors = (options?: CORSOptions): MiddlewareHandler => {
+  const opts = {
+    origin: '*',
+    allowMethods: ['GET', 'HEAD', 'PUT', 'POST', 'DELETE', 'PATCH', 'QUERY'],
+    allowHeaders: [],
+    exposeHeaders: [],
+    ...options,
+  } satisfies CORSOptions
+
+  const exposeHeadersStr = opts.exposeHeaders?.length ? opts.exposeHeaders.join(',') : undefined
+  const allowHeadersStr = opts.allowHeaders?.length ? opts.allowHeaders.join(',') : undefined
+
+  const findAllowOrigin = ((optsOrigin) => {
+    if (typeof optsOrigin === 'string') {
+      if (optsOrigin === '*') {
+        return () => optsOrigin
+      } else {
+        return (origin: string) => (optsOrigin === origin ? origin : null)
+      }
+    } else if (typeof optsOrigin === 'function') {
+      return optsOrigin
+    } else {
+      return (origin: string) => (optsOrigin.includes(origin) ? origin : null)
+    }
+  })(opts.origin)
+
+  const findAllowMethods = ((optsAllowMethods) => {
+    if (typeof optsAllowMethods === 'function') {
+      return async (origin: string, c: Context) => (await optsAllowMethods(origin, c)).join(',')
+    } else if (Array.isArray(optsAllowMethods)) {
+      const methodsStr = optsAllowMethods.join(',')
+      return () => methodsStr
+    } else {
+      return () => ''
+    }
+  })(opts.allowMethods)
+
+  return async function cors(c, next) {
+    function set(key: string, value: string) {
+      c.res.headers.set(key, value)
+    }
+
+    const allowOrigin = await findAllowOrigin(c.req.header('origin') || '', c)
+    if (allowOrigin) {
+      set('Access-Control-Allow-Origin', allowOrigin)
+    }
+
+    if (opts.credentials) {
+      set('Access-Control-Allow-Credentials', 'true')
+    }
+
+    if (exposeHeadersStr) {
+      set('Access-Control-Expose-Headers', exposeHeadersStr)
+    }
+
+    if (c.req.method === 'OPTIONS') {
+      if (opts.origin !== '*') {
+        c.res.headers.append('Vary', 'Origin')
+      }
+
+      if (opts.maxAge != null) {
+        set('Access-Control-Max-Age', opts.maxAge.toString())
+      }
+
+      const allowMethods = await findAllowMethods(c.req.header('origin') || '', c)
+      if (allowMethods) {
+        set('Access-Control-Allow-Methods', allowMethods)
+      }
+
+      let headersStr = allowHeadersStr
+      if (!headersStr) {
+        const requestHeaders = c.req.header('Access-Control-Request-Headers')
+        if (requestHeaders) {
+          headersStr = requestHeaders
+            .split(',')
+            .map((h) => h.trim())
+            .join(',')
+        }
+      }
+      if (headersStr) {
+        set('Access-Control-Allow-Headers', headersStr)
+        c.res.headers.append('Vary', 'Access-Control-Request-Headers')
+      }
+
+      c.res.headers.delete('Content-Length')
+      c.res.headers.delete('Content-Type')
+
+      return new Response(null, {
+        headers: c.res.headers,
+        status: 204,
+        statusText: 'No Content',
+      })
+    }
+    await next()
+
+    // Suppose the server sends a response with an Access-Control-Allow-Origin value with an explicit origin (rather than the "*" wildcard).
+    // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
+    if (opts.origin !== '*') {
+      c.header('Vary', 'Origin', { append: true })
+    }
+  }
+}

package/plugins/acryl-router/src/core/middleware/csrf/index.test.ts

@@ -0,0 +1,534 @@
+import type { Context } from '../../context.ts'
+import { App } from '../../app.ts'
+import { csrf } from './index.ts'
+
+const simplePostHandler = vi.fn(async (c: Context) => {
+  if (c.req.header('content-type') === 'application/json') {
+    return c.text((await c.req.json<{ name: string }>())['name'])
+  } else {
+    const body = await c.req.parseBody<{ name: string }>()
+    return c.text(body['name'])
+  }
+})
+
+const buildSimplePostRequestData = (options: { origin?: string; secFetchSite?: string } = {}) => ({
+  method: 'POST',
+  headers: Object.assign(
+    {
+      'content-type': 'application/x-www-form-urlencoded',
+    },
+    options?.origin ? { origin: options.origin } : {},
+    options?.secFetchSite ? { 'sec-fetch-site': options.secFetchSite } : {}
+  ) as Record<string, string>,
+  body: 'name=acryl',
+})
+
+describe('CSRF by Middleware', () => {
+  beforeEach(() => {
+    simplePostHandler.mockClear()
+  })
+
+  describe('simple usage', () => {
+    const app = new App()
+
+    app.use('*', csrf())
+    app.get('/form', (c) => c.html('<form></form>'))
+    app.options('/form', (c) => c.text('OK'))
+    app.post('/form', simplePostHandler)
+    app.put('/form', (c) => c.text('OK'))
+    app.delete('/form', (c) => c.text('OK'))
+    app.patch('/form', (c) => c.text('OK'))
+
+    describe('GET /form', async () => {
+      it('should be 200 for any request', async () => {
+        const res = await app.request('http://localhost/form')
+
+        expect(res.status).toBe(200)
+        expect(await res.text()).toBe('<form></form>')
+      })
+    })
+
+    describe('HEAD /form', async () => {
+      it('should be 200 for any request', async () => {
+        const res = await app.request('http://localhost/form', { method: 'HEAD' })
+
+        expect(res.status).toBe(200)
+      })
+    })
+
+    describe('OPTIONS /form', async () => {
+      it('should be 200 for any request', async () => {
+        const res = await app.request('http://localhost/form', { method: 'OPTIONS' })
+
+        expect(res.status).toBe(200)
+        expect(await res.text()).toBe('OK')
+      })
+    })
+
+    describe('POST /form', async () => {
+      it('should be 200 for local request', async () => {
+        /*
+         * <form action="/form" method="POST"><input name="name" value="acryl" /></form>
+         * or
+         * <script>
+         * fetch('/form', {
+         *   method: 'POST',
+         *   headers: {
+         *     'content-type': 'application/x-www-form-urlencoded',
+         *   },
+         *   body: 'name=acryl',
+         * });
+         * </script>
+         */
+        const res = await app.request(
+          'http://localhost/form',
+          buildSimplePostRequestData({ origin: 'http://localhost' })
+        )
+
+        expect(res.status).toBe(200)
+        expect(await res.text()).toBe('acryl')
+      })
+
+      it('should be 403 for "application/x-www-form-urlencoded" cross origin', async () => {
+        /*
+         * via http://example.com
+         *
+         * <form action="http://localhost/form" method="POST">
+         *   <input name="name" value="acryl" />
+         * </form>
+         * or
+         * <script>
+         * fetch('http://localhost/form', {
+         *   method: 'POST',
+         *   headers: {
+         *     'content-type': 'application/x-www-form-urlencoded',
+         *   },
+         *   body: 'name=acryl',
+         * });
+         * </script>
+         */
+        const res = await app.request(
+          'http://localhost/form',
+          buildSimplePostRequestData({ origin: 'http://example.com' })
+        )
+
+        expect(res.status).toBe(403)
+        expect(simplePostHandler).not.toHaveBeenCalled()
+      })
+    })
+
+    it('should be 403 for "multipart/form-data" cross origin', async () => {
+      /*
+       * via http://example.com
+       *
+       * <form action="http://localhost/form" method="POST" enctype="multipart/form-data">
+       *   <input name="name" value="acryl" />
+       * </form>
+       * or
+       * <script>
+       * fetch('http://localhost/form', {
+       *   method: 'POST',
+       *   headers: {
+       *     'content-type': 'multipart/form-data',
+       *   },
+       *   body: 'name=acryl',
+       * });
+       * </script>
+       */
+      const res = await app.request(
+        'http://localhost/form',
+        buildSimplePostRequestData({ origin: 'http://example.com' })
+      )
+
+      expect(res.status).toBe(403)
+      expect(simplePostHandler).not.toHaveBeenCalled()
+    })
+
+    it('should be 403 for "text/plain" cross origin', async () => {
+      /*
+       * via http://example.com
+       *
+       * <form action="http://localhost/form" method="POST" enctype="text/plain">
+       *   <input name="name" value="acryl" />
+       * </form>
+       * or
+       * <script>
+       * fetch('http://localhost/form', {
+       *   method: 'POST',
+       *   headers: {
+       *     'content-type': 'text/plain',
+       *   },
+       *   body: 'name=acryl',
+       * });
+       * </script>
+       */
+      const res = await app.request(
+        'http://localhost/form',
+        buildSimplePostRequestData({ origin: 'http://example.com' })
+      )
+
+      expect(res.status).toBe(403)
+      expect(simplePostHandler).not.toHaveBeenCalled()
+    })
+
+    it('should be 403 if request has no origin header', async () => {
+      const res = await app.request('http://localhost/form', buildSimplePostRequestData())
+
+      expect(res.status).toBe(403)
+      expect(simplePostHandler).not.toHaveBeenCalled()
+    })
+
+    it('should be 200 for application/json', async () => {
+      /*
+       * via http://example.com
+       * Assume localhost allows cross origin POST
+       *
+       * <script>
+       * fetch('http://localhost/form', {
+       *   method: 'POST',
+       *   headers: {
+       *     'content-type': 'application/json',
+       *   },
+       *   body: JSON.stringify({ name: 'acryl' }),
+       * });
+       * </script>
+       */
+      const res = await app.request('http://localhost/form', {
+        method: 'POST',
+        headers: {
+          'content-type': 'application/json',
+          origin: 'http://example.com',
+        },
+        body: JSON.stringify({ name: 'acryl' }),
+      })
+
+      expect(res.status).toBe(200)
+      expect(await res.text()).toBe('acryl')
+    })
+
+    it('should be 403 for "Application/x-www-form-urlencoded" cross origin', async () => {
+      const res = await app.request('http://localhost/form', {
+        method: 'POST',
+        headers: Object.assign({
+          'content-type': 'Application/x-www-form-urlencoded',
+        }),
+        body: 'name=acryl',
+      })
+      expect(res.status).toBe(403)
+      expect(simplePostHandler).not.toHaveBeenCalled()
+    })
+
+    it('should be 403 if the content-type is not set', async () => {
+      const res = await app.request('/form', {
+        method: 'POST',
+        body: new Blob(['test'], {}),
+      })
+      expect(res.status).toBe(403)
+      expect(simplePostHandler).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('with origin option', () => {
+    describe('string', () => {
+      const app = new App()
+
+      app.use(
+        '*',
+        csrf({
+          origin: 'https://example.com',
+        })
+      )
+      app.post('/form', simplePostHandler)
+
+      it('should be 200 for allowed origin', async () => {
+        const res = await app.request(
+          'https://example.com/form',
+          buildSimplePostRequestData({ origin: 'https://example.com' })
+        )
+        expect(res.status).toBe(200)
+      })
+
+      it('should be 403 for not allowed origin', async () => {
+        const res = await app.request(
+          'https://example.jp/form',
+          buildSimplePostRequestData({ origin: 'https://example.jp' })
+        )
+        expect(res.status).toBe(403)
+        expect(simplePostHandler).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('string[]', () => {
+      const app = new App()
+
+      app.use(
+        '*',
+        csrf({
+          origin: ['https://example.com', 'https://acryl.example.com'],
+        })
+      )
+      app.post('/form', simplePostHandler)
+
+      it('should be 200 for allowed origin', async () => {
+        let res = await app.request(
+          'https://acryl.example.com/form',
+          buildSimplePostRequestData({ origin: 'https://acryl.example.com' })
+        )
+        expect(res.status).toBe(200)
+
+        res = await app.request(
+          'https://example.com/form',
+          buildSimplePostRequestData({ origin: 'https://example.com' })
+        )
+        expect(res.status).toBe(200)
+      })
+
+      it('should be 403 for not allowed origin', async () => {
+        const res = await app.request(
+          'http://example.jp/form',
+          buildSimplePostRequestData({ origin: 'http://example.jp' })
+        )
+        expect(res.status).toBe(403)
+        expect(simplePostHandler).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('IsAllowedOriginHandler', () => {
+      const app = new App()
+
+      app.use(
+        '*',
+        csrf({
+          origin: (origin) => /https:\/\/(\w+\.)?example\.com$/.test(origin),
+        })
+      )
+      app.post('/form', simplePostHandler)
+
+      it('should be 200 for allowed origin', async () => {
+        let res = await app.request(
+          'https://acryl.example.com/form',
+          buildSimplePostRequestData({ origin: 'https://acryl.example.com' })
+        )
+        expect(res.status).toBe(200)
+
+        res = await app.request(
+          'https://example.com/form',
+          buildSimplePostRequestData({ origin: 'https://example.com' })
+        )
+        expect(res.status).toBe(200)
+      })
+
+      it('should be 403 for not allowed origin', async () => {
+        let res = await app.request(
+          'http://upstream.acryl.example.jp/form',
+          buildSimplePostRequestData({ origin: 'http://example.jp' })
+        )
+        expect(res.status).toBe(403)
+        expect(simplePostHandler).not.toHaveBeenCalled()
+
+        res = await app.request(
+          'http://example.jp/form',
+          buildSimplePostRequestData({ origin: 'http://example.jp' })
+        )
+        expect(res.status).toBe(403)
+        expect(simplePostHandler).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('async IsAllowedOriginHandler', () => {
+      const app = new App()
+
+      app.use(
+        '*',
+        csrf({
+          origin: async (origin) => {
+            await new Promise((r) => setTimeout(r, 10))
+            return /https:\/\/(\w+\.)?example\.com$/.test(origin)
+          },
+        })
+      )
+      app.post('/form', simplePostHandler)
+
+      it('should be 200 for allowed origin with async handler', async () => {
+        let res = await app.request(
+          'https://acryl.example.com/form',
+          buildSimplePostRequestData({ origin: 'https://acryl.example.com' })
+        )
+        expect(res.status).toBe(200)
+
+        res = await app.request(
+          'https://example.com/form',
+          buildSimplePostRequestData({ origin: 'https://example.com' })
+        )
+        expect(res.status).toBe(200)
+      })
+
+      it('should be 403 for not allowed origin with async handler', async () => {
+        let res = await app.request(
+          'http://upstream.acryl.example.jp/form',
+          buildSimplePostRequestData({ origin: 'http://example.jp' })
+        )
+        expect(res.status).toBe(403)
+        expect(simplePostHandler).not.toHaveBeenCalled()
+
+        res = await app.request(
+          'http://example.jp/form',
+          buildSimplePostRequestData({ origin: 'http://example.jp' })
+        )
+        expect(res.status).toBe(403)
+        expect(simplePostHandler).not.toHaveBeenCalled()
+      })
+    })
+  })
+
+  describe('with secFetchSite option', () => {
+    describe('string', () => {
+      const app = new App()
+      app.use('*', csrf({ secFetchSite: 'same-origin' }))
+      app.post('/form', simplePostHandler)
+
+      it('should allow matching value', async () => {
+        const res = await app.request(
+          'http://localhost/form',
+          buildSimplePostRequestData({ secFetchSite: 'same-origin' })
+        )
+        expect(res.status).toBe(200)
+      })
+
+      it('should block non-matching value', async () => {
+        const res = await app.request(
+          'http://localhost/form',
+          buildSimplePostRequestData({ secFetchSite: 'cross-site' })
+        )
+        expect(res.status).toBe(403)
+      })
+
+      it('should block unknown values', async () => {
+        const res = await app.request(
+          'http://localhost/form',
+          buildSimplePostRequestData({ secFetchSite: 'any' })
+        )
+        expect(res.status).toBe(403)
+      })
+    })
+
+    describe('string[]', () => {
+      const app = new App()
+      app.use('*', csrf({ secFetchSite: ['same-origin', 'none'] }))
+      app.post('/form', simplePostHandler)
+
+      it('should allow "same-origin" value', async () => {
+        const res = await app.request(
+          'http://localhost/form',
+          buildSimplePostRequestData({ secFetchSite: 'same-origin' })
+        )
+        expect(res.status).toBe(200)
+      })
+
+      it('should allow "none" value', async () => {
+        const res = await app.request(
+          'http://localhost/form',
+          buildSimplePostRequestData({ secFetchSite: 'none' })
+        )
+        expect(res.status).toBe(200)
+      })
+
+      it('should block not included values', async () => {
+        const res = await app.request(
+          'http://localhost/form',
+          buildSimplePostRequestData({ secFetchSite: 'cross-site' })
+        )
+        expect(res.status).toBe(403)
+      })
+    })
+
+    describe('IsAllowedSecFetchSiteHandler', () => {
+      const app = new App()
+      app.use(
+        '*',
+        csrf({
+          secFetchSite: (secFetchSite, c) => {
+            if (secFetchSite === 'same-origin') {
+              return true
+            }
+            if (c.req.path.startsWith('/webhook/')) {
+              return true
+            }
+            return false
+          },
+        })
+      )
+      app.post('/form', simplePostHandler)
+      app.post('/webhook/test', simplePostHandler)
+
+      it('should use custom logic for allowed values', async () => {
+        const res = await app.request(
+          'http://localhost/form',
+          buildSimplePostRequestData({ secFetchSite: 'same-origin' })
+        )
+        expect(res.status).toBe(200)
+      })
+
+      it('should use custom logic for path-based bypass', async () => {
+        const res = await app.request(
+          'http://localhost/webhook/test',
+          buildSimplePostRequestData({ secFetchSite: 'cross-site' })
+        )
+        expect(res.status).toBe(200)
+      })
+
+      it('should block when custom logic returns false', async () => {
+        const res = await app.request(
+          'http://localhost/form',
+          buildSimplePostRequestData({ secFetchSite: 'cross-site' })
+        )
+        expect(res.status).toBe(403)
+      })
+    })
+
+    describe('async IsAllowedSecFetchSiteHandler', () => {
+      const app = new App()
+      app.use(
+        '*',
+        csrf({
+          secFetchSite: async (secFetchSite, c) => {
+            await new Promise((r) => setTimeout(r, 10))
+            if (secFetchSite === 'same-origin') {
+              return true
+            }
+            if (c.req.path.startsWith('/webhook/')) {
+              return true
+            }
+            return false
+          },
+        })
+      )
+      app.post('/form', simplePostHandler)
+      app.post('/webhook/test', simplePostHandler)
+
+      it('should use async custom logic for allowed values', async () => {
+        const res = await app.request(
+          'http://localhost/form',
+          buildSimplePostRequestData({ secFetchSite: 'same-origin' })
+        )
+        expect(res.status).toBe(200)
+      })
+
+      it('should use async custom logic for path-based bypass', async () => {
+        const res = await app.request(
+          'http://localhost/webhook/test',
+          buildSimplePostRequestData({ secFetchSite: 'cross-site' })
+        )
+        expect(res.status).toBe(200)
+      })
+
+      it('should block when async custom logic returns false', async () => {
+        const res = await app.request(
+          'http://localhost/form',
+          buildSimplePostRequestData({ secFetchSite: 'cross-site' })
+        )
+        expect(res.status).toBe(403)
+      })
+    })
+  })
+})