Reprise du message précédent :
Quelqu’un sait si les navigateurs configurent les headers de manière spécifique quand une requête est faite pour / par un tag img comparé à d’autres contextes?

Bonjour tous,

Je voudrais faire une petite appli web qui
- Contient à gauche plein de liens vers des sites externes
- Ouvre à droite dans une iframe les liens en question lorsqu'on clique dessus.
Ca va m'aider à m'organiser pour quelque chose, c'est pour un usage strictement personnel et licite

Très simple par définition, sauf que le problème c'est que bien entendu depuis mon appli l'ouverture de l'iframe m'est refusée puisque l'url à charger pointe vers un site externe.

Je n'ai évidemment pas la main pour injecter un header "content-security-policy" qui autorise mon appli dans ledit site.

Idéalement j'aimerais bien pouvoir désactiver la sécurité sur l'inclusion des iframe dans le navigateur (j'utilise Firefox, mais je suis ouvert à toute autre option pour désactiver cette sécurité dans un navigateur quelconque qui me permettrait d'utiliser mon truc).
Aucun souci s'il faut bidouiller un peu vu que c'est pour un usage restreint. Par contre idéalement avec une whitelist (pour restreindre ça à mon appli) ça serait mieux pour éviter de transformer mon browser en passoire.

Ou à défaut, je suis preneur de suggestion pour répondre au besoin décrit plus haut.

