Hidding api key in front end application - node.js

I am using polymer js for front-end and I am having a file where I am using google-map API how can I hide the API without using "dotenv" .I am using loopback framework.
How can i store the api key securely in backend and access it in the front-end.
It is recommended to have api key in backend and access it in client side , can anyone please explain a better way to achieve it.
For example-
in client side code i have js file i am using it this way..
google-map on-tap="_changeHeight" data-args="map" fit-to-markers map="{{map}}" max-zoom="18" id="googleMapLocatorAtmDetails" api-key="xxxxxxxxxxxxxxxxxxxxxxx"
But the recommended way is to store the api-key in server-side and access it in client side any idea?

Why not lock it down to your domain name in google maps?
Go to google cloud -> API & Services -> credential

Related

How to create a secure application for the subscriber user?

Summary
I need to create an application where the user will subscribe to a plan that will give him a consumption of requests to the backend.
Backend: I will use nodejs and express to create the backend
Frontend: I will use reactjs to create the frontend. I will create the admin panel for user control you account.
Detail
I need to create a plugin for Wordpress that will consume these requests from the user's account. As I've never worked with this type of structure, I don't know how to guarantee that these plugins are the client's own and not someone who took his credentials and is spending his plan.
I took a look at RSA encrypt to make a data signature, but I still don't understand the best way to create this application.
I also saw about JWT but the plugin in wordpress would not have the account credentials to use JWT as login, and usually plugins and REST API using public key and secret key or api key.
Another use would be embedding a form on another site or using the REST API.

How do I secure web API of my public website?

I have a public website developed using dot net core 3.0 which anyone can access. It basically allow users to search key information about a place.
So whenever user Search for any place I store the place information in SQL
But I am confused, how do I secure my web API. As anyone can see my JS and page source. And figure out API endpoint. Then any one can hit it using postman.
I have already configured HTTPS but is there anything I can do to secure it?
For this you can use JWT Authentication which is simple & best to secure our application.
Visit: https://jasonwatmore.com/post/2019/10/11/aspnet-core-3-jwt-authentication-tutorial-with-example-api

Node.js, Facebook Graph API - Upload file to facebook using a Node.js backend

I have an application who consist of a Node.js backend hosted on AWS and an Angular 2+ frontend. I am using the facebook graph API on the backend, however, when it comes to uploading things to facebook I'm getting into trouble.
If I want to upload a file, I need to upload it to my backend before, which will put it in an S3 bucket and then upload it from my backend to facebook. This seems to be a little heavy for me and I am really suspicious that it is the correct way to do it. Also, Facebook provides a javascript API that allows us to upload a file from a client to its platform, which seems less heavy.
Right now, I see three solutions:
Continue doing everything on the backend
Only do upload operations on the client side using the javascript SDK, and everything else on the backend
Do everything from the frontend using the javascript SDK
For me, the best solution would be 2. What are your opinions? Is there other solutions?
If the file is created on the client, there is no need to send it to the server - you can just directly upload it to Facebook instead. Although, if you need to store it on your own server anyway, you can do that first and let the server handle the upload to Facebook - uploading an URL of an image to Facebook is the easiest way. If you don´t need the image on your server, this may help you:
https://www.devils-heaven.com/facebook-javascript-sdk-photo-upload-with-formdata/
https://www.devils-heaven.com/facebook-javascript-sdk-photo-upload-from-canvas/
If the file is on the server already, there is no need to send it to the client before uploading it to Facebook. In that case, i would do the upload server side. If it´s about the security: There is absolutely no problem in sending Access Tokens to the server. You can just use the JS SDK for login, send the Token to the server and do the upload on the server. Just use appsecret_proof: https://developers.facebook.com/docs/graph-api/securing-requests/
If you are using your end user identity on Facebook there is no benefit to use the backend here (except the fact that you need less Javascript on the page).
Your user Facebook credentials must never be sent to the backend, therefore do the upload to Facebook on client side using Facebook SDK.
Doing it from client side also save you the infrastructure cost on the backend.

Passing Bluemix APP-ID authentication from Node.js to Angular5

I'm working on a project that uses Bluemixes APP-ID for authentication and are using Node.js for our backend. What I want to do is to be able to login with the App-ID authentication (that uses passport.js) and use this token in my Angular5 project and from there be able to store new user-specific attributes.
What is the proper way of doing this?
Thankful for any answers :)
After some research, it seems like the way forward is to create an endpoint in the Node.js that one then uses with the angular project. Just make sure the endpoint also is protected by the webAppStrategy if using that.

How can i safely pass access token generated from Google OAuth to a NodeJS REST API?

I am creating two application :
1. Chrome extension for gmail.
2. It's IOS version
Now, since both the applications have same behavior and uses same google apis extensively, i decided to create a single project in google cloud platform for both. Now, when creating credentials, what will be my application type? I see both 'IOS' and 'Chrome App' under application type. Should i generate two Client IDs for chrome app and ios app?
To use single Client ID, i also tried creating a Node REST API (created a new project and set application type to 'web application' in google cloud platform) that will be used by both of my application to make request to google apis? But the authorization process includes, setting a callback url to get the authorization code and later use this code to get the access token. I guess this is not feasible for a REST API. Where should i keep the authorization part? In the application itself and later send the access token to my rest api? Is it possible?
I am very much confused about how should i start. Please could anyone suggest a better way to do this?
I generated two client ids, one for ios and for the web. Isolating both applications is a good way to start. Both the apps generate their own token id, pass the id to Node Rest API and later the use that token to make a request to Google APIs.

Resources