b1ueh4wk
b1ueh4wk
CDCloudflare Developers
Created by Bierman on 4/10/2024 in #pages-help
next-on-pages process.env values are undefined
I know that this isn't the most desired function, but at the very entrance of your application, can you console.log the process object? and can you console.log the process.env object? I was able to access the process.env on my front-end application using console.logs, and I was able to find my environment variables. Cloudflare Pages has 2 "environments" Production & Preview; You should define these environment variables for both so if you are testing on the "dev" environment you will still be able to access these. Workers & Pages > YOUR_PAGE > Settings > Choose Environment: > Select Production OR Preview. I was having an issue with my changes to my pages being cached, and when I would push up the changes I realized that my changes were not live (it was still returning the cached previous version). So for a while I thought I couldn't access my process.env because I wasn't getting console.logs. Additionally I would update the keys and cloudflare would have a problem deploying the new keys, so I had to push updates a few times. Console.logs shouldn't remain in the application of course, and any environment variables used in front-end applications will be exposed to your users. Using devtools users will be able to retrieve the tokens and keys to api's.
3 replies
CDCloudflare Developers
Created by mattam on 9/2/2024 in #pages-help
Dashboard environment variables not available on process.env at build time
I know that this isn't the most desired function, but at the very entrance of your application, can you console.log the process object? and can you console.log the process.env object? I was able to access the process.env on my front-end application using console.logs, and I was able to find my environment variables. Cloudflare Pages has 2 "environments" Production & Preview; You should define these environment variables for both so if you are testing on the "dev" environment you will still be able to access these. Workers & Pages > YOUR_PAGE > Settings > Choose Environment: > Select Production OR Preview. I was having an issue with my changes to my pages being cached, and when I would push up the changes I realized that my changes were not live (it was still returning the cached previous version). So for a while I thought I couldn't access my process.env because I wasn't getting console.logs. Additionally I would update the keys and cloudflare would have a problem deploying the new keys, so I had to push updates a few times. Console.logs shouldn't remain in the application of course, and any environment variables used in front-end applications will be exposed to your users. Using devtools users will be able to retrieve the tokens and keys to api's.
6 replies
CDCloudflare Developers
Created by mattam on 9/2/2024 in #pages-help
Dashboard environment variables not available on process.env at build time
6 replies
CDCloudflare Developers
Created by mattam on 9/2/2024 in #pages-help
Dashboard environment variables not available on process.env at build time
I am having the same problem!
6 replies
CDCloudflare Developers
Created by Bierman on 4/10/2024 in #pages-help
next-on-pages process.env values are undefined
I am running into the same issue.
3 replies
CDCloudflare Developers
Created by b1ueh4wk on 9/17/2024 in #general-help
Zero Trust User Permissions
Oh thank you very much for this information @Chaika ! I will have to look into this.
6 replies
CDCloudflare Developers
Created by b1ueh4wk on 9/17/2024 in #general-help
Zero Trust User Permissions
This creates a new header on the request, and I can search for that value in my Vue application to display the different permissions.
6 replies
CDCloudflare Developers
Created by b1ueh4wk on 9/17/2024 in #general-help
Zero Trust User Permissions
Figured out a solution: Created a worker that works with that Cloudflare page specifically (Click on worker, Go to Settings, Go to Triggers, Add Route). Then I added the javascript seen above ^
6 replies
CDCloudflare Developers
Created by b1ueh4wk on 9/17/2024 in #general-help
Zero Trust User Permissions
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
// Step 1: Get the JWT token from the request headers
const jwtToken = request.headers.get('Cf-Access-Jwt-Assertion')
let userEmail = null
if (jwtToken) {
// Step 2: Decode the JWT token and extract the email
userEmail = getEmailFromJwt(jwtToken)
}
// Step 3: Forward the request to the origin server (your Vue app)
const response = await fetch(request)
// Check if the response is valid
if (!response) {
return new Response('Error fetching the origin response', { status: 502 })
}
// Step 4: Create a new Headers object from the response headers
let newHeaders = new Headers(response.headers)

// Step 5: Determine isAdmin value based on email
let isAdmin = "false"
if (userEmail === '[email protected]' || userEmail === '[email protected]') {
isAdmin = "true"
}

// Step 6: Set the isAdmin header
newHeaders.set('isAdmin', isAdmin)

// Step 7: Create a new Response with the modified headers
let newResponse = new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: newHeaders,
})

return newResponse
}

// Helper function to decode JWT and extract the email
function getEmailFromJwt(token) {
try {
// Split the token into header, payload, and signature
const base64Url = token.split('.')[1]
const base64 = base64UrlReplace(base64Url)
const jsonPayload = atob(base64)
const payload = JSON.parse(jsonPayload)
return payload.email
} catch (e) {
console.error('Error decoding JWT:', e)
return null
}
}
// Helper function to replace URL-safe base64 characters
function base64UrlReplace(base64Url) {
// Replace '-' with '+' and '_' with '/'
base64Url = base64Url.replace(/-/g, '+').replace(/_/g, '/')
// Pad with '='
while (base64Url.length % 4) {
base64Url += '='
}
return base64Url
}
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
// Step 1: Get the JWT token from the request headers
const jwtToken = request.headers.get('Cf-Access-Jwt-Assertion')
let userEmail = null
if (jwtToken) {
// Step 2: Decode the JWT token and extract the email
userEmail = getEmailFromJwt(jwtToken)
}
// Step 3: Forward the request to the origin server (your Vue app)
const response = await fetch(request)
// Check if the response is valid
if (!response) {
return new Response('Error fetching the origin response', { status: 502 })
}
// Step 4: Create a new Headers object from the response headers
let newHeaders = new Headers(response.headers)

// Step 5: Determine isAdmin value based on email
let isAdmin = "false"
if (userEmail === '[email protected]' || userEmail === '[email protected]') {
isAdmin = "true"
}

// Step 6: Set the isAdmin header
newHeaders.set('isAdmin', isAdmin)

// Step 7: Create a new Response with the modified headers
let newResponse = new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: newHeaders,
})

return newResponse
}

// Helper function to decode JWT and extract the email
function getEmailFromJwt(token) {
try {
// Split the token into header, payload, and signature
const base64Url = token.split('.')[1]
const base64 = base64UrlReplace(base64Url)
const jsonPayload = atob(base64)
const payload = JSON.parse(jsonPayload)
return payload.email
} catch (e) {
console.error('Error decoding JWT:', e)
return null
}
}
// Helper function to replace URL-safe base64 characters
function base64UrlReplace(base64Url) {
// Replace '-' with '+' and '_' with '/'
base64Url = base64Url.replace(/-/g, '+').replace(/_/g, '/')
// Pad with '='
while (base64Url.length % 4) {
base64Url += '='
}
return base64Url
}
6 replies