L'ouverture d'une nouvelle fenêtre (plus de pb d'iframe) est évidemment une possibilité mais c'est pas aussi pratique qu'un volet de navigation à droite.

Merci

J'ai bricolé un truc en window.open :

Euh, ou bien j'ai pas compris, ou bien tu peux le faire en HTML natif grâce à la prop "target".

Bien sûr si le site distant refuse d'être chargé via frame/iframe (protection clickjacking & co) bah c'est mort, mais je pense que c'est le cas aussi avec ton script

Non son truc va marcher car ça ouvre une nouvelle fenêtre "pop-up" (le truc que plus personne n'utilise mais dans son cas pas d'autre choix ^^), donc y'a pas de problème de sécurité avec une page qui héberge une iframe d'un domaine différent.

y'en a qui utilisent docker sur leur machine de dev pour le dev web ?
 
ça m'intéresse de m'y mettre, j'essaye de comprendre le workflow que les gens utilisent.
 
J'imagine que la base ressemble à ça :
- vous utilisez une image node, ou une variante avec ce qui vous intéresse (vue, express, etc...)
- mapping du rep locale sur un rep /src du container
- le serveur expose le truc generé sur un port quelconque
 
* c'est quoi le workflow quand vous changez un bout de code ? On peut faire que ça écoute les changements pour relancer node, ou faut le lancer soit-même à chaque fois ? On peut faire ça avec le meme container id, ou faut relancer une nouvelle instance à chaque fois (et donc nettoyer de temps en temps)
* comment est-ce que vous débugguez avec votre IDE et cette config ?
* vous utilisez des images standard, ou la votre custom ?

 
- je lance les script ( watcher, build,.. ) dans le conteneur
- pour php , il suffit d'exposer les bons port. J'imagine que c'est pareil avec node
- autant que possible des standards, mais ajotuer des lib/paquet ne posent pas de pb
 
au passage, il y a le mode remote de vscode qui marche très très bien : tu ouvres le projet directement dans l'instance docker

j'ai testé VSCode remote, vraiment bien foutu.
En fait je bosse avec le shell dans le terminal de vscode, et ça va pas mal du tout.
J'ai fait mon image toute pourrie alpine + hugo-extended + firebase-tools, et ça marche nickel

 
Qu’est-ce que tu entends par VSCode remote ?

VSCode avec l'extension Remote - Containers : https://code.visualstudio.com/docs/remote/containers

De ce que je comprends, elle fait pour toi :
- créer une image docker selon ton Dockerfile (t'as aussi un set d'images de base)
- mappe la working directory dans /workspace, vs code maintient les vues locales et distantes de ton code (par ex il monte pas ta Dockerfile, elle reste locale)
- installe VScode server et les extensions locales nécessaires (et ça marche meme avec alpine en base image si t'as une 3.9 au moins)
- y'a un fichier de conf qui te permet de spécifier plus finement ce que tu veux (port mapping, env variables, monter d'autres répertoires, les extensions à monter en local, etc...)
- t'ouvres un terminal dans ta container instance
- forward SSH/gpg (et ça marche avec ma Yubikey en mode smartcard j'aurais pas misé lourd là dessus)
- c'est bien packagé : t'as des vues spéciales pour voir les logs (avec syntax highlighting), une vue pour le port mapping, si tu veux installer une extension il te propose de le faire pour toi dans Docker et de MAJ le fichier devcontainer.json, si le docker foire il re-switch en vue locale pour te permettre de l'éditer, y'a le commande container/image/env prune etc...

du coup toutes les extensions marchent nickel (par ex GitLens utilise Git/SSH/gnupg du container), t'as toute la logique pour relancer / rebuilder ton instance docker, c'est l'environnement remote le plus confortable que j'ai jamais utilisé, à part faire du chrome remote desktop dans l'environnement evidemment.

Y'a un packaging similare pour si tu dev en SSH, ou dans WSL. Gros boulot de la part de MS, vraiment super bien foutu (je sais qu'ils se sont alliés à Facebook là dessus, et Google a rejoint la danse peu après, donc y'a du monde derrière et ça se voit)

Des gens qui utilisent le module knex pour gérer une BDD avec node ?
 
J'ai un souci quand je fais un import du composant avec node 15.11.0, j'ai un unexpected token { quand je fais node myFile.mjs.
 
J'ai bien fait l'import comme ça : import {knex} from "knex";
J'ai essayé aussi avec import knex from "knex";  
 
Ca fonctionne dans le second cas mais j'ai pas l'impression que ça récupère quoi que ce soit après avec mon code.

Tu as vu l'exemeple :  

 
il y a 2 knex,  
Le Knex our utiliser Knex.config, etc..
et knex avec toutes les méthodes.
 

Qui s'est dit que c'était une bonne idée d'avoir 2 trucs ayant le même nom et n'étant différents différencié que par la casse?  

 
Merci pour le message mais malheureusement ça casse toujours car "Knex" n'existe pas.  
 

 
L'exemple n'étant pas vraiment la solution, ça n'aide pas non plus

as tu fais ce que node te crash comme erreur ?  
 
 
import pkg from 'knex';
const { Knex, knex} = pkg;

dites, j'ai un navigateur qui envoie un fichier de 50Go à mon serveur, sauf qu'au bout d'à peine quelques ko, je m'aperçois je le fichier a le mauvais magic byte.
Y'a une manière propre en HTTP depuis le serveur pour dire au navigateur d'arrêter d'uploder et signaler l'erreur dans l'UI ?
 
le truc part en POST form-encoded.

ya pas moyen de faire de l'upload streamé et non un post form encoded ?

tu veux dire chunk encoded ?

Edit : rien

quitte à modifier le client, je ferai directement la verif à ce niveau

ça me fais chier, cette lib est pas compatible avec le front.

C’est une bonne chose

 
Ouaip et il me met une erreur sur pkg  
 

 
Je ne comprends pas du tout le problème --'

Quelle version de node ?
La syntaxe require passe ?

Version 15.11.0, ça passe avec seulement import knex from 'knex';
 
Je crois que dans le fichier d'exo qu'on m'a envoyé il manque la DB pour taper dessus --'

J'ai un projet, et une question de choix de composants / archi.
Sans rentrer dans les détails, je veux faire un site qui contient des howto comparatifs. Par comparatif je veux dire que l'utilisateur peut choisir 1..n outils, et verra donc les étapes du howto avec 1..n colonnes, pour voir côte à côte les étapes dans chaque outil.

Chaque "cellule" (ie une étape d'un howto spécifique pour un outil donné) sera du contenu rédactionnel avec texte / image code, et je pense faire l'authoring en markdown (asciidoc serait mieux mais je connais pas de parseur asciidoc autre que Ruby, et ça m'intéresse pas)

Côté client, la navigation de fait en choisissant / cherchant un howto, et quels outils on veut voir côte à côte.

Le contenu sera a priori totalement statique, je pourrais même pré-rendre les cellules. Si les utilisateurs veulent soumettre du contenu, je ferais ça avec pull request dans GitHub comme caniuse

Vous feriez ça comment ?
- pur assemblage côté client, en intégrant les cellules pre-rendues grâce à un fichier de conf qui dit pour un howto / outil quelles cellules prendre et leur URL statique (ex: le howto 1 a 5 cellules, et je veux l'outil X et Y, donc je fais des include de 1-1-X.html, 1-2-X.html,... , 1-1-Y.html, 1-2-Y.html) ou la même chose avec les .md directement.
Pro: le site peut être entièrement statique
Cons :
- le fichier de conf va devenir massif
- aucune idée de comment gérer la recherche

- assemblage côté client en appelant une API avec une signature genre listHowTo(), listTools(), getCell(howToId, toolId)
Pros: config en base de données, peut être plus simple pour la recherche ?
Cons: il y a un serveur à gérer

Je pensais partir en JS, mais je sais pas trop quoi prendre comme outils (JS ou TS brut côté client ? Un framework me fait un peu peur, mais un bon moteur de template pourrait être cool. J'ai vu Express/Pug qui a l'air pas mal documenté

lut a tous
je cherche un bon generateur de mots clés
j'ai verifié les deux qui arrivent en tete sont  Semrush et Ahrefs
par contre pour le prix ca fait trèèès mal  
est ce que vous avez personnelement utilisé ceux la et peut etre d'autres?
personnellement j'utilise ubbersuggest , j'utilisais avant keysearch mais c'est assez compliqué et pas très efficace
merci a tous

 
Ca dépend a quel point tu es sur que c'est full statique.
 
En partant sur du full statique:
  - serverless via un S3 like: https://docs.aws.amazon.com/AmazonS [...] sting.html
    => comme ca 0 backend a gérer
 
Reste donc le FE, je ferais:
  - VueJS comme moteur
  - Gulp comme "compilateur"
  - un dossier qui contient tous les outils
  - dans ce dossier, chaque dossier est un outil
  - dans chaque dossier d'outil, chaque MD/asciicode est un step du howto
 
Ensuite, dans Gulp il te faut faire un code qui va grapiller tous les markdowns (via glob probablement) et en faire du code VueJS/Html (du code utilisable par la suite)
 
Et enfin le code VueJS qui présente une première page qui sélectionne tout, et une seconde qui affiche les how to par cellule de ce qui a été sélectionné, cette partie utilisant le résultat du Gulp avant.
 
Ca me parait le plus rapide, dynamique mais full client side...
 
 
PS: la recherche peut se faire via https://lunrjs.com/ par exemple toujours full client side, mais je recommande dans ces cas là de débuter avec ca dans les mains sinon a intégrer une fois fait c'est bcp plus chiant.

Merci je vais regarder tout ça

Les cellules vont changer, mais pas souvent (mettons entre 2 et 6 mois entre 2 maj) et je veux garder la main dessus

pourquoi passer par une étape de compilation ? Si tu as une page vue, elle peut tout a fait consommer directement le markdown, non ?

en effet, après j'ai pas testé l'impact sur le page load time de parser le markdown

c'est assez léger en général.  

Jubi, t'as des enjeux de SEO ?
Tu vas avoir combien de blocs en markdown à gérer ?
 
Pour les perfs : https://www.infoq.com/news/2020/10/ [...] st-parser/
Mais ça va être les appels réseaux pour récupérer les markdown qui vont davantage te mettre dedans je pense.

SEO : c'est pour un projet perso, mais on va dire que oui (si je veux que ce soit découvert), j'aimerai bien que les pages remontent proprement dans Google (j'ai pas encore trop regardé comment faire ça bien, LOL ) sur des requetes genre "how to do [howto] with [tool]", ou "[tool1] vs [tool2] for [howto]" : quel est le fond de ta pensée ?

Pour les blocs : je sais pas encore, je dirais qu'un howto va faire 5-10 blocks, et qu'en général je pense que les gens voudront mettre 2 outils le plus souvent en parallèle
je table sur peut être 50-100 howtos
du coup la perf c'est peut être premature optimization (surtout que puisque les blocks changent peu, je dois pouvoir les cacher comme des fragments (je dis ça je sais même pas si les CDN pas cher genre Firebase gèrent ça dans les plans de base ))
Par contre y'aura du code dedans, donc je vais avoir besoin de faire du syntax highlighting aussi, du coup je pensais partir là dessus : https://github.com/markdown-it/mark [...] ghlighting , mais je note la lib que tu suggères

le rendu côté serveur te simplifiera la vie pour le SEO
 
et les multiples requetes seront cachées côté CDN, mais tu auras toujours la requete client <-> CDN qui va te couter un peu, ne serait ce que poru vérifier que le cache n'a pas été invalidé
 
bref, pour ton cas, je ferai un rendu côté serveur

fixaid!    
A+,

Je lutte un peu pour trouver des ressources expliquant les mécanismes d'API HTTP async/streaming/reactive/whatever. Je pense qu'il me manque des mot clé et je suis plutôt habitué à du REST-like classique.
 
Le contexte : on renvoi un volume de données important avec pas mal de latence. Pour plein de raisons, la pagination n'enlève pas le problème de latence et le volume ne sera pas servi par d'autres stratégies comme du polling ou le téléchargement d'un fichier.
Je crois comprendre que dans ce cas, le client peut initier un échange en streaming via une requête HTTP comportant les bons headers, ce qui déclenche ensuite la création d'une websocket. Ce que je ne trouve pas par contre, c'est une ressource qui m'explique ça d'une manière protocolaire, en détaillant les échanges HTTP et ce qui doit être géré par le client et le serveur. Beaucoup de tutos très liés à un framework ou une techno. De même je ne sais pas s'il y a un mécanisme standardisé pour ce type d'échange.
Point bonus si on évoque un payload JSON renvoyé par ce biais, notamment ce qu'impose le parsing d'un payload encore ouvert côté client (le document n'est valide qu'une fois le transfert terminé, mais j'imagine qu'il y a d'autres problématiques à avoir en tête).
 
Merci d'avance pour les pointeurs

ça ? https://datatracker.ietf.org/doc/html/rfc7540#page-8

C'est très confus, websocket c'est une techno spécifique vers laquelle une connection HTTP est "upgradée", c'est pas "un échange en streaming" c'est… un socket, bidirectionnel.
 
Si tu veux juste envoyer du bordel il n'y a pas vraiment de limite à la taille d'une réponse HTTP, d'où les Server Sent Events d'ailleurs (qui consiste à laisser la connection HTTP ouverte et à avoir le serveur qui continue à écrire dessus).

Tu veux faire quoi exactement? Parce-que WS c'est pas piqué des vers. La base de base c'est que t'envoies une requête avec un header `Upgrade: websocket` et `Connection: Upgrade` (et des infos de configuration de la communication) et si le serveur est OK il répond avec un status 101 Switching Protocols, puis au lieu de discuter en HTTP sur la connection ils parlent en websocket.
 
Après si tu veux le détail, comme d'hab, c'est dans les RFC.

Rien compris. WS c'est un socket, tu balances ce que tu veux dessus[0].
 
C'est quoi le besoin fondamental, précisément, pas juste en bougeant beaucoup les bras?
 
[0] plus ou moins, le protocole permet du streaming pur mais les APIs sont généralement centrées autour des messages

Parce que ça l'est pour moi et que j'ai mélangé mon besoin et une hypothèse du mode de fonctionnement d'un mécanisme que je ne connais pas.
Oublie les WS pour le moment, j'ai supposé que c'était le canal sous-jacent à un échange asynchrone sur HTTP mais ta remarque sur les SSE semble plus dans la cible.
 
J'ai besoin de renvoyer des données au travers d'une API HTTP, données qui émanent d'un backend à forte latence. Les API HTTP asynchrones (ou reactive ?) semblent être la solution pour ça et j'aimerais donc savoir comment ça fonctionne. Je trouve des exemples d'implémentation pour un framework donné, mais je ne sais pas ce qui se passe sous le capot et donc si les différentes implémentations sont interopérables.
 
Dis autrement (l'exemple sera peut-être hors sujet), si je choisis un framework reactive comme Spring Webflux je tombe sur des exemples de clients et serveurs implémentés sur cette stack.
Mais :
- qu'est-ce qui se passe sur la couche HTTP ?
- est-ce que la façon de faire de l'async utilisée par Webflux suit un quelconque standard ?
- et donc est-ce qu'un client sur une techno hors Spring Webflux saura parler en async avec mon API reactive (et sous quelles conditions) ?  
 
J'espère avoir été plus clair.

Hello, des gens qui utilisent knex Js dans le coin ?

Je n'arrive pas à trouver la façon dont je dois récupérer de la data dans mon code.

Par exemple une query du genre SELECT * FROM "events", ne fonctionne pas de cette manière knex("events" ).select().
Ca me retourne toutes les fonctions dispo dans knex --'