Feda /dev/ - No Javascript allowed | Página 1013

desu #30361 Sep '21

#30356 Fijate en este caso https://jsfiddle.net/9pds57f0/#&togetherjs=kqNTPIK9D4

tengo un img y un fetch

el img me inyecta los accept headers adecuados a mi browser, el fetch automaticamente no

quiero que el fetch tenga los accept headers adecuados dependiendo del browser

mi solucion es parsear el user-agent y tener una tabla como la que puse con todos y mandarlos yo... pero molaria tenerlos automaticamente del fetch del img src

voy a meter lo del link xq no se cuanto dura

1 respuesta

B

[Borrado] #30362 Sep '21

#30361 Si es para la xhr del fetch y no la request de la img, yo uso esto: https://axios-http.com/docs/interceptors

Para fetch pelado sin axios también tiene que haber alguna manera.

1 respuesta

desu #30363 Sep '21

#30362 seguro que intercepta el img?

Ayer probamos varias y solo pillaba el fetch... El img no

Xq a lo que me pasas como le pasa la request del image?? Como la cazas?

Probé a pillar el html por id y añadir listeners y no va

1 respuesta

B

[Borrado] #30364 Sep '21

#30363 No el img no. Solo el fetch. Te he entendido mal entonces.

1 respuesta

desu #30365 Sep '21

#30364 lo del fetch lo puedes hacer asi

window.fetch = myFetch

Es muy facil..

Pero no es lo que requerimos xd

1 respuesta

B

[Borrado] #30366 Sep '21

#30365 No tengo ni idea de si se puede hacer esto que intentas. Si lo consigues postea, que tengo curiosidad. A mi me parece algo interno del browser que no se si estará expuesto para que lo puedas tocar.

1 respuesta

desu #30367 Sep '21

#30366 yo creo que con web pack o algo así, podríamos intentar inyectar algo en un momento temprano...

Pero ni idea.

No soy front end.

1 respuesta

B

[Borrado] #30368 Sep '21

#30367 Webpack es para el bundling de js. Yo creo que la petición que hace la <img /> tag no tiene nada que ver con JS. Pero repito, ni idea.

1 respuesta

desu #30369 Sep '21

#30368 Ah pues no, creia que tambien servia para meter cosas al browser. en plan inyectar funcionalidades a traves de una abi

si si es del browser el img 100%

al final no le dedicare mas tiempo, he puesto la tabla y tal... es lo mas pragmatico, pero tenia curiosidad porque me parece hoy en dia un caso de uso relevante

seguramente en el futuro sera posible... si no esta es porque los browsers tendran el ojo en otras features..

otras cosas que intente, sacar el blob y de ahi en los primeros bytes sacar el tipo, pero para pasar de img a blob necesitas el tipo.. XD

1 respuesta

JuAn4k4 #30370 Sep '21

#30369 Mete un proxy en medio, y transforma los headers en el proxy y ya está. Y te dejas de front.

1 respuesta

desu #30371 Sep '21

#30370 no se puede en este caso. entiendo que dices de mandar el user-agent y enviar los accept headers en lugar de tenerlo en el front...

realmente este caso de uso concreto de requerir el fetch con los headers es bastante nicho. la idea es que queremos tener los metadatos de la imagen para hacer demo/debug.

para el dia a dia realmente no es necesario si usas el img tag, pero en caso de hacer tu el fetch a mano si lo requieres enviar...

https://www.digitalocean.com/community/tutorials/how-to-create-and-serve-webp-images-to-speed-up-your-website?comment=73532

creo que la mayoria de clientes tendran un "proxy" como tu dices, BFF, pero en nuestro caso no lo podemos hacer XD ni idea de como implementan.

igualmente la pregunta es como consigo interceptar las peticiones del browser. resolver el problema ya lo he resuelto.

MisKo #30372 Sep '21

Lo que se hace es servir las cosas en función del navegador y su version, el server captura esta información y sirve la imagen basandose en eso. No necesitas nada más:

https://caniuse.com/webp

https://sirv.com/
https://cloudinary.com/
https://imagekit.io/

Las cabeceras de un IMG en una requests SRC no son publicas ni accesibles. Además, si la imagen está cacheada, en un principio ni hay cabeceras, pero tb depende del navegador.

