Security_csrf_violation errors when bundled with Capacitorjs

[OliverGeneser]

I'm currently hosting my Kratos instance on auth.example.com and my main application on example.com.
Now i'm trying to bundle my main application with Capacitorjs and I corrected my CORS, but now i'm getting security_csrf_violation errors.

The Capacitorjs app uses the domains:
http://localhost
ionic://localhost

How would I fix the CSRF errors?

[jonas-jonas]

I am not familiar with Capacitorjs, but it looks like, it is a cross-platform framework (similar to React Native). From that, I am guessing you're using the API endpoints to initiate flows, but are still sending the requests from a browser context (for testing and development). Is that correct? And are you also using the Ory SDKs?

If that's the case, you need to disable sending credentials (e.g. cookies) by setting withCredentials to false, because otherwise Kratos will assume you're using the API flows with a browser, which is a security risk. See also https://github.com/ory/kratos-selfservice-ui-react-native/blob/master/src/helpers/sdk.tsx#L33 and the docs on API flows.

[OliverGeneser]

@jonas-jonas Thanks for your answer! To clarify i'm using the ORY Javascript/Typescript SDK and Capacitorjs is a cross-platform bundler, so yes similar to React Native.
I have already tried disabling withCredentials, but i'm still getting the error...

[OliverGeneser]

I should have clarified that I got that error when testing the bundle on Android.

So to use Kratos on Android in a production environment I need to run the Kratos instance with the --dev flag and DEV_DISABLE_API_FLOW_ENFORCEMENT???

[jonas-jonas]

No, of course not. When you're sending the request from a native environment, it shouldn't contain the Origin header, as that's a safety feature of browsers.

I should have clarified that I got that error when testing the bundle on Android.

Which error exactly?

[OliverGeneser]

I really appreciate your help :)

I got this error when using the createNativeLoginFlow in the Capacitorjs bundle running on my android phone
The HTTP Request Header included the "Origin" key, indicating that this request was made as part of an AJAX request in a Browser. The flow however was initiated as an API request. To prevent potential misuse and mitigate several attack vectors including CSRF, the request has been blocked. Please consult the documentation.

I believe it's because Capacitorjs sets the Origin to http://localhost on android and capacitor://localhost on IOS DOC and therefore it should be a createBrowserLoginFlow if I'm not mistaken?

Would it help with a minimal repo, so you can test for yourself?

[jonas-jonas]

Ah, I see. That is indeed an issue, and skimming over the documentation, there does not seem to be a way to turn it off. It seems that after all, you might need to use the browser based flows here, as the framework seems to use a WebView under the hood, so cookies might work. However, now we are back at square one. Did you include the csrf_token from the ui in the API call?

Alternatively, you could use their native HTTP client to work around the Origin issue, though that means you can no longer use the API.

[OliverGeneser]

I have based my pages on the Elements example for react Elements

// Get the flow based on the flowId in the URL (.e.g redirect to this page after flow initialized)
  const getFlow = useCallback(
    (flowId: string) =>
      sdk
        // the flow data contains the form fields, error messages and csrf token
        .getLoginFlow({ id: flowId })
        .then(({ data: flow }) => setFlow(flow))
        .catch(sdkErrorHandler),
    [],
  )

  // initialize the sdkError for generic handling of errors
  const sdkErrorHandler = sdkError(getFlow, setFlow, "/login", true)

  // Create a new login flow
  const createFlow = () => {
    const aal2 = searchParams.get("aal2")
    sdk
      // aal2 is a query parameter that can be used to request Two-Factor authentication
      // aal1 is the default authentication level (Single-Factor)
      // we always pass refresh (true) on login so that the session can be refreshed when there is already an active session
      .createBrowserLoginFlow({ refresh: true, aal: aal2 ? "aal2" : "aal1" })
      // flow contains the form fields and csrf token
      .then(({ data: flow }) => {
        // Update URI query params to include flow id
        setSearchParams({})
        // Set the flow data
        setFlow(flow)
      })
      .catch(sdkErrorHandler)
  }

  // submit the login form data to Ory
  const submitFlow = (body: UpdateLoginFlowBody) => {
    // something unexpected went wrong and the flow was not set
    if (!flow) return navigate("/login", { replace: true })

    // we submit the flow to Ory with the form data
    sdk
      .updateLoginFlow({ flow: flow.id, updateLoginFlowBody: body })
      .then(() => {
        // we successfully submitted the login flow, so lets redirect to the dashboard
        navigate("/", { replace: true })
      })
      .catch(sdkErrorHandler)
  }
``

[OliverGeneser]

Headers

POST
	https://accounts.example.com/self-service/login?flow=0da37b13-d331-408a-b400-b42ad43c39bc
Status
403
Forbidden
VersionHTTP/1.1
Transferred1.20 kB (794 B size)
Referrer Policystrict-origin-when-cross-origin
Request PriorityHighest

    	
    Access-Control-Allow-Credentials
    	true
    Access-Control-Allow-Origin
    	http://127.0.0.1:3000
    Access-Control-Expose-Headers
    	Content-Type, Set-Cookie
    Cache-Control
    	private, no-cache, no-store, must-revalidate
    Connection
    	keep-alive
    Content-Length
    	794
    Content-Type
    	application/json
    Date
    	Mon, 27 Feb 2023 09:57:59 GMT
    Server
    	nginx/1.18.0 (Ubuntu)
    Vary
    	Origin
    Vary
    	Cookie
    	
    Accept
    	application/json, text/plain, */*
    Accept-Encoding
    	gzip, deflate, br
    Accept-Language
    	en-US,en;q=0.5
    Connection
    	keep-alive
    Content-Length
    	176
    Content-Type
    	application/json
    DNT
    	1
    Host
    	accounts.example.com
    Origin
    	http://127.0.0.1:3000
    Referer
    	http://127.0.0.1:3000/
    Sec-Fetch-Dest
    	empty
    Sec-Fetch-Mode
    	cors
    Sec-Fetch-Site
    	cross-site
    Sec-GPC
    	1
    User-Agent
    	Mozilla/5.0 (Windows NT 10.0; rv:110.0) Gecko/20100101 Firefox/110.0

Request

csrf_token	"U/Pr+DeER7Njh/gexAs1W16XxjSfDB3/fqIPKnKxNGDlR2NWxyidLunz1auuqJ0Y2MKmAM8qycVMgvrcp0pMkg=="
identifier	"[email protected]"
method	"password"
password	"test1234"

Response

error	Object { id: "security_csrf_violation", code: 403, status: "Forbidden", … }
id	"security_csrf_violation"
code	403
status	"Forbidden"
reason	"Please retry the flow and optionally clear your cookies. The request was rejected to protect you from Cross-Site-Request-Forgery (CSRF) which could cause account takeover, leaking personal information, and other serious security issues."
details	Object { docs: "https://www.ory.sh/kratos/docs/debug/csrf", hint: "The anti-CSRF cookie was found but the CSRF token was not included in the HTTP request body (csrf_token) nor in the HTTP Header (X-CSRF-Token).", reject_reason: "The HTTP Cookie Header was set and a CSRF token was sent but they do not match. We recommend deleting all cookies for this domain and retrying the flow." }
message	"the request was rejected to protect you from Cross-Site-Request-Forgery"

[optimix]

Using the Http Capacitor Plugin fixes the Origin issue when running the app in the emulator or on the phone.

--dev flag and DEV_DISABLE_API_FLOW_ENFORCEMENT are useful for testing purposes when developing using a browser (without emulator), but never use this in production.