Following the documentation the best way to add env variables is to add them on your server but how to processed secret url that should be in root component (e.g. Google Api )?
Pass them through loader don't resolve this problem because of security. Any user will be able to see variables in network tab
[Env variable in network tab][1]
[1]: https://i.stack.imgur.com/VizIt.png
Any API key that needs to stay secret needs to be used on the server only and not returned in a loader response.
That being said, for Google Maps client-side functionality, you have no choice but to expose your API key to the client. You should instead secure it using Google's recommended practice of Restricting your API Key to specific domains and APIs.
Related
I am using different third party API keys in my reactjs-firestore project. But I can't find a way to secure them in firebase hosting. How can I hide these API keys in firebase hosting?
For example, in Netlify hosting services they provide environment variables feature which can be used to secure the API keys.
that is I can just store the API keys in the variables in netlify and it will be retrieved from there which will be secured.
But in firebase how do I do this?
I can't seem to find a similar setting wherein I can store the keys as environment variables in the hosting services.
if there is no such feature is there another way to secure these API keys?
and for the firebase API keys,
I have already read some answers and understood that firebase API keys will not be hidden.
is there at least some way to secure these firebase API keys to just one secured URL at least? (I know that writing security rules is the best approach but am trying to find other options as well).
I can't seem to find a way to secure firebase project API key usage to one secured URL.
I have tried to find ways to secure the API key but I haven't been successful.
below is how I retrieve data in reactjs code
axios.post(`https://data.retrieval.com/1/data?key=API_KEY`, data)
I am trying to hide the API_KEY in the production code
I want to secure third party API keys in my hosted website.
and also restrict my firebase project API key to just one secure URL.
am not able to do this now.
any suggestions or solutions?
Thank you for trying to help.
and thank you for your time
If you're using the API key in client-side code, there is always the chance that a malicious user can find the key and abuse it. The only way to protect against this is to not use the API key in client-side code, or to have a backend system that can protect access based on something else (such as Firebase's server-side security rules).
Since your backend system likely doesn't have such a security model, you'll typically have to wrap their API in your own middleware that you host in a trusted environment such a server you control, or Cloud Functions. That's then where you ensure all access to the API is authorized, for example by setting up your own security system.
Not sure if this help, but my Firebase Cloud Function use this.
Create your secret by
firebase functions:config:set secret.API_KEY="THE API KEY"
Access your secret by using functions.config().secret.API_KEY
Note: This should only use for server use case, not in the client code. For server I meant Firebase Cloud Function or your backend.
The safe way I've found to store your third-party keys is using the Google Secrets Manager. It is now baked into the Firebase Functions SDK and works very well. You can find the information here, under the section titled "Store and access sensitive configuration information".
Two things worth mentioning:
There is a small bug in the syntax example, they forgot to add the https before onCall.
You'll need to give the service account which runs the cloud function when deployed access to the secrets. Here are the official docs on how to do that. If you are deploying through Firebase, you'll want to look for the service account whose address is [project-name]#appspot.gserviceaccount.com. If you have any doubts about which service account is running the Cloud Function, look under the Details tab in the Cloud Functions section of Google Cloud Platform and it will show you that information. Also, under the Variables tab, you can see what secrets your Cloud Function has access to.
This process makes it really easy to manage third-party keys as you can manage them at your project level and not have to worry about them being stored else where or needing to manage .env files. It also works with the Firebase Emulators and uses the credentials of the user running the emulators for access.
Building create-react-app (v2) on Netlify hosting and need to deal with secret keys for payment processing and content pulls from CMS (Contentful).
CRA is exposing secret keys in the build output using 'process.env.REACT_APP" and CRA over writes the space and doesn't allow these keys to be hosted in the variable space and access at build time securely.
Is there best practice on the right type of approach to keep the keys secure?
You have two different cases here. Speaking about Contentful you're probably using the CDA. This API is read-only and has its own tokens. There is no harm by exposing it to the public and your react application with REACT_APP_.
A payment provider is a different story though. For this I'd recommend to using Netlify functions to not expose the token. This way your react application can use the function endpoint and your token stays safe. :)
I have a static React site that I am using to upload an image to s3 using an identity-pool in cognito. I did this more out of curiosity than anything.
i understand that one way to do this would be to upload my image to my server which could then upload it to s3.
but I want to know if there are any best practices for doing this from the client side directly without a server.
One of my concern in my current approach is that the identity pool id is public. Any feedback is helpful.
This resource Serverless Stack will guide you through exactly what you want to do, it has helped me configure similar "serverless" deployments.
The pattern to do what you are describing is as follows:
Users authenticate with the identity pool, this returns a JWT
Federated Identities returns AWS IAM credentials for valid JWT (note: the Federated Identity must have a Policy that allows the AWS IAM credentials to access S3)
Using AWS IAM credentials, user client can upload image to S3
In regards to the identity pool, your identity pool-id is infact a public resource, just like your web app. Your identity pool is secured by the fact that users must exist in the identity pool and must have the correct password for that user.
If you don't want to expose your id in your client codebase (you shouldn't), what I usually do is set the id as an environment variable in a .env file then use a package called dotenv to expose it to the .js file that needs the id. Then of course include the .env file in your .gitignore to avoid it being tracked in version control.
More info here: https://github.com/motdotla/dotenv
Maybe you can consider similar design as described here: https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_providers_oidc_cognito.html
A common pattern is to have your server authenticate the user request and return a pre-signed URL. This can then be used to do an upload directly to S3 using standard HTTP methods. See Uploading Objects Using Pre-Signed URLs.
Seems like your question about public identity pool is actually a different question. I'll keep my answer to the bulk of your question, as secure authentication is a whole other topic you should probably research first on your own.
I'd like to send requests against the Google Directions API. Google provides a Node.JS client library for the API. However, this AP is server-side only. Attempting to use it from a browser script results in a CORS failure. Multiple past answers (such as this one) indicate that this library simply can't be used in this way.
The alternative is to use the client-side JavaScript API. However, this requires adding a <script> tag to the document root. That's the wrong level of abstraction for my needs. I'd like to use a method from a library or dot-js file instead.
Following the advice given here, I'd like to ask: is there a module available through npm I can use to query the Google Directions API client-side?
It's not naively possible to access the Google Maps Directions API from the client side. Web browsers implement the Single-Origin Policy, which requires that any requests to a domain come from the same domain. Requires between domains are disallowed by default. Cross-domain requests can be enabled at the server lever by setting the right CORS headers on the endpoint, but the Google Maps servers choose not to do this.
There are two ways of working around this. One is to wrap the request using the Google API Auth library. However, I could not get this to work.
What did work was using a reverse proxy. This workaround is actually mentioned in the Google Directions API intro page (albeit obliquely). You will need to set up a server which forwards any requests to an API request, then returns that API request to the original requester. Since this is now a server-side request, SOP will not apply, and you will be good to go.
For an example implementation check out this repository on GitHub.
https://developers.google.com/maps/documentation/directions
This is the Directions API web service. It does not require adding a <script> tag.
You can make direct requests to the service as per the example:
https://maps.googleapis.com/maps/api/directions/json?origin=75+9th+Ave+New+York,+NY&destination=MetLife+Stadium+1+MetLife+Stadium+Dr+East+Rutherford,+NJ+07073&key=YOUR_API_KEY
once you have generated an API key and replaced YOUR_API_KEY in the request with your own key.
I’m planning an URL redirector service.
I want to listen for domains added by the users, check the URL for old paths and redirect the visitor to the right ones.
I was thinking about using App Engine (Java), but it seems as I can’t programmatically set customs domains. Is this info right?
Is there any Google Cloud service or set of services that I could use to accomplish what I need?
You are correct that you cannot programatically create custom domains in GAE.
Your best bet is to use a solution that provides an external IP address that isn't shared with other users - you can then accept all traffic and dispatch according to Host header.
You could do this using GCE (with or without LB) or GKE.