6

I'm trying to call the twitch API. To call this api we need to specify a user key. How can i hide the key in my code? I have no idea how to do.

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.800.2 (cli-only)
@angular-devkit/core         8.0.2 (cli-only)
@angular-devkit/schematics   8.0.2 (cli-only)
@schematics/angular          8.0.2 (cli-only)
@schematics/update           0.800.2 (cli-only)
rxjs                         5.5.12

in my app.component.ts file

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaderResponse, HttpHeaders, HttpResponse, HttpErrorResponse } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'TwitchApp';
  twitch_api_key:string = 'test';
  twitch_api_Url:string = 'https://api.twitch.tv/helix/users?id=44322889';
  limit:string = '10';

  constructor(private http: HttpClient,){}

  ngOnInit(){
    this.request();
  }
  request(){
    let header = new HttpHeaders({
      'Client-ID': this.twitch_api_key
    })
    var options = {headers: header}
    this.http.get(this.twitch_api_Url,options).subscribe(
      res => {
        console.log(res)
      },
      (err: HttpErrorResponse) => {
        console.log(err.error);
        console.log(err.name);
        console.log(err.message);
        console.log(err.status);
      }
    )
  }
}

In the main.js in web browser

    constructor(http) {
        this.http = http;
        this.title = 'TwitchApp';
        this.twitch_api_key = 'test';
        this.twitch_api_Url = 'https://api.twitch.tv/helix/users?id=44322889';
        this.limit = '10';
    }

Thanks

  • You can encrypt the key and store it in local storage. Although encryption isnt a fool proof mechanism as the key for encryption would either reside on client side or passed from a server. Which makes it susceptible to modification. Have a look at this answer https://stackoverflow.com/questions/59509684/how-to-secure-and-store-data-like-jwt-token-without-using-localstorage-or-sessio/59509795#59509795 – Shahid Manzoor Bhat Dec 29 '19 at 10:27

2 Answers2

5

With a proxy you have the same exact issue. Because the proxy just serves as a middleman between the client and your api therefore you now still have to authenticate the proxy somehow or else people can just look in the console and find out how to hit the proxy to return what they want from your api; therefore proxies are more or less just kicking the can down the road in my opinion.

To answer this question once and for all, you either need to look into oauth2 client grants or else like start server-side rendering everything. I’m sure there are other techniques that are just as effective as those two solutions however alternative solutions to this problem which are truly secure are hard to find.

Chase Gibbons
  • 103
  • 1
  • 9
3

This was answered in this question: How to secure the JavaScript API Access Token?

The summary is that there is no way to completely hide the API key in your client-side code. If you are making the request straight from your client-side code, no matter what you do, anyone can go into the browsers dev-tools and get your API key.

When I've encountered this issue in the past with a key with absolutely do not want to expose, I've solved it by proxying by creating an API. In that case the API key is safely in the API code, which is secure since it's server-side. Your client-side code would then call your API, instead of the Twitch API. Your API (server code) would then call Twitch and return the result back to your client. That's pretty much the only way to keep that key completely secret.

Nelson S
  • 84
  • 2