API Key storage in Ionic Securely - javascript

I am developing an Ionic 4 Application and it requires making http call to consume data from an API.For the same , there is a need to add key with http request.
I want to know , how can I store api key securely , instead of putting it directly into service while building .apk for my application.
I presume , there is no concept of environment file which was there in Angular.
I have tried putting in API key in config.xml but not sure wether it is a good practice to put in api key in config file and also not aware of how to read the same from config file to service file.
Since , there are not much pointers available online, requesting to help.
Thanks in advance.

You can store your api_key on the server and by using angular APP_INITIALIZER token you can call API to get api_key dynamically before app initializes and store them.
In this way, you can always handle your api_key via server. So if someone gets your code, he/she will not get your api_key.

Related

React Native - Securely storing

I have a React-Native app, and I have a PHP-backend server.
Now I'm trying to use my SMTP Password in my react-native app, so I can send email easily, react-native-smtp-mailer.
As I saw in other questions (How do I hide API key in create-react-app?), It is not a good idea to store it inside my .env file because React environment variables are embedded in the build and are publicly accessible.
However, there is an option to use my backend server to get my API key/Password.
You should really only save API keys or secrets in your backend such as Node / Express. You can have your client send a request to your backend API, which can then make the actual API call with the API key and send the data back to your client.
But I can't understand how to do it. If I'm creating an API call, but it's very easy to access it from Postman or something similar.
For example, I have http://api.com/getPass and it gives me my API key/Password however everyone can access it.
So my question is...
How Do I Do it to work secretly.
(It would be much easier if you can provide a Code example.)
Or should I do the emailing on my server side? (I Have to send Multiple images).
But If I do it on my server side, everyone with the "URL" can access it...
You could add the expo-secure-store module to your application which will give you a place to store the password and access it when needed without having to store it hard-coded in your source code. You could then provide an input element within the application where you could enter it once, saving it under a certain key in the store, and accessing it via that key when needed. It doesn't give you a place to permanently save it as part of the code, but the data would persist across launches.

Github Secrets to Vanilla JS files

I am building a static website, HTML, CSS, and Vanilla JS. I came to a point where I have to use MailChamp to send emails to the client whenever there is a form submission. Not so tricky, docs are very clear on how to do an API call. But I need to send an API_KEY with every request. Which is a problem. I do not want to save this secret key in the code. I have added it as a secret on github repo. But I am not sure how I can access it on Vanilla JS files. I tried the following,
process.env.API_KEY and API_KEY
I am getting this error, sendEmail.js:1 Uncaught ReferenceError: process is not defined
Which makes sense, because it's a static website. But I cannot think of any other way. If it was a node process it would have been very simple :/
Let's say I create an API endpoint, and the server where I can securely save API_KEY, how would I authenticate the request coming from the front-end/static website? Assuming that I cannot securely save the token on the client side.
There is no way to do it the way you want, i.e. with pure front end (FE) because it would mean that you need to send your secrets to them.
Whatever you send to the front end will always be accessible to your users, so it's not safe.
What you need to have is the back-end (BE), some kind of server that will receive an async call from the FE, connect to the external API and do whatever you want it to do, and then send some kind of confirmation to the FE that the process was successful.
Now, the BE will know your secrets, and this is fine because you control it and the users won't have access to it directly.
Now, you do not always need a full-blown application for that, some people are getting stuff done with platforms like Firebase, that can handle authentication of users for example for you.

Passing NodeJS data to Javascript

I have a web application with a client that receives data from a server. I have the data in NodeJS, but I want to pass the data to a Javascript file. The Javascript file is included in a HTML file, so I can't make the files communicate with eachother.
I am new to NodeJS, so it can be a stupid question, but anyones help is appreciated
This is for a project where I need have a data stream, and I need to pass it into a web application. I tried to pass the data to different page inside my application and then I tried to get that data on that page inside my web application via Javascript, but I couldn't make that work. I'm not even sure if its possible at this point.
Your node server can't communicate with your front-end without a specific way of communication like websocket, you have many other way to communicate with your front-end as node-server, take a look at server send event for example.
By the way your front-end can call your node server more easely with a get request as said #tomerpacific in comment.
For that you have to open a route with your express app. Routing with express
And for call it on a GET request, for that you can use the XMLHttpRequest, and if you have implemented jQuery on your front, you can use Ajax jQuery.

Store data got from javascript with node.js

I want to store the data i got from javascript with ajax in a folder to reuse them in my entire code, but i saw it was impossible to do with javascript and i work on local node.js server so do have any way to do that ?
i use twitch api and i receive an access token. I need to reuse it in other functions so i think the best way is to store this token.
i just discovered node.js so i don't understand how everything work.
Thank you

Protecting API Key in a JS application

I am new to JavaScript.
The help I wanted was to understand how to protect API Key used to access my Restful web services.
I am accessing some Restful web services using API keys and I want those API keys to be protected. As when I put API keys in Controllers they will be visible to users since Javascript code can be seen by the end user.
Is there anyway that I can register these as some variables and use in Controllers where end user who view the Javascript code cannot see API Key?
Thanks in advance!
if you need to protect anything do it on the server. You can proxy api calls on the server for instance, but there's no way you can protect anything with client side javascript code.
You are absolutely confused.
You are trying to achieve security by obscurity.
Everything that is on the client is transparently hackable.
The user should only be allowed to access a resource after a successful authentication and authorization. Period.
So you must store your API keys on the server if they are supposed to be secret (like provided by Facebook, ...)
(btw: remove the angularjs tag).
I am using AngularJS together with PlayFramework and seems like I can solve the issue as external web servcies/API's are accessed through Play controllers where controller methods are accessed by AngularJS model with
jsRouter.controllers.Application.tasks().ajax
So, the external API keys doesn't have to be in AngujarJS models.
Thanks all for help.

Categories