ApiKeys and List ID is in input hidden, JS wll do rest of Job not sure if it is safe and secure

JavaScript
1

The below code will render output in the browser →

image
image1191×507 61.8 KB

The remaining task I am willing to do in custom.js

Example Code →

// Get the hidden fields
const apiKeyInput = document.querySelector('input[name="mailchimpAPIkey"]');
const listIdInput = document.querySelector('input[name="mailChimpListId"]');

// Get the MailChimp API key and list ID values
const apiKey = apiKeyInput.getAttribute('data-api');
const listId = listIdInput.getAttribute('data-listId');



Although the API key and list ID are in hidden input, the JS will be exposed as it is available in a browser. someone can know the apikey/list by putting this code in the console like this → 

// Use the MailChimp API Key and List ID values as needed
console.log('MailChimp API key:', apiKey);
console.log('MailChimp list ID:', listId);

Is this approach safe or is very risky and insecure? or I can forward there is no issue.

2

Any JavaScript which is sent to the browser can be read by someone inspecting the page source. Therefore if your API key is private and shouldn’t be exposed to the world at large, what you are doing in the code snippet you posted above is not secure.

Could you maybe outline the task you are trying to accomplish, then we can offer more input.

2 Likes
3

There is a custom form for Mailchimp with its own custom markup and CSS. In hidden fields mailchimps: ListId and API Key are populated, and then I am asking JS to do the rest of the job through either a fetchAPI/AJAX, but as you also confirm that this is not safe.

Is there a way to still process sit through JS and make it safe and secured?

All the input fields which are no visible in a HTML markup in a browser can be populated in console easily through this code →

// Select all hidden input tags on the page
const hiddenInputs = document.querySelectorAll('input[type="hidden"]');

// Loop through all hidden input tags and log them to the console
hiddenInputs.forEach(input => {
  console.log(input);
});

Is there a way to make all these safe handling through Vanilla JS safe?

4

Sorry but no, Javascript is not appropriate for safe and secure things.
Javascript by definition is open for inspection by anyone that comes along, which is anything but safe or secure.

2 Likes
5

You will likely need to implement an additional step using a server to handle communication with the API. This SO answer outlines what that might look like using PHP.

Also, Mailchimp themselves seem to advise against doing anything with an API key client side.

Because of the potential security risks associated with exposing account API keys, Mailchimp does not support client-side implementation of our API using CORS requests or including API keys in mobile apps.

See here: https://mailchimp.com/en/help/about-api-keys/

1 Like
6

Keep the secret stuff on the backend, and the public stuff on the frontend (here’s where someone comes in to whine about using JWT’s. Whatever).

Treat it the same way you do accessing your database. Take user input from a form and send it to the backend, sanitize/validate it, then the backend (which can hold and know the secret keys) contacts the remote service (whether it be a database or an API) and sends the appropriate request through, before returning the result to the frontend.

1 Like