0

Access keys are visible

In my application in Angular 6 I work with two APIs where both need a Key or Token to give permission to the available execution methods.

I created the keys inside src/environmets/environment.prod.ts.

My angular.json:

                "configurations": {
                    "production": {
                        "fileReplacements": [
                            {
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.prod.ts"
                            }
                        ],
                        "optimization": true,
                        "outputHashing": "all",
                        "sourceMap": false,
                        "extractCss": true,
                        "namedChunks": false,
                        "aot": true,
                        "extractLicenses": true,
                        "vendorChunk": false,
                        "buildOptimizer": true
                    }
                }

environment.prod.ts:

export const environment = {
    production: false,
    hmr: false,
    firebase: {
        apiKey: 'AIzaSyD8-dfxdfxdfxdf3242342342',
        authDomain: 'dfdfd-med.firebaseapp.com',
        databaseURL: 'https://ddfdf-med.firebaseio.com',
        projectId: 'dxdfdfd-dd',
        storageBucket: 'dxxxx-med.appspot.com',
        messagingSenderId: '1041058540005'
    },
    MoipAPI: {
        apiKey: 'Basic VTBRTkJWOUVIMFREQjVGM1sssJTFJddddNBV0dVVEdMMFZEMEhPRzZBRE1TS0k0Q1dYQklRT0VWRlJHR0xUQw==',
    },
};

In my @Injectable() service I care

import {environment} from 'environments / environment';

When I do the angular build build with the ng build --prod command when accessing Developer Tools from Google Chrome in the Sources tab, I can see the keys inside main.435fgfd2cxsss.js.

This is a problem since my keys are visible to all, they should not be shown in main.435fgfd2cxsss.js.

How can I do this in Angular in a safe way?

Luiz Ricardo Cardoso
  • 1,554
  • 4
  • 16
  • 37
  • 1
    You need the client to have these keys, otherwise it can't communicate with the services. The keys are meant to come with your program so I don't think it's a big problem that they are visible. But, your application is public right? – NocNit May 27 '18 at 08:44
  • 2
    If you're accessing the APIs from the client side, there is no way to keep those keys secure. So you should do it from the server side, instead, effectively providing a proxy for your client code to access the APIs. – jonrsharpe May 27 '18 at 08:49
  • Possible duplicate of [Is it safe to expose Firebase apiKey to the public?](https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public) – Deblaton Jean-Philippe May 27 '18 at 08:49
  • I think the best way to sum it up would be that the API keys are not so much an authentication, but instead they are used for identification of your application to the servers. Because of this, they don't strictly need to be hidden (which is also nearly impossible to do). – NocNit May 27 '18 at 08:54
  • take a look at this question (and answers): https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public – paul May 27 '18 at 09:13
  • My application is public, and I have an API integration for subscription payments. I do not want to expose my Key and Token production to end users. I've been thinking about using Cloud Functions to protect since my application uses Firebase, is that possible? https://www.youtube.com/watch?v=_SdVC_WMuLg&t=415s – Luiz Ricardo Cardoso May 27 '18 at 13:35

0 Answers0