Rejected by CORS on client-side browser login flow #1993

Leo843 · 2021-11-26T11:22:28Z

Leo843
Nov 26, 2021

Hi!

I am new to Kratos and I am trying to make a simple React UI to handle authentication. I have some trouble with CORS, my POST request got rejected. I made a simple html file to reproduce the error without the React stuff.

index.html

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ORY/Kratos test</title>
    <script src="js/script.js"></script>
  </head>

  <body>
    <h1>Hello World!</h1>
  </body>

</html>

js/script.js

async function initLoginFlow(){
  const endpoint = 'http://localhost:4201/self-service/login/browser';

  const options = {
    headers: {
      'Accept': 'application/json'
    }
  }

  // fetch login form
  return fetch(endpoint, options).then(response => response.json());
}

async function fetchLoginForm(flow, csrfToken){
  const endpoint = `http://localhost:4201/self-service/login/flows?id=${flow}`;

  const options = {
    headers: {
      'Accept': 'application/json',
      'X-CSRF-Token': 'application/json',
    }
  }

  return fetch(endpoint, options).then(response => response.json());
}

async function submitLoginForm(flow,password_identifier,password,csrf_token){
  const endpoint = `http://localhost:4201/self-service/login?flow=${flow}`;

  const payload = {
    csrf_token,
    method: 'password',
    password,
    password_identifier
  }

  const options = {
    method: 'post',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(payload),
    mode: 'cors'
  }

  return fetch(endpoint, options).then(response => response.json());
}

async function main(){
  try{
    const context = await initLoginFlow()
    console.log(context)
    const flow = context.id
    const csrf = context.ui.nodes[0].attributes.value
    const response = await submitLoginForm(flow,'user','pwd', csrf)
    console.log(response)
  }catch(error){
    console.log(error)
  }
}

main()

Kratos image

oryd/kratos:v0.7.4-alpha.1-sqlite

Kratos configuration

version: v0.7.1-alpha.1

dsn: memory

serve:
  public:
    base_url: http://localhost:4201/
    port: 4201
    cors:
      enabled: true
      allowed_origins:
        - http://localhost:4200
      allowed_methods:
        - POST
        - GET
        - PUT
        - PATCH
        - DELETE
      allowed_headers:
        - Authorization
        - Cookie
      exposed_headers:
        - Content-Type
        - Set-Cookie
  admin:
    base_url: http://localhost:4202/
    port: 4202

selfservice:
  default_browser_return_url: http://localhost:4200/
  whitelisted_return_urls:
    - http://localhost:4200

  methods:
    password:
      enabled: true

  flows:
    error:
      ui_url: http://localhost:4200/error

    settings:
      ui_url: http://localhost:4200/settings
      privileged_session_max_age: 15m

    recovery:
      enabled: true
      ui_url: http://localhost:4200/recovery

    verification:
      enabled: true
      ui_url: http://localhost:4200/verify
      after:
        default_browser_return_url: http://localhost:4200/

    logout:
      after:
        default_browser_return_url: http://localhost:4200/auth/login

    login:
      ui_url: http://localhost:4200/auth/login
      lifespan: 10m

    registration:
      lifespan: 10m
      ui_url: http://localhost:4200/auth/registration
      after:
        password:
          hooks:
            -
              hook: session

log:
  level: debug
  format: text
  leak_sensitive_values: true

secrets:
  cookie:
    - PLEASE-CHANGE-ME-I-AM-VERY-INSECURE

hashers:
  argon2:
    parallelism: 1
    memory: 128MB
    iterations: 2
    salt_length: 16
    key_length: 16

identity:
  default_schema_url: file:///etc/config/kratos/identity.schema.json

courier:
  smtp:
    connection_uri: smtps://test:test@mailslurper:1025/?skip_ssl_verify=true&legacy_ssl=true

console log

script.js:54

{id: '40e2646e-792f-4d00-a62e-b7e0d9346633', type: 'browser', expires_at: '2021-11-26T10:48:45.357702536Z', issued_at: '2021-11-26T10:38:45.357702536Z', request_url: 'http://localhost:4201/self-service/login/browser', …}

localhost/:1

Access to fetch at 'http://localhost:4201/self-service/login?flow=40e2646e-792f-4d00-a62e-b7e0d9346633' from origin 
 http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

script.js:48

POST http://localhost:4201/self-service/login?flow=40e2646e-792f-4d00-a62e-b7e0d9346633 net::ERR_FAILED

Kratos log

