Why is navigator.clipboard sometimes undefined?

The increasingly powerful browser APIs are a real marvel, since they allow us to perform operations without resorting to third-party libraries.

One of the most popular APIs is Clipboard,, which gives us access to the powerful world of copy & paste.

However, this API has a peculiarity that recently gave me a headache. The following code, which is used for the copy code functionality of the examples on this page, was not working:

button.onclick = function () {
  if (!navigator.clipboard) return;
  // Etc...
}

So far so normal: if we do not have access to the API (because the browser is old or does not implement it), we quickly exit the function.

The surprise is that navigator.clipboard always evaluated to undefined, despite being in compatible browsers.

The reason? For security reasons, the Clipboard API is only available in https environments, and my local environment was using http.

La API, marcada como sólo disponible en un contexto seguro

Bonus ball: this problem also helped me learn that there is a Secure Context tag in the MDN documentation that indicates everything that is only accessible in the context of a secure connection via https://.