node.jspolymerpolymer-3.x

Hidding api key in front end application


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?


Solution

  • Why not lock it down to your domain name in google maps?

    Go to google cloud -> API & Services -> credential

    enter image description here