kratos_1          | time=2021-11-26T11:18:52Z level=info msg=started handling request func=github.com/ory/x/reqlog.(*Middleware).ServeHTTP file=/go/pkg/mod/github.com/ory/[email protected]/reqlog/middleware.go:131 http_request=map[headers:map[accept:application/json accept-encoding:gzip, deflate, br accept-language:en-US,en;q=0.9 connection:keep-alive origin:http://localhost:4200 referer:http://localhost:4200/ sec-fetch-dest:empty sec-fetch-mode:cors sec-fetch-site:same-site sec-gpc:1 user-agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36] host:localhost:4201 method:GET path:/self-service/login/browser query:<nil> remote:172.22.0.1:35364 scheme:http]
kratos_1          | time=2021-11-26T11:18:52Z level=info msg=completed handling request func=github.com/ory/x/reqlog.(*Middleware).ServeHTTP file=/go/pkg/mod/github.com/ory/[email protected]/reqlog/middleware.go:139 http_request=map[headers:map[accept:application/json accept-encoding:gzip, deflate, br accept-language:en-US,en;q=0.9 connection:keep-alive origin:http://localhost:4200 referer:http://localhost:4200/ sec-fetch-dest:empty sec-fetch-mode:cors sec-fetch-site:same-site sec-gpc:1 user-agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36] host:localhost:4201 method:GET path:/self-service/login/browser query:<nil> remote:172.22.0.1:35364 scheme:http] http_response=map[headers:map[access-control-allow-credentials:true access-control-allow-origin:http://localhost:4200 access-control-expose-headers:Content-Type, Set-Cookie cache-control:private, no-cache, no-store, must-revalidate content-type:application/json; charset=utf-8 set-cookie:csrf_token_8b1890db27d2c7d9895be7b5bb43da0ca1de0cd1026abeeaf1030af1baea31ba=ntRHQW17Z1GVF/WOdGH2mX0QS/1oh58XEoeA6A3Y8Fk=; Path=/; Max-Age=31536000; HttpOnly; SameSite=Lax vary:Origin] size:1304 status:200 text_status:OK took:157.879µs]

Observations

I got a successful response after sending a request to the init login flow endpoint. However, when I submit a login form, the request is rejected.

Answered by Leo843

Nov 26, 2021

Ok, found the issue!

Content-Type was not included in the allowed_headers: list in Kratos configuration.
After that I got a CSRF issue because I did not set credentials: 'include' when calling fetch.

Hello @vinckr,
I got the image version from a copy/paste alongside the compose.yml file, there is no reason to not upgrade.
Thank you for your reply!

View full answer

vinckr · 2021-11-26T12:51:19Z

vinckr
Nov 26, 2021
Maintainer

Hello @Leo843,
welcome 👋
Are you running Kratos in Docker? Any reason you are not using Ory Kratos v 0.8.0?
Could it be a problem with the TLD? It seems to be consistently localhost though looking at your config.
In any case see if anything here can help you: Common CSRF Pitfalls and if the problem persists me know.

0 replies

Leo843 · 2021-11-26T13:37:35Z

Leo843
Nov 26, 2021
Author

Ok, found the issue!

Content-Type was not included in the allowed_headers: list in Kratos configuration.
After that I got a CSRF issue because I did not set credentials: 'include' when calling fetch.

Hello @vinckr,
I got the image version from a copy/paste alongside the compose.yml file, there is no reason to not upgrade.
Thank you for your reply!

0 replies

jaya-kumar-softobiz · 2021-12-16T09:39:26Z

jaya-kumar-softobiz
Dec 16, 2021

Hey @Leo843 I am using this example to understand ory kratos flow. Hope you don't mind few questions

I was wondering where are you using this fetchLoginForm() function in the above script.js main method. Looks like you are fetching csrf_token using initLoginFlow() itself !
If so, what is the use of this fetchLoginForm()
In case, if password is weak/invalid, how are you capturing the error message and displaying it to the user ?
Is there a reason why you are not using @ory/kratos-client sdk ? Is it having any issues ?
If possible, can you please provide a working repo(I am using VueJs though)

@vinckr Hey, what is the difference between @ory/kratos-client and @oryd/kratos-client SDKs (Please notice the 'd', second one is 'oryd')
which one should I use?

2 replies

vinckr Dec 16, 2021
Maintainer

@jaya-kumar-softobiz Hello 👋
The @oryd/kratos-client is deprecated, please use
https://www.npmjs.com/package/@ory/kratos-client

You can also get the "official" links here always:
https://www.ory.sh/kratos/docs/next/sdk/

jaya-kumar-softobiz Dec 16, 2021

Thanks for the quick reply @vinckr

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rejected by CORS on client-side browser login flow #1993

{{title}}

Replies: 3 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Rejected by CORS on client-side browser login flow #1993

Leo843 Nov 26, 2021

index.html

js/script.js

Kratos image

Kratos configuration

console log

Kratos log

Observations

Replies: 3 comments · 2 replies

vinckr Nov 26, 2021 Maintainer

Leo843 Nov 26, 2021 Author

jaya-kumar-softobiz Dec 16, 2021

vinckr Dec 16, 2021 Maintainer

jaya-kumar-softobiz Dec 16, 2021

Leo843
Nov 26, 2021

Replies: 3 comments 2 replies

vinckr
Nov 26, 2021
Maintainer

Leo843
Nov 26, 2021
Author

jaya-kumar-softobiz
Dec 16, 2021

vinckr Dec 16, 2021
Maintainer