Is it safe to use google API key in source code?

Question

JavaScript

I use the fullcalendar library to embed a google calendar on a website. Following the example of this library, I display the calendar like this:

var calendar = new FullCalendar.Calendar(calendarEl, {
    googleCalendarApiKey: 'AIzaSyD36ывввwuRpu8iq7qTl90W6FPvLJDTc',
    initialView: 'timeGridWeek',
    locale: 'ru',
    slotMinTime: '07:00:00',
    slotMaxTime: '23:00:00',
    slotDuration: '01:00:00',
    allDaySlot: false,
    nowIndicator:true,
    slotLabelFormat: {
      hour: 'numeric',
      minute: '2-digit',
      omitZeroMinute:false,
     
      meridiem: 'short'
    },

    expandRows:true,
    eventSources: [
      {
        googleCalendarId: 'h5uvфывфpfmdrsйцу[email protected]йцуar.google.com'
      }

    ]
  });

That is, anyone can see the calendar ID and API key. Is it possible to do this and is it safe? If not, how to hide this key correctly?

Answer 1

First, you won't hide anything that's passed from the client side, no matter where it's stored. Such keys are usually public and have no risk of theft. Let's say they are tied to a domain, and for private operations they require separate authentication / authorization. Secondly, storing any settings in the source code is a bad idea anyway. All changeable values ​​must be placed in the configuration file. Because the code must be redistributable (sent in versions, used in other projects, used in other conditions, etc.). If you do not have a faucet and do not want to complicate the code base, then at least in a separate, included JS file.
PS Another point, if we are talking about the key that is obtained as a result of authentication with Google, then the application must allow local user login, you cannot bind the application to authentication globally. In rare cases, when such a need arises, it is necessary to create a bridge for the server part, to which to delegate any operations with the private part of the API.