Lo que se me ocurre es que hagas el método del PIXEL de facebook (ni siquiera se si lo siguen utilizando)

<img src="URL A TU SERVER" > y poner un handler en el onload()

1 respuesta

desu #30373 Sep '21

#30372 no entendeis la pregunta? la vuelvo a poner

igualmente la pregunta es como consigo interceptar las peticiones del browser. resolver el problema ya lo he resuelto.

como consigo interceptar las peticiones del browser.

ponerle un parche ya se hacerlo... ya lo hice ayer... de hecho primero puse el parche y luego mire de resolver el problema de verdad...

pues podrian los navegadores tener esta info publica, que es lo que dije antes. asi cualquier navegador en cualquier dispositivo automaticamente sabe hacer la peticion mas optima y ademas TU en js lo puedes replicar.

https://searchfox.org/mozilla-central/search?q=image.http.accept
https://searchfox.org/mozilla-central/source/netwerk/protocol/http/nsHttpHandler.cpp#248

ahora pensando se me ha ocurrido escuchar el socket XD

1 respuesta

MisKo #30374 Sep '21

#30373 Como te he dicho, la solucion seguramente pase por el sistema del pixel, no hay cosas globales. Si ya lo tienes hecho, pues estupendo xD

1: Tag img con link a tu server
2: Haces lo que te de la gana y devuelves una imagen 1px transparent
3: Cuando la imagen se ha completado (onload) ejecutas una funcion en javascript
4: En esa funcion llamas al server y recuperas la información que necesites y la utilizas donde quieras.

Esto parte del sistema que utiliza en google analytics qndo el usuario no tiene javascript, en los emails para trackear las aperturas y demás, dependiendo del proveedor para trackear las ventas.. vamos, que con eso te debería de servir para la parte de demo/debug

Mas allá de estos "parches" como dices tu, no creo que tengas ninguna solucion global xD

1 respuesta

desu #30375 Sep '21

#30374 Si esa secuencia lo empece a hacer tambien. Pero como no requerimos de server ni era el objetivo lo deje de lado. Me alegro de haber tenido buena intuicion XD nse ayer trabaje mucho la verdad, lo mismo hasta hice 8 horas como el resto de mortales y 8h para mi son como 80 de las de un fpero...

En fin cosas de pajeets de browsers entonces, con lo facil que seria exponer estos datos y olvidarte de negociaciones.

Es una mierda porque ademas queria fakear multiples agentes/browsers y como no podia interceptar el fetch de las imagenes he tenido que hacer un puente feo...

era elegir, muestro avif en edge que no lo soporta, o enga;o en la demo (si desencriptas y te fijas en las payloads se ve xd) para que se muestre otro formato como jpeg o png, no se he acabado implementado las 2 y ya mi equipo que vote lo que quiera. seguramente haremos la 2.

me quedo con la espina de no haber podido resolverlo bien porque los pajeets de google y mozilla se comen los mocos. esto es lo que pasa cuando solo contratas a recien graduados que no saben ni lo que es un puntero.

1 respuesta

JuAn4k4 #30376 Sep '21

#30375 La respuesta a interceptar los fetch internos del browser para servir imágenes es: No se puede, por security reasons. Puedes interceptar los fetches manuales, o meter proxy a los del browser, pero en cliente no puedes interceptar estos últimos.

2 1 respuesta

LLoid #30377 Oct '21

https://new.pythonforengineers.com/blog/confessions-of-a-1x-programmer/

B

[Borrado] #30378 Oct '21

Buenos días mindundis que trabajáis 8 horas al día

TheBrotha #30379 Oct '21

Menos mal, no ha dicho nada malo de los que curramos 8h 30min

1 respuesta

B

[Borrado] #30380 Oct '21

.

1 respuesta

TheBrotha #30381 Oct '21

#30380 Como dijo Eto'o: hay que correr como un negro para vivir como un blanco

4

Kaledros #30382 Oct '21

Imagina estar tan descentrado como para decir que el software envejece rápido.

4 respuestas

_Rpv #30383 Oct '21

#30382 en lo que has escrito ese post han sacado una versión nueva de Angular

1 respuesta

Kaledros #30384 Oct '21

#30383 Que no depreca la anterior, con lo que puedes pasar de ella si quieres, y pertenece a un framework con cinco años de edad, escrito en un lenguaje que tiene un cuarto de siglo.