Is it safe to have visible Google Drive API keys in Javascript?

Question

I am using Google drive API to download file from Google drive. I am using Javascript for that. Is it safe to have visible API keys in JS or I should use Node.js or something else? As you can see on the top of code, there are many keys (developer key, client id and app id). Is there any vulnerable in my code?

Here is my code:

    var developerKey = '[key]';
    var clientId = "[key]"
    var appId = "[key]";
    var scope = ['https://www.googleapis.com/auth/drive.file', 'https://www.googleapis.com/auth/drive'];

    var pickerApiLoaded = false;
    var driveLoaded = false;
    var oauthToken;

    // Use the Google API Loader script to load the google.picker script.
    function loadPicker() {
      gapi.load('auth', {'callback': onAuthApiLoad});
      gapi.load('picker', {'callback': onPickerApiLoad});
      gapi.load('client', function () {
        gapi.client.load('drive', 'v2', function () {
          driveLoaded = true;
        });
    });
    }

    function onAuthApiLoad() {
      window.gapi.auth.authorize(
          {
            'client_id': clientId,
            'scope': scope,
            'immediate': false
          },
          handleAuthResult);
    }

    function onPickerApiLoad() {
      pickerApiLoaded = true;
      createPicker();
    }

    function handleAuthResult(authResult) {
      if (authResult && !authResult.error) {
        oauthToken = authResult.access_token;
        createPicker();
      }
    }

    // Create and render a Picker object for searching images.
    function createPicker() {
      if (pickerApiLoaded && oauthToken) {
        var view = new google.picker.View(google.picker.ViewId.DOCS);
        view.setMimeTypes("application/sla,application/vnd.ms-pki.stl,application/x-navistyle");
        var picker = new google.picker.PickerBuilder()
            .enableFeature(google.picker.Feature.NAV_HIDDEN)
            .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
            .setAppId(appId)
            .setOAuthToken(oauthToken)
            .addView(view)
            .addView(new google.picker.DocsUploadView())
            .setDeveloperKey(developerKey)
            .setCallback(pickerCallback)
            .build();
         picker.setVisible(true);
      }
    }

  // A simple callback implementation.
  function pickerCallback(data) {
    if (data.action == google.picker.Action.PICKED) {
      var fileId = data.docs[0].id;
      downloadFile(fileId, data.docs[0].name);
    }
  }

  function downloadFile(fileId, fileName)
  {
    var request = gapi.client.drive.files.get({
      fileId:fileId,
      alt:"media"
    }).then(function(resp){
        $.post("PHP/save_file.php", {Type: "stl", Filename: fileName, Data: resp.body}, function(response) {
          if (response == "OK")
          {

          }
        });
    });
  }

  function showPickerDialog(){
    loadPicker()
  }

Answer 1

When you created your app on Google Developer console you created a web application. When you created it you added a javascript origin. As long as you set this javascript origin to the location of your webserver that the application is running on then there is no way anyone can use your client id. If you have left it set to localhost then yes there is a risk that someone could hijack your token and use it.

As for the api key you should lock that down to a specific domain, however api keys only give you access to read public data. The amount of public data in Google Drive but someone could abuse your api key if you dont lock it down.