I'm working on a react project in team. We are using a few third party services and these services require api keys. Right now We are storing these key right in the code. As I know It's not good and dangerous.
I tried to find some recommendations in that regard. All ways to solve this problem I see now are:
create .env file and store all key there (but in this case I need to share my keys with other members of the team)
or move all keys to server and always make a calls to the server in order to get required information (but in this case I have no idea how to work with external components which are require keys, for example google maps/places/drawing and so on).
Which way are you using in your team and why? I would like to understand what's the best solution for me.
Thanks!
You cannot really hide an API key used for a client-side API such as JavaScript API and its services. The right way to secure your API key is to add API key restrictions.
Check out Google's guide on API Key Best Practices. You may also want to have a look at this answer.
Hope this helps!
Related
What is the best, most secure and professional way to store a user's jwt token after logging into React?
I see many people saying that using localStorage is a good way.
For example:
localStorage.setItem("token", "ey.......")
Others say to use a library like Redux or others.
Could someone advise me?
Thanks
Redux hasn't built-in persistent storage. It means on refresh of the page your key might be lost, and you need to re-login(authorize) once again. There is no "correct" way, there is "desired behaviour".
As already was suggested to you in comments you can use also cookies as a storage of the key, and I think it is one of the most preferable ways for now, as it is kinda safe solution.
Redux has middleware to persist its state. You can choose there what kind of storage you want to use as a long-term storage.
But, I wouldn't recommend you add redux to the project just to have it.
And there is a good answer on difference between most popular browser storages.
Read carefully and choose smart, there are some major differences like scope and secure between them.
Although storing data in localStorage is not the worst choice. In my opinion the best, most secure and professional way will be following OWASP guide.
They suggest using sessionStorage with browser fingerprint as a precaution along with CSP
just a bit confused as i found both solutions after a day of research.
some suggest to use "pip install dj-stripe" and add keys and other options in "settings.py". Then the script in frontend to get redirect button
and some suggest the use of "npm install --save #stripe/react-stripe-js #stripe/stripe-js", and add keys in "app.js" or a designated js file.
i would like to know if it differs (security ,efficiency,.. wise), or is there a concrete way of doing it (best practice way) and how,
thank you.
Both, depending on which key your referring to.
Publishable API keys are meant solely to identify your account with
Stripe, they aren’t secret. In other words, you can safely publish
them in places like your Stripe.js JavaScript code, or in an Android
or iPhone app.
Secret You must keep your secret API keys confidential
and only store them on your own servers. You must not share your
secret API key with any third parties. Your account’s secret API key
can perform any API request to Stripe without restriction. If Stripe
believes that your secret API key has been compromised, we may cancel
and reissue it, potentially resulting in an interruption to your
Stripe services.
Read thru a lot of posts and articles on how people handle api keys. I think some made it secure to get api keys via Node Server, some store it at .env file.
Sample posts I've read
https://www.rockyourcode.com/secret-keys-in-react/
https://github.com/react-boilerplate/react-boilerplate/issues/1744#issuecomment-303112505
My situation:
Currently I'm storing my API KEYs in .env files, because I'm uglifying my code in React. Those files are unreadable even via Inspect Element, but now all my api keys are exposed in readable format.
My use case:
My website don't require sign in, hence no authentication needed. Basically it's API KEY for firebase analytics. I don't think it make sense to create a Node Server to get the api key here? (And again, I don't need authentication)
How can I better handle the API KEYs?
I don't think exposing the Firebase key is a security threat as per this article: https://medium.com/#paulbreslin/is-it-safe-to-expose-your-firebase-api-key-to-the-public-7e5bd01e637b
GCP usually allows you to restrict api keys by domain. That maybe one way to secure your config and prevent other people from spoofing requests as your project.
In any other situation however, I would not expose api keys in client-side code and have an intermediate server or a cloud-function that uses it instead.
I'm looking at using the Angular Azure Mobile Service Client for a project, I saw this sample code:
angular.module('your-module-name').constant('AzureMobileServiceClient', {
API_URL : 'https://<your-api-url>.azure-mobile.net/',
API_KEY : '<your-api-key>',
});
Is it safe to use the API Key in an AngularJS app like this (or any JavaScript based client)? I'm unsure what someone could potentially do if they had this key?
Found this in the Azure Mobile Services documentation:
With default permissions, anyone with the app key may call the custom
API. However, the application key is not considered a secure
credential because it may not be distributed or stored securely.
Consider restricting access to only authenticated users for additional
security.
It is'Safe' depending on what you are trying to do. Javascript and any keys in it can be read by everyone. This is key is not meant to be used as a password to access important information. Instead it is made to prevent malevolent abuse of your application.
For example if someone is trying to log in 1,000 times per second with every possible password/username combination, they are submitting this key with each request. So you could throttle, or block anyone using this key. Then you would issue a new key to your apps. If you have a system for issuing those keys you might even identify the person that was doing it.
It can stop DDOS, Bruteforce, and some other abuses
I am somewhat new to programming, have some experience with VBA, but thats it. I am learning Filemaker at the moment and I am getting along quite nicely. I want to let FM automaticly enter certain appointments and reminders into my google calendar.
Now, I know that the calendar has an API, and I know that that API is the interface with which I can communicate with it. But I am lacking a step in my knowledge ladder, because the documentation is thoroughly confusing. I need to know what to use, in order to tell the calendar what to enter where. Is it like some compound url I construct? How do I login?
These are all questions that pop up. I don't expect you to answer those, but rather if you can point me to the right tutorials I can read to get this knowledge.
I hope I didn't burden you guys too much.
thx in advance
I'm one of the authors of Zulu, a product we built specifically to sync FileMaker to Google Calendar, using a bi-directional sync. You can also turn Zulu into your own CalDAV server if you want to go that route.
Good luck!
Don't take this wrong but you may be biting off too much. I have been programming for 30 years and it took me a couple of days to gather the information needed to interact with the Google APIs (the OAuth2 authentication can be really confusing at first).
My sugestion would be to look at importing calendars into Google Calendars using either CSV (https://support.google.com/calendar/answer/45656) or ICS (https://support.google.com/calendar/answer/45656) format. You should be able to generate those formats with a little bit of Filemaker scripting.
But since you asked:
You need the OAUTH2 offline access, with a refresh token you would
store somewhere.
You will use the refresh token to get an auth token
You will make requests using HTTPS GETS or POSTS (see the Calendar
API explorer), with the auth token in the Authorization header.
Since there is no Google Calendar API for FileMaker :-), you would
have to know some details of the HTTP protocol to send a properly
formatted request, you will be working at a lower level than you
would be if using a Python, Java or .NET library.
You will get back
JSON responses which you will have to parse.
There are a couple of ways you can try to do this quickly:
Use Zapier (http://zpr.io/VhK - affiliate link) to create a webhook, then use a hidden webviewer in FileMaker to create the event. Try this as an example: http://zpr.io/fqg7
Use a plug-in, like this one https://www.feedzon.com/products/fmgcal/. I've never used that particular one before, but it looks fairly straightforward.
If you want to go whole-hog, it is also possible to use scripts in FileMaker to write to the Google Calendar API, but it's a lot more work. The plugin is probably the easiest route to go.
If you don't want to use a plugin, I would recommend starting with a Zapier webhook, as it greatly simplifies the work needed to hook into the Google Calendar API.