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.
Related
I am brand new to a lot of Azure technology. I have familiarity with Graph API and JavaScript but have limited knowledge of C#.
Problem:
I need to write an Azure Function that queries an Azure App Registration that has the application permission 'Reports.ReadAll' and I need to do this in a secure method. This is to get data from Microsoft Graph Api. I want to do it in a way without writing the App Registrations Client Credentials in the code as that might be risky.
End Goal:
I am planning on collect the response from the App registration call and getting a url to a CSV file which I will Store somewhere (likely SharePoint). But this questions is about the first part, sending a request to the app registration securely and getting a response.
I have done quite a bit of research so far, and it seems I need to achieve my goal by writing a function in C# or JavaScript (preferably JavaScript, but any solution is welcome). To get the security I need some bits on the Internet say I need to Use Azure Key Vault so I am not store Client Credentials in plain text in the code?
I also need to get the bearer token first it seems according to my research, and I need to then include that in the call for the report's data I need, but I haven't been having much luck their either.
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.
I'm creating custom chat window on a wordpress site (hosted outside Azure) for my bot using Direct line connector and Javascript, and to start conversation I need to specify Direct line SECRET or a TOKEN for my bot app.
To get a token i have to make a REST call to https://directline.botframework.com/v3/directline/tokens/generate and add to header "Authorization : Bearer SECRET".
I don't want to expose that SECRET publicly in my javascript file and I don't want to pass it as a URL parameter.
What are my other options?
How to get token without exposing my bot Direct line SECRET to client?
There is no front end solution, unfortunately. After your web page is served, all of its contents including all script files are available to be scrutinized by anybody who requested the page. The only way to hide your key is to use your server as a middle man, and store the secret there. Sorry for the crude drawing:
If your entire project is a static page, then this means substantial work is needed to set up a server. Thankfully, it's not as difficult to get a server up and running today as it was 10 years ago. If you're already familiar with JavaScript, then you'll be able to learn node.js quickly. Then, you can implement your server with a framework such as express which will do a majority of the heavy lifting for you.
I'm trying to build my first API to be consumed by a mobile application built with Ionic.
Before starting I'm looking into the architecture and I can not understand exactly how to make secure my API routes.
Let's say I have an endpoint like http://myapi/v1/get-items and my application doesn't need an user to be authenticated to view those items in the mobile app.
How should I protect that route from external queries, using Postman for example?
I wish that route to be not accessible unless is not requested by the application.
Looking on Google I can find many solution using basic authentication but all of those require an user to log in... What if my app doesn't have users to log in?
I'm a bit confused but I think there is a solution and I don't know it yet...
I hope you can help me to understand it.
EDIT:
My Question is totally different from the following: How to implement a secure REST API with node.js
I'm looking for solution that DO NOT require a User Authentication.
If you don't want to use User Auth through something like Passport then you can institute a whitelist in your Node API instead. express-ipfilter is an express middleware module that allows you to filter requests based on the request IP.
Requiring a login would be the cleanest and safest way to make sure your api remains private. However, if you want to keep external users out of your services without requiring a login, you will need to "sign" your requests. By that I mean doing something like encrypting a current timestamp on the client using a key known to both the server and the client app, adding that encrypted string as a header, receiving that header in your server, decrypting it and checking that it's not too old of a timestamp before you return a response.
It's not really safe (if someone can see the code they can see the encryption key) but it's an obstacle and it down't require logging in. See this for an example on encryption/decryption
Well, I created an API to manage for our websites some attachments uploads and store into Amazon S3 buckets
The scenario : Once visitor / user in the form and wants to submit it with attachment, once the file is selected then button clicked an Ajax request fire to the micro service API so it can store the file into S3 do some processing then return the direct link or identifier.
The question is : how can we authenticate the user using for example a short live token or something like that without being hijacked, mis-usage of the token..
In Javascript everything is visible to the visitor, and we try to not integrate any heavy process in the backend
If I got your question straight, you have a web interface in which files are uploaded to an S3 bucket and you need to make sure that in a certain back end API (such as REST) all file upload commands will have authentication and authorization.
The answer is highly dependent on your architecture but generally speaking, all Javascript calls are nothing but HTTP calls. So you need HTTP authentication/authorization. In general, the most straightforward method for REST over HTTP is the basic authentication, in which the client sends a credential in every single request. This may sound odd at first but it is quite standard since HTTP is supposed to be stateless.
So the short answer, at least for the scenario I just described, would be to ask the user to provide the credentials that Javascript will keep in the client side, then send basic authentication which the REST interface can understand. The server-side processes will then get such information and decide whether a certain file can be written in a certain S3 bucket.