Last active
May 27, 2021 02:20
-
-
Save sid-r-singh/0f86977ab51a5a88512365e9c3a49631 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
My aim: To create a serverless funcion which: | |
1. receives a POST request | |
2. forwards the same to Firebase | |
I didn't want to directly send data to firebase URL from my website since in that way my firebase URL will be exposed. | |
So I thought of creating a serverless function which can accept POST request from my endpoint/website & | |
then forward it to Firebase, so that in the whole process my firebase URL is not exposed anywhere. | |
As a summary: this function acts as an intermediate between my website & Firebase | |
I just wish to have one security mechanism in place in this function i.e. I check whether the request was from allowed origins or not. | |
What I did till now: | |
I looked at few examples from the cloudfare workers website & modified them. Here is the final version which is not working. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Handle incoming fetch events with handleRequest function | |
addEventListener('fetch', event => { | |
event.respondWith(handleRequest(event)) | |
}) | |
// A list of allowed origins that can access our backend API | |
const allowedOrigins = [ | |
'https://nameless-darkness-755c.sidh.workers.dev', | |
"http://localhost:3000" | |
] | |
// A function that returns a set of CORS headers | |
const corsHeaders = origin => ({ | |
'Access-Control-Allow-Headers': '*', | |
'Access-Control-Allow-Methods': 'POST', | |
'Access-Control-Allow-Origin': origin | |
}) | |
// Check the origin for this request | |
// If it is included in our set of known and allowed origins, return it, otherwise | |
// return a known, good origin. This effectively does not allow browsers to | |
// continue requests if the origin they're requesting from doesn't match. | |
const checkOrigin = request => { | |
const origin = request.headers.get("Origin") | |
const foundOrigin = allowedOrigins.find(allowedOrigin => allowedOrigin.includes(origin)) | |
return foundOrigin ? foundOrigin : allowedOrigins[0] | |
} | |
// Make requests based on the request body to Unsplash API | |
const sendToFirebase = async event => { | |
// Parse the key "query" from a JSON body in the request | |
const { query } = await event.request.json() | |
console.log(query) | |
const url="https://feedback-gatsby-default-rtdb.asia-southeast1.firebasedatabase.app/data.json" | |
const init = { | |
body: JSON.stringify(query), | |
method: "POST", | |
headers: { | |
"content-type": "application/json;charset=UTF-8", | |
}, | |
} | |
const response = await fetch(url, init) | |
console.log(response) | |
// Check that the request's origin is a valid origin, allowed to access this API | |
const allowedOrigin = checkOrigin(event.request) | |
} | |
async function handleRequest(event) { | |
// If an OPTIONS request comes in, return a simple | |
// response with the CORS information for our app | |
if (event.request.method === "OPTIONS") { | |
// Check that the request's origin is a valid origin, allowed to access this API | |
const allowedOrigin = checkOrigin(event.request) | |
return new Response("OK", { headers: corsHeaders(allowedOrigin) }) | |
} | |
// If a POST request comes in, handle it using the getImages function | |
if (event.request.method === "POST") return sendToFirebase(event) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment