cómo pasar el valor de un "[object Promise]" a una variable?

SLD · #1 (**permalink**) 13/05/2021, 22:45

Busco obtener TODAS las fuentes que el navegador tiene disponibles.

De NET tome éste código:

Código:

const getInstalledFonts = async () => {
	const { state } = await navigator.permissions.query({ name: "font-access" })
	if (state === "denied") {
		return []
		}
	const fonts = []
	try {
		for (const { family, fullName } of await navigator.fonts.query()) {
			fonts.push({ family, fullName })
			}
		} catch {}
	return fonts;
	}

que supuestamente retorna TODAS las fuentes del browser.

Pero no logro obtener la data:

Código:

function getFonts() {
	document.write('<pre>');
	Q = getInstalledFonts();
	document.write(Q);
	getInstalledFonts().then((fonts) => alert(fonts));
	}
</script>
<body onload="getFonts();">

Pueden indicarme cómo obtener la DATA por favor.

Gracias

prueba230683 · #2 (**permalink**) 16/05/2021, 19:21

La API de acceso a fuentes es una feature experimental, y por tanto no está soportada en Chrome a menos que la actives manualmente desde chrome://flags/#font-access. Debes ponerla en "Enabled" y reiniciar chrome. Depués comprobarás que sí te pide el permiso correctamente para acceder a tus fuentes, que deberás aceptar:

Código HTML:

<script>
const getInstalledFonts = async () => {
	const { state } = await navigator.permissions.query({ name: "font-access" })
	if (state === "denied") {
		return []
		}
	const fonts = []
	try {
		for (const { family, fullName } of await navigator.fonts.query()) {
			fonts.push({ family, fullName })
			}
		} catch {}
	return fonts;
}

function getFonts(){
    getInstalledFonts().then((res) => {
          console.log(res);
    })
}
</script>
<body onload="getFonts()">

Si abres la consola de tu navegador verás que efectivamente salen todas las fuentes que estás utilizando.

De todas formas, es un API no estándar que todavía no está implementada en la mayoría de navegadores.

Saludos

SLD · #3 (**permalink**) 28/05/2021, 15:08

Gracias prueba230683.

Es posible utilizando JS obtener TODAS fuentes que el browser/cliente soporta?

prueba230683 · #4 (**permalink**) 29/05/2021, 01:15

Cita:

Es posible utilizando JS obtener TODAS fuentes que el browser/cliente soporta?

Encontré este código, que parece funcionar correctamente:

Código Javascript:

Ver originalconst fontCheck = new Set([
  // Windows 10
'Arial', 'Arial Black', 'Bahnschrift', 'Calibri', 'Cambria', 'Cambria Math', 'Candara', 'Comic Sans MS', 'Consolas', 'Constantia', 'Corbel', 'Courier New', 'Ebrima', 'Franklin Gothic Medium', 'Gabriola', 'Gadugi', 'Georgia', 'HoloLens MDL2 Assets', 'Impact', 'Ink Free', 'Javanese Text', 'Leelawadee UI', 'Lucida Console', 'Lucida Sans Unicode', 'Malgun Gothic', 'Marlett', 'Microsoft Himalaya', 'Microsoft JhengHei', 'Microsoft New Tai Lue', 'Microsoft PhagsPa', 'Microsoft Sans Serif', 'Microsoft Tai Le', 'Microsoft YaHei', 'Microsoft Yi Baiti', 'MingLiU-ExtB', 'Mongolian Baiti', 'MS Gothic', 'MV Boli', 'Myanmar Text', 'Nirmala UI', 'Palatino Linotype', 'Segoe MDL2 Assets', 'Segoe Print', 'Segoe Script', 'Segoe UI', 'Segoe UI Historic', 'Segoe UI Emoji', 'Segoe UI Symbol', 'SimSun', 'Sitka', 'Sylfaen', 'Symbol', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana', 'Webdings', 'Wingdings', 'Yu Gothic',
  // macOS
  'American Typewriter', 'Andale Mono', 'Arial', 'Arial Black', 'Arial Narrow', 'Arial Rounded MT Bold', 'Arial Unicode MS', 'Avenir', 'Avenir Next', 'Avenir Next Condensed', 'Baskerville', 'Big Caslon', 'Bodoni 72', 'Bodoni 72 Oldstyle', 'Bodoni 72 Smallcaps', 'Bradley Hand', 'Brush Script MT', 'Chalkboard', 'Chalkboard SE', 'Chalkduster', 'Charter', 'Cochin', 'Comic Sans MS', 'Copperplate', 'Courier', 'Courier New', 'Didot', 'DIN Alternate', 'DIN Condensed', 'Futura', 'Geneva', 'Georgia', 'Gill Sans', 'Helvetica', 'Helvetica Neue', 'Herculanum', 'Hoefler Text', 'Impact', 'Lucida Grande', 'Luminari', 'Marker Felt', 'Menlo', 'Microsoft Sans Serif', 'Monaco', 'Noteworthy', 'Optima', 'Palatino', 'Papyrus', 'Phosphate', 'Rockwell', 'Savoye LET', 'SignPainter', 'Skia', 'Snell Roundhand', 'Tahoma', 'Times', 'Times New Roman', 'Trattatello', 'Trebuchet MS', 'Verdana', 'Zapfino',
].sort());
 
async function obtenerFuentes(){
  await document.fonts.ready;
 
  const fontAvailable = new Set();
 
  for (const font of fontCheck.values()) {
    if (document.fonts.check(`12px "${font}"`)) {
      fontAvailable.add(font);
    }
  }
 
  return [...fontAvailable.values()];
}
 
obtenerFuentes().then(fuentes => {
  alert(fuentes);
});

DEMO

SLD · #5 (**permalink**) 12/06/2021, 13:21

Gracias prueba230683, en ése código nosotros "confirmamos" las FONT que coinciden con una LISTA PRE-DEFINIDA.

Sábes si es posible tomar el ARRAY de las fuentes que el cliente/BROWSER tiene instaladas SIN nosotros indicarlas?

prueba230683 · #6 (**permalink**) 13/06/2021, 10:53

Cita:

Sábes si es posible tomar el ARRAY de las fuentes que el cliente/BROWSER tiene instaladas SIN nosotros indicarlas?

Solamente existe esta forma, es decir, activando ese API experimental. El resto de formas son "hacks", que se basan en tener una lista grande de fuentes e ir comprobando una a una si el navegador las soporta.

De todas formas, con esa lista que proporcioné debería ser más que suficiente para detectar todas las posibles fuentes que un usuario puede tener, tanto en Win10 como en macOS.

SLD · #7 (**permalink**) 23/06/2021, 21:18

Cita:

Iniciado por prueba230683

...debería ser más que suficiente para detectar todas las posibles fuentes...

lo que quiero es crear un FiNGERPRINT basdo en la-S (sí, todas) las fuentes del visitante.

De ésa manera "no podrían" robar la COOKIE de sesión (PHP)

prueba230683 · #8 (**permalink**) 24/06/2021, 12:07

Cita:

lo que quiero es crear un FiNGERPRINT

Cita:

De ésa manera "no podrían" robar la COOKIE de sesión (PHP)

Si un atacante puede robar la cookie de sesión (por ejemplo mediante un XSS), también podrá fácilmente robar el fingerprint del usuario.

Es preferible hacer fingerprint a la IP del usuario. Es decir, asociar cada sesión con una única IP, para evitar robo de sesión.

Eso y verificar que la cookie de sesión tenga el attributo httponly.

SLD · #9 (**permalink**) 30/06/2021, 11:52

Cita:

Iniciado por prueba230683

Si un atacante puede robar la cookie de sesión (por ejemplo mediante un XSS), también podrá fácilmente robar el fingerprint del usuario.

Es preferible hacer fingerprint a la IP del usuario. Es decir, asociar cada sesión con una única IP, para evitar robo de sesión.

Eso y verificar que la cookie de sesión tenga el attributo httponly.

gracias por tu asesoria @prueba230683

Disculpa,
cómo puedo utilizar la IP remota en un salón de clases que utiliza la mísma IP pero diferentes computadores para ASEGURAR el fingerprint?

es en ése contexto que pretendo diferenciar cáda conexión.

Dáme una orientación, gracias

prueba230683 · #10 (**permalink**) 30/06/2021, 17:04

Si los ordenadores se encuentran en la misma red LAN que el servidor, podrías identificarlos por su dirección MAC. Aquí encontré un ejemplo de cómo extraer la dirección MAC con PHP:

Código PHP:

Ver original$ipAddress=$_SERVER['REMOTE_ADDR'];
$macAddr=false;
 
#run the external command, break output into lines
$arp=`arp -a $ipAddress`;
$lines=explode("\n", $arp);
 
#look for the output line describing our IP address
foreach($lines as $line)
{
   $cols=preg_split('/\s+/', trim($line));
   if ($cols[0]==$ipAddress)
   {
       $macAddr=$cols[1];
   }
}
 
echo $macAddr;

Montar un servidor que sea accesible desde una red LAN es bastante sencillo. Cada ordenador en una red local tiene una IP local asignada (puedes ver la tuya con ipconfig). Solamente tendrías que montarte un localhost (por ejemplo, con XAMPP) y cambiar algunas cosas de la configuración para que otros usuarios de la red puedan conectarse a tu servidor local.

En cambio, si no es posible que el servidor se encuentre en la misma red que los clientes, entonces la única forma de identificar las conexiones es mediante sesiones (cookies de sesión, vaya).