Webapp behind Cloudflare Access cant access Cookies
Hello I have a Webapp which is behind Access. I want to validate the CF_Authorization Cookie but when i try to get document.cookie i only get an empty string. On the same page when i open the DevTools and go to Application > Cookies > DOMAIN.TLD > I see the cookies with the current domain.
Do i have to enable anything to get this working?
29 Replies
@Louis please upload your image on external sources(e.g. Imgbb.com) and put link here because the discord media server is having problem now
one sec
i want to access cf_authorization but i cant because document.cookie returns an empty string @Minsu Kim
CF_Authorization is HTTP Only cookie in this case, so you cannot access with document.cookie
@Louis
is there any way to get the jwt in JS?
You should get this attribute in backend level.
You can search how to get clients’ cookie in backend language which you are using
If you don't know how to use a backend framework but know some intermediate level of JS, you can create CF workers for this.
yeah tried that but the problem is that when i protect my backend api i have to use service auth because else i only get a 302 when i try to call it (because of the redirect to the login form of access) and with the service auth policy i dont get the identity in the jwt
So your backend is just for api right?
yes
its a worker
Front-end is dedicated for your case right?
yes
so
the frontend is
app.example.com -> Protected with Access with allow rule and access group etc.
api.example.com -> Protected with service auth and service token
Then I am so sorry for saying this, there is no way to get CF_Authorization
okay sad
thx
then i have to find an alternative way
Due to Chrome and more browsers’ security policy,
It is strictly prohibited for getting http only cookie in front-end side
I suggest that you make your API server and host by yourself,
And use the reverse proxy trick with your server
It means
App.example.com -> your frontend
App.example.com/api -> Your API server
Then the credentials will be shared with API server, which means you can feel free to use credentials
good point cant i do this with cloudflare worker routes?
thank you so much
it works
@Minsu Kim fyi: i now changed the api to the /api endpoint like you said and added 2 policys to the application. one with access and one with service token because i need the service token for mobile app authentication (we also have a flutter app which authenticates via service token before the user logs in)
you can do this but not recommended with free plan.
if you using paid plan for workers, yes feel free to use
yeah i have the paid workers plan
with paid u mean for workers not the domain right? so i pay 5$/month for workers subscription
Yep workers
good
because reverse proxy means workers proxy your service, user accesses workers.
It means all traffic will comes to workers,
okay
then you will be charged for this and asked for pay, but you have subscription, you can do this with workers
find some references from GitHub and Google
alright
thank you!
I will give you some piece of code that I am using for my service
@Louis this code is made with deno, but you can simply migrate to workers if you have some knowledge about how workers works.
https://github.com/LuanRT/YouTube.js/blob/main/examples/browser/proxy/deno.ts
GitHub
YouTube.js/examples/browser/proxy/deno.ts at main · LuanRT/YouTube.js
A wrapper around YouTube's internal API — reverse engineering InnerTube - LuanRT/YouTube.js
this code is working with __host parameter, but you may want to replace with constant value
you can migrate this code to workers by:
install wrangler and workerd
remove deno import statement in line 1 and port variable in line 3
remove statement that calling serve function in line 84
write down code that exports handler function to run in workers
deploy it by wrangler cli, it will be works
thank you! i will look into it!