fix: allow cross-protocol requests from the same domain (#7693)

Author: gioboa

.changeset/pretty-falcons-grow.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik-city': patch
+---
+
+FIX: allow cross-protocol requests from the same domain

packages/docs/src/routes/api/qwik-city-middleware-request-handler/api.json

@@ -456,7 +456,7 @@
         }
       ],
       "kind": "Interface",
-      "content": "```typescript\nexport interface ServerRenderOptions extends RenderOptions \n```\n**Extends:** RenderOptions\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[checkOrigin?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nboolean\n\n\n</td><td>\n\n_(Optional)_ Protection against cross-site request forgery (CSRF) attacks.\n\nWhen `true`<!-- -->, for every incoming POST, PUT, PATCH, or DELETE form submissions, the request origin is checked to match the server's origin.\n\nBe careful when disabling this option as it may lead to CSRF attacks.\n\nDefaults to `true`<!-- -->.\n\n\n</td></tr>\n<tr><td>\n\n[qwikCityPlan](#)\n\n\n</td><td>\n\n\n</td><td>\n\nQwikCityPlan\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[render](#)\n\n\n</td><td>\n\n\n</td><td>\n\nRender\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>",
+      "content": "```typescript\nexport interface ServerRenderOptions extends RenderOptions \n```\n**Extends:** RenderOptions\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[checkOrigin?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nboolean \\| 'lax-proto'\n\n\n</td><td>\n\n_(Optional)_ Protection against cross-site request forgery (CSRF) attacks.\n\nWhen `true`<!-- -->, for every incoming POST, PUT, PATCH, or DELETE form submissions, the request origin is checked to match the server's origin. `lax-proto` is for SSL-terminating proxies\n\nBe careful when disabling this option as it may lead to CSRF attacks.\n\nDefaults to `true`<!-- -->.\n\n\n</td></tr>\n<tr><td>\n\n[qwikCityPlan](#)\n\n\n</td><td>\n\n\n</td><td>\n\nQwikCityPlan\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[render](#)\n\n\n</td><td>\n\n\n</td><td>\n\nRender\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik-city/src/middleware/request-handler/types.ts",
       "mdFile": "qwik-city.serverrenderoptions.md"
     },

packages/docs/src/routes/api/qwik-city-middleware-request-handler/index.mdx

@@ -1694,13 +1694,13 @@ Description
 
 </td><td>
 
-boolean
+boolean \| 'lax-proto'
 
 </td><td>
 
 _(Optional)_ Protection against cross-site request forgery (CSRF) attacks.
 
-When `true`, for every incoming POST, PUT, PATCH, or DELETE form submissions, the request origin is checked to match the server's origin.
+When `true`, for every incoming POST, PUT, PATCH, or DELETE form submissions, the request origin is checked to match the server's origin. `lax-proto` is for SSL-terminating proxies
 
 Be careful when disabling this option as it may lead to CSRF attacks.
 

packages/qwik-city/src/middleware/request-handler/middleware.request-handler.api.md

@@ -194,7 +194,7 @@ export class ServerError<T = any> extends Error {
 
 // @public (undocumented)
 export interface ServerRenderOptions extends RenderOptions {
-    checkOrigin?: boolean;
+    checkOrigin?: boolean | 'lax-proto';
     // (undocumented)
     qwikCityPlan: QwikCityPlan;
     // (undocumented)

packages/qwik-city/src/middleware/request-handler/request-handler.ts

@@ -64,7 +64,7 @@ async function loadRequestHandlers(
   qwikCityPlan: QwikCityPlan,
   pathname: string,
   method: string,
-  checkOrigin: boolean,
+  checkOrigin: boolean | 'lax-proto',
   renderFn: Render
 ) {
   const { routes, serverPlugins, menus, cacheModules } = qwikCityPlan;

packages/qwik-city/src/middleware/request-handler/resolve-request-handlers.ts

@@ -39,7 +39,7 @@ export const resolveRequestHandlers = (
   serverPlugins: RouteModule[] | undefined,
   route: LoadedRoute | null,
   method: string,
-  checkOrigin: boolean,
+  checkOrigin: boolean | 'lax-proto',
   renderHandler: RequestHandler
 ) => {
   const routeLoaders: LoaderInternal[] = [];
@@ -67,6 +67,10 @@ export const resolveRequestHandlers = (
       (method === 'POST' || method === 'PUT' || method === 'PATCH' || method === 'DELETE')
     ) {
       requestHandlers.unshift(csrfCheckMiddleware);
+
+      if (checkOrigin === 'lax-proto') {
+        requestHandlers.push(csrfLaxProtoCheckMiddleware);
+      }
     }
     if (isPageRoute) {
       // server$
@@ -424,7 +428,13 @@ export function getPathname(url: URL, trailingSlash: boolean | undefined) {
 
 export const encoder = /*#__PURE__*/ new TextEncoder();
 
+function csrfLaxProtoCheckMiddleware(requestEv: RequestEvent) {
+  checkCSRF(requestEv, 'lax-proto');
+}
 function csrfCheckMiddleware(requestEv: RequestEvent) {
+  checkCSRF(requestEv);
+}
+function checkCSRF(requestEv: RequestEvent, laxProto?: 'lax-proto') {
   const isForm = isContentType(
     requestEv.request.headers,
     'application/x-www-form-urlencoded',
@@ -434,7 +444,18 @@ function csrfCheckMiddleware(requestEv: RequestEvent) {
   if (isForm) {
     const inputOrigin = requestEv.request.headers.get('origin');
     const origin = requestEv.url.origin;
-    const forbidden = inputOrigin !== origin;
+    let forbidden = inputOrigin !== origin;
+
+    // fix https://github.com/QwikDev/qwik/issues/7688
+    if (
+      forbidden &&
+      laxProto &&
+      origin.startsWith('https://') &&
+      inputOrigin?.slice(4) === origin.slice(5)
+    ) {
+      forbidden = false;
+    }
+
     if (forbidden) {
       throw requestEv.error(
         403,

packages/qwik-city/src/middleware/request-handler/types.ts

@@ -52,13 +52,13 @@ export interface ServerRenderOptions extends RenderOptions {
    * Protection against cross-site request forgery (CSRF) attacks.
    *
    * When `true`, for every incoming POST, PUT, PATCH, or DELETE form submissions, the request
-   * origin is checked to match the server's origin.
+   * origin is checked to match the server's origin. `lax-proto` is for SSL-terminating proxies
    *
    * Be careful when disabling this option as it may lead to CSRF attacks.
    *
    * Defaults to `true`.
    */
-  checkOrigin?: boolean;
+  checkOrigin?: boolean | 'lax-proto';
 }
 
 /** @public */