¿Por qué a veces navigator.clipboard es undefined?
Las cada vez más potentes APIs de navegador son una auténtica maravilla, puesto que nos permiten realizar operaciones sin recurrir a librerías de terceros.
Una de las APIs más demandadas es la de Clipboard, que nos permite acceso al potente mundo del copy & paste.
No obstante, esta API tiene una particularidad que hace poco me provocó un buen dolor de cabeza. El siguiente código, que se usa para la funcionalidad de copiar código de los ejemplos de esta página, no estaba funcionando:
button.onclick = function () {
if (!navigator.clipboard) return;
// Etc...
}
Hasta aquí todo normal: si no tenemos acceso a la API (porque el navegador es viejo o no la implementa), salimos rápidamente de la función.
La sorpresa es que navigator.clipboard siempre evaluaba a undefined, pese a estar en navegadores compatibles.
¿La razón? Por motivos de seguridad, la API de Clipboard sólo está disponible en entornos https, y mi entorno local estaba usando http.
Bola extra: este problema también me sirvió para aprender que existe una etiqueta Secure Context en la documentación de MDN que indica todo aquello que sólo es accesible en el contexto de una conexión segura vía https://.