tag:linuxfr.org,2005:/forums/programmationwebLinuxFr.org : le forum Programmation.web2024-01-31T08:24:43+01:00/favicon.pngtag:linuxfr.org,2005:Post/440812024-01-31T08:24:43+01:002024-01-31T08:24:43+01:00Script greasemonkey pour remettre la date et l'heure sur le web<p>Salut,</p>
<p>Je suis un peu fatigué de cette mode consistant à mettre la date sous la forme d'un temps écoulé depuis que le message a été posté</p>
<pre><code>9 hours ago
Updated 2 years ago
11 month ago
...
Since Jesus Christ
</code></pre>
<p>Certes on peut souvent configurer son interface pour remettre la vraie date, mais ça prend du temps inutile.</p>
<p>Je me demandais s'il n'existait pas un script greasemonkey qui fasse ça systématiquement dès qu'il détecte la formulation.</p>
<p>J'ai trouvé <a href="https://feherke.github.io/javascript/greasemonkey/tipmaster-time-ago.html">TipMaster</a> mais il fait l'inverse visiblement.</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/script-greasemonkey-pour-remettre-la-date-et-l-heure-sur-le-web.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/134770/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/script-greasemonkey-pour-remettre-la-date-et-l-heure-sur-le-web#comments">ouvrir dans le navigateur</a>
</p>
martonihttps://linuxfr.org/nodes/134770/comments.atomtag:linuxfr.org,2005:Post/440312023-12-28T13:12:39+01:002023-12-28T13:12:39+01:00qu'est ce que google a fait au web (ou aux internets)?<p>bonjour</p>
<p>ceci n'est pas un appel aux trolls ni aux sur-réactions, bien que j'imagine qu'un tel sujet déclenche chez les libristes (et d'autres) une salve de réflexions assez variée.<br>
je m'explique, j'ai cessé d'utiliser les services google par rapport notamment à gmail, et à leurs services sur android.</p>
<p>mais je n'ai que très peu d'expérience dans le web, en dehors du fait qu'on pourrait comparer le web avec google qui serait une boite de nuit lorsque gemini ressemble davantage à un musée, peut être à dessein.</p>
<p>mais c'est notamment l'aspect "moteur de recherche" et "publicité" qui m'interroge ici. Ayant fait quelques recherches ces dernières années, j'ai lu ci et là que la firme de mountain view était concernée par une sorte de pilori (explicable?) bien plus intensif qu'apple, pour qui n'importe quel geek aurait affirmé il y a dix ans "iphone caylemal". Or, ici je souhaite surtout parler du web, qui bien qu'enguirlandé, me parait correspondre à ce bout de texte :<br>
( je retrouve plus le lien, vous n'aurez aucun mal à en trouver un billet de bloggueur équivalent )</p>
<p>à l'époque j'avais tapé plus spécifiquement "sans google" bien entre guillemets pour avoir l'impression des webmasters voulant référencer un site : depuis 2015 et au dela, impossible d'alimenter ggle sans se connecter à un compte (il me saoulait déjà)</p>
<p>mais j'imagine que là dedans, depuis avant 2010 (avant j'étais pas dans l'informatique), google aurait su avoir la mainmise sur le web publicitaire mondial (ex, le combat de free) pour en être le presque-Roi aujourd'hui.</p>
<p>quelle est votre impression? L'idée étant de pouvoir "résumer ou dévulgariser" l'internet avant/après google aux gens ordinaires, à Michu quoi :)<br>
merci</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/qu-est-ce-que-google-a-fait-au-web-ou-aux-internets.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/134343/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/qu-est-ce-que-google-a-fait-au-web-ou-aux-internets#comments">ouvrir dans le navigateur</a>
</p>
tkrhttps://linuxfr.org/nodes/134343/comments.atomtag:linuxfr.org,2005:Post/439502023-11-23T10:29:29+01:002023-11-23T10:29:29+01:00Choix des URL "propres" pour du REST<p>Je Pythonne un peu avec Flask.</p>
<p>Assez rapidement, quelle que soit l'appli, on va manipuler des objets, les créer, les modifier, les supprimer etc. Je suis vite tombé sur REST et les différents verbes du HTTP mais si j'ai bien compris ça ne marche pas quand on se limite à un browser qui ne fait que du GET et POST.</p>
<p>Si pour lire un objet j'y accède via <code>monsite/objet/<id></code> en GET, quelle URL adopter pour du DELETE par exemple ? Un truc style <code>monsite/objet/<id>/delete</code> en POST ?</p>
<p>Y a-t-il des us et coutumes particuliers ?</p>
<p>Merci !</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/choix-des-url-propres-pour-du-rest.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/133982/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/choix-des-url-propres-pour-du-rest#comments">ouvrir dans le navigateur</a>
</p>
gUIhttps://linuxfr.org/nodes/133982/comments.atomtag:linuxfr.org,2005:Post/439432023-11-21T16:31:52+01:002023-11-23T07:51:20+01:00Marque page javascript bouton cliquable<p>Bonjour à tous et toutes,</p>
<p>Je souhaite intégrer un marque page javascripté en incluant un code qui aurai pour fonction de cliquer sur le bouton de connexion.</p>
<p>J'ai pu déjà faire le code java pour remplir l'id et le mot de passe du site en question sauf que je bloque pour faire le code qui demandera de se connecter au site.</p>
<p>Lorsque je vais inspecter le site en question, j'ai les codes suivants: </p>
<pre><code class="html"><span class="c"><!--button type="submit" id="loginbutton" value="1" Ouvrir une session /button--></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">id</span><span class="o">=</span><span class="s">"loginbutton"</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">value</span><span class="o">=</span><span class="s">"1"</span><span class="p">></span>
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"././images/session.png"</span> <span class="na">alt</span><span class="o">=</span><span class="s">""</span><span class="p">></span></code></pre>
<p>Avez-vous une idée de la fonction à appeler pour faire cliquer le bouton en marque page javascripté?<br>
Est qu'on commence l'appelle en javascript:(function(){document.getElementById ou plutôt en forms?</p>
<p>Merci par avance pour votre aide.</p>
<p>Bonne journée/soirée</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/marque-page-javascript-bouton-cliquable.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/133970/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/marque-page-javascript-bouton-cliquable#comments">ouvrir dans le navigateur</a>
</p>
kornebidouillehttps://linuxfr.org/nodes/133970/comments.atomtag:linuxfr.org,2005:Post/439232023-11-02T20:17:52+01:002023-11-02T20:17:52+01:00Accéder à un nœud du DOM en utilisant son id comme variable<p>Désolé, j'ai pas réussi à faire une meilleure formulation du truc pour le titre.</p>
<p>Dans le <a href="https://d3js.org/getting-started">tutoriel</a> de D3, y'a ce bout de code :</p>
<pre><code class="html"><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"container"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"module"</span><span class="p">></span>
<span class="kr">import</span> <span class="o">*</span> <span class="nx">as</span> <span class="nx">d3</span> <span class="nx">from</span> <span class="s2">"https://cdn.jsdelivr.net/npm/d3@7/+esm"</span><span class="p">;</span>
<span class="c1">// Declare the chart dimensions and margins.</span>
<span class="kr">const</span> <span class="nx">width</span> <span class="o">=</span> <span class="mi">640</span><span class="p">;</span>
<span class="kr">const</span> <span class="nx">height</span> <span class="o">=</span> <span class="mi">400</span><span class="p">;</span>
<span class="kr">const</span> <span class="nx">marginTop</span> <span class="o">=</span> <span class="mi">20</span><span class="p">;</span>
<span class="kr">const</span> <span class="nx">marginRight</span> <span class="o">=</span> <span class="mi">20</span><span class="p">;</span>
<span class="kr">const</span> <span class="nx">marginBottom</span> <span class="o">=</span> <span class="mi">30</span><span class="p">;</span>
<span class="kr">const</span> <span class="nx">marginLeft</span> <span class="o">=</span> <span class="mi">40</span><span class="p">;</span>
<span class="c1">// Declare the x (horizontal position) scale.</span>
<span class="kr">const</span> <span class="nx">x</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">scaleUtc</span><span class="p">()</span>
<span class="p">.</span><span class="nx">domain</span><span class="p">([</span><span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="s2">"2023-01-01"</span><span class="p">),</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="s2">"2024-01-01"</span><span class="p">)])</span>
<span class="p">.</span><span class="nx">range</span><span class="p">([</span><span class="nx">marginLeft</span><span class="p">,</span> <span class="nx">width</span> <span class="o">-</span> <span class="nx">marginRight</span><span class="p">]);</span>
<span class="c1">// Declare the y (vertical position) scale.</span>
<span class="kr">const</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">scaleLinear</span><span class="p">()</span>
<span class="p">.</span><span class="nx">domain</span><span class="p">([</span><span class="mi">0</span><span class="p">,</span> <span class="mi">100</span><span class="p">])</span>
<span class="p">.</span><span class="nx">range</span><span class="p">([</span><span class="nx">height</span> <span class="o">-</span> <span class="nx">marginBottom</span><span class="p">,</span> <span class="nx">marginTop</span><span class="p">]);</span>
<span class="c1">// Create the SVG container.</span>
<span class="kr">const</span> <span class="nx">svg</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">create</span><span class="p">(</span><span class="s2">"svg"</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"width"</span><span class="p">,</span> <span class="nx">width</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"height"</span><span class="p">,</span> <span class="nx">height</span><span class="p">);</span>
<span class="c1">// Add the x-axis.</span>
<span class="nx">svg</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">"g"</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"transform"</span><span class="p">,</span> <span class="sb">`translate(0,</span><span class="si">${</span><span class="nx">height</span> <span class="o">-</span> <span class="nx">marginBottom</span><span class="si">}</span><span class="sb">)`</span><span class="p">)</span>
<span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">d3</span><span class="p">.</span><span class="nx">axisBottom</span><span class="p">(</span><span class="nx">x</span><span class="p">));</span>
<span class="c1">// Add the y-axis.</span>
<span class="nx">svg</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">"g"</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"transform"</span><span class="p">,</span> <span class="sb">`translate(</span><span class="si">${</span><span class="nx">marginLeft</span><span class="si">}</span><span class="sb">,0)`</span><span class="p">)</span>
<span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">d3</span><span class="p">.</span><span class="nx">axisLeft</span><span class="p">(</span><span class="nx">y</span><span class="p">));</span>
<span class="c1">// Append the SVG element.</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">svg</span><span class="p">.</span><span class="nx">node</span><span class="p">());</span>
<span class="p"></</span><span class="nt">script</span><span class="p">></span></code></pre>
<p>Je me suis senti très confus parce que la variable <code>container</code> utilisé à la fin n'est jamais déclaré et pourtant <s>elle tourne</s> le code marche.</p>
<p>Après divers tests je me suis rendu compte la variable <code>container</code> contenait une référence vers le nœud d'id <code>container</code>, comme si un <code>let container = document.getElementById("container")</code> était fait automagiquement.</p>
<p>Et ça marche pour tous les id.</p>
<pre><code class="html"><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"bli"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"bla"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"blo"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"module"</span><span class="p">></span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">bli</span><span class="p">,</span> <span class="nx">bla</span><span class="p">,</span> <span class="nx">blo</span><span class="p">)</span> <span class="c1">// <div id="bli"> <div id="bla"> <div id="blo"></span>
<span class="p"></</span><span class="nt">script</span><span class="p">></span></code></pre>
<p>Est-ce que quelqu'un aurait un lien vers <a href="https://developer.mozilla.org/en-US/">MDN</a> qui décrit cette fonctionnalité ? Je n'arrive pas à trouver les bons mots clefs à donner à manger à mon moteur de recherche préféré.</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/acceder-a-un-noeud-du-dom-en-utilisant-son-id-comme-variable.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/133806/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/acceder-a-un-noeud-du-dom-en-utilisant-son-id-comme-variable#comments">ouvrir dans le navigateur</a>
</p>
jtremesayhttps://linuxfr.org/nodes/133806/comments.atomtag:linuxfr.org,2005:Post/437912023-08-20T17:23:31+02:002023-08-20T23:11:08+02:00[Résolu] Récupérer le code css de LinuxFR.org sous un format potable<p>Suite à des choix particuliers, je suis l'heureux possesseurs de livre comment faire un site web et sur le couple HTML5/CSS3. De manière curieuse, je lis même ces livres. L'un de leurs conseils est de regarder le code de sites existants. Quoi de plus naturel que de regarder <a href="//linuxfr.org/">LinuxFR</a> ? Pour le moment, je me penche surtout sur la feuille de style CSS mais je n'arrive pas à récupérer la feuille de style dans un formatage facile à utiliser.</p>
<p>Si je passe par <a href="//linuxfr.org/stylesheet/modifier">là</a>, je peux obtenir <a href="//linuxfr.org/assets/application.css">ceci</a>. C'est j'imagine bien le code css que je cherche mais sans aucune mise en page, tout est sur une seule ligne. Par ailleurs, il ne semble pas y avoir de commentaires. Je peux m'amuser à introduire des retours à la ligne à la main mais je pense que cela mettra trop à contribution mes faibles capacités de patience et de persévérance.</p>
<p>Autre idée, passer par le github du site où je trouve effectivement <a href="https://github.com/linuxfrorg/linuxfr.org/blob/master/app/assets/stylesheets/RonRonnement.scss">cela</a>. De nouveau, cela ressemble à ce que je cherche mais il y a malheureusement ces quelques lignes :<br>
<code><br>
@import "parts/*";<br>
@import "responsive/*";<br>
@import "common/*";<br>
@import "pygments/colorful";<br>
</code><br>
Je n'ai qu'à remplacer les différents imports par leur code et je devrais avoir une feuille de style complète est explicite. Malheureusement, patience et persévérance manquent sans doute aussi pour cette piste vu que cela représente près de 40 fichiers à importer à la main (pour peu que ces mêmes fichiers ne comporte pas eux-mêmes de @import).</p>
<p>Auriez-vous une bonne idée pour récupérer la feuille de style complète mettant moins à contribution ma patience et ma persévérance qui soit facile à comprendre pour un noob tel que moi ?</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/resolu-recuperer-le-code-css-de-linuxfr-org-sous-un-format-potable.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/133038/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/resolu-recuperer-le-code-css-de-linuxfr-org-sous-un-format-potable#comments">ouvrir dans le navigateur</a>
</p>
tisaachttps://linuxfr.org/nodes/133038/comments.atomtag:linuxfr.org,2005:Post/437542023-07-22T21:20:15+02:002023-07-22T21:20:15+02:00HTTPS - Recommander sans forcer ?<p>Bonjour à tous,</p>
<p>J'ai un dilemme, j'ai un site web qui fonctionne avec un certificat "let's encrypt" et je suis assez content du fonctionnement avec et sans chiffrement.</p>
<p>Par contre, quand je me connecte sur le site, par défaut, j'arrive en "http". Or pour me connecter à l'interface d'administration, je préfère évidement être sur une connexion chiffrée (surtout depuis que le site s'est fait pirater…).</p>
<p>En regardant les solutions, j'ai l'impression que la solution quasi-unique consiste à réaliser une redirection permanente de http à https. </p>
<p>Or j'aimerai que mon site reste accessible au plus grand monde et, par expérience, on peut quand même vite se retrouver bloqué avec https (simplement avec un système dont l'horloge n'est pas à jour - sans rentrer dans les cas des certificats "racine" non-approuvés…).</p>
<p>Est-ce que je m'inquiète pour rien ? Ai-je raté un mécanisme assurant la transition ?</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/https-recommander-sans-forcer.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/132805/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/https-recommander-sans-forcer#comments">ouvrir dans le navigateur</a>
</p>
Keurondehttps://linuxfr.org/nodes/132805/comments.atomtag:linuxfr.org,2005:Post/436612023-06-04T13:56:57+02:002023-06-04T13:56:57+02:00Signature S3 et comportement du navigateur Web <p>Bonjour, </p>
<p>Je suis bloqué depuis quelques hier sur quelque chose qui ne me semblait pas compliqué au démarrage : faire du S3 depuis le navigateur (sans se payer une bibliothèque obscure et/ou lourde). Le contexte : avoir la possibilité d'envoyer et récupérer du contenu S3 depuis une WebExtension (je devrais en parler bientôt sur LinuxFr). </p>
<p>En soi le plus compliqué est <a href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/RESTAuthentication.html#RESTAuthenticationExamples">de générer l'entête <code>Authorization</code></a>. Je reste sur la v2 de l'authentification AWS, à destination d'un serveur local MinIO. </p>
<p>Voici l'équivalent Bash et Javascript que j'utilise : </p>
<pre><code class="bash"><span class="c1"># bash</span>
<span class="nv">signature</span><span class="o">=</span><span class="sb">`</span><span class="nb">echo</span> -en <span class="s2">"PUT\n\n</span><span class="si">${</span><span class="nv">type</span><span class="si">}</span><span class="s2">\n</span><span class="si">${</span><span class="nv">date</span><span class="si">}</span><span class="s2">\n</span><span class="si">${</span><span class="nv">chemin</span><span class="si">}</span><span class="s2">"</span> <span class="p">|</span> openssl sha1 -hmac <span class="si">${</span><span class="nv">s3Secret</span><span class="si">}</span> -binary <span class="p">|</span> base64<span class="sb">`</span></code></pre>
<pre><code class="javascript"><span class="c1">// javascript</span>
<span class="kd">function</span> <span class="nx">signer</span><span class="p">(</span><span class="nx">message</span><span class="p">,</span> <span class="nx">secretKey</span><span class="p">)</span> <span class="p">{</span>
<span class="kr">const</span> <span class="nx">encoder</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">TextEncoder</span><span class="p">();</span>
<span class="kr">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="nx">encoder</span><span class="p">.</span><span class="nx">encode</span><span class="p">(</span><span class="nx">message</span><span class="p">);</span>
<span class="kr">const</span> <span class="nx">key</span> <span class="o">=</span> <span class="nx">encoder</span><span class="p">.</span><span class="nx">encode</span><span class="p">(</span><span class="nx">secretKey</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">crypto</span><span class="p">.</span><span class="nx">subtle</span><span class="p">.</span><span class="nx">importKey</span><span class="p">(</span><span class="s1">'raw'</span><span class="p">,</span> <span class="nx">key</span><span class="p">,</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'HMAC'</span><span class="p">,</span> <span class="nx">hash</span><span class="o">:</span> <span class="s1">'SHA-256'</span> <span class="p">},</span> <span class="kc">false</span><span class="p">,</span> <span class="p">[</span><span class="s1">'sign'</span><span class="p">])</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span>
<span class="p">(</span><span class="nx">key</span><span class="p">)</span> <span class="p">=></span> <span class="nx">crypto</span><span class="p">.</span><span class="nx">subtle</span><span class="p">.</span><span class="nx">sign</span><span class="p">(</span><span class="s1">'HMAC'</span><span class="p">,</span> <span class="nx">key</span><span class="p">,</span> <span class="nx">data</span><span class="p">)</span>
<span class="p">)</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span>
<span class="p">(</span><span class="nx">signature</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">btoa</span><span class="p">(</span>
<span class="nb">String</span><span class="p">.</span><span class="nx">fromCharCode</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span>
<span class="kc">null</span><span class="p">,</span>
<span class="k">new</span> <span class="nx">Uint8Array</span><span class="p">(</span><span class="nx">signature</span><span class="p">)</span>
<span class="p">)</span>
<span class="p">);</span>
<span class="p">}</span>
<span class="p">);</span>
<span class="p">}</span></code></pre>
<p>Les deux me fournissent une signature valide. Par acquis de conscience, <strong>j'ai aussi testé en remettant la clé générée par Bash directement dans la requête de Firefox (avec la bonne date évidemment)</strong>. </p>
<p>Rien à faire : le serveur n'en veut pas. </p>
<p>Firefox envoie la requête suivante : <br>
<code><br>
PUT /tout/test-text.json HTTP/1.1<br>
Host: localhost:9000<br>
User-Agent: curl/7.81.0<br>
Accept: */*<br>
Accept-Language: en-US,en;q=0.5<br>
Accept-Encoding: gzip, deflate, br<br>
authorization: AWS F1vfymAX4V4yp25DbX33:GbddtmO6/A2PGse8ySAwEPNn3vk=<br>
content-type: text/plain<br>
x-amz-date: Sun, 04 Jun 2023 13:13:28 +0200<br>
Content-Length: 11<br>
Origin: moz-extension://183b3036-20b3-4bc3-82e2-46f80d95c2ca<br>
Connection: keep-alive<br>
Sec-Fetch-Dest: empty<br>
Sec-Fetch-Mode: cors<br>
Sec-Fetch-Site: same-origin<br>
Cache-Control: max-age=0<br>
</code></p>
<p>Le message de retour est sans appel : la requête par le navigateur échoue sur une 403… </p>
<pre><code class="xml"><span class="cp"><?xml version="1.0" encoding="UTF-8"?></span>
<span class="nt"><Error><Code></span>SignatureDoesNotMatch<span class="nt"></Code><Message></span>The request signature we calculated does not match the signature you provided. Check your key and signing method.<span class="nt"></Message><Key></span>test-text.json<span class="nt"></Key><BucketName></span>tout<span class="nt"></BucketName><Resource></span>/tout/test-text.json<span class="nt"></Resource><RequestId></span>17657120F9D3A9D3<span class="nt"></RequestId><HostId></span>dd9025bab4ad464b049177c95eb6ebf374d3b3fd1af9251148b658df7ac2e3e8<span class="nt"></HostId></Error></span></code></pre>
<p>Chose étrange, le navigateur me permet l'ajout de <code>x-amz-date</code> mais refuse semble-t-il (silencieusement) l'envoi de l'entête <code>Date</code> : </p>
<pre><code class="javascript"><span class="kd">var</span> <span class="nx">headers</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Headers</span><span class="p">();</span>
<span class="nx">headers</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">'User-Agent'</span><span class="p">,</span> <span class="s1">'curl/7.81.0'</span><span class="p">);</span>
<span class="nx">headers</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">'Host'</span><span class="p">,</span> <span class="s1">'localhost:9000'</span><span class="p">);</span>
<span class="nx">headers</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">'Date'</span><span class="p">,</span> <span class="nx">date</span><span class="p">);</span> <span class="c1">// ça ne passe pas ?</span>
<span class="nx">headers</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">'X-Amz-Date'</span><span class="p">,</span> <span class="nx">date</span><span class="p">);</span> <span class="c1">// ça passe</span>
<span class="nx">headers</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span> <span class="s2">"Content-Type"</span><span class="p">,</span> <span class="nx">contentType</span> <span class="p">);</span>
<span class="nx">headers</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span> <span class="s2">"Expect"</span><span class="p">,</span> <span class="s2">"100-continue"</span> <span class="p">);</span>
<span class="nx">headers</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">'Authorization'</span><span class="p">,</span> <span class="sb">`AWS </span><span class="si">${</span><span class="nx">s3Key</span><span class="si">}</span><span class="sb">:</span><span class="si">${</span><span class="nx">signature</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">contexteRequete</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">method</span><span class="o">:</span> <span class="s1">'PUT'</span><span class="p">,</span>
<span class="nx">headers</span><span class="o">:</span> <span class="nx">headers</span><span class="p">,</span>
<span class="nx">mode</span><span class="o">:</span> <span class="s1">'cors'</span><span class="p">,</span> <span class="c1">// j'ai essayé aussi plusieurs valeurs suivant la doc du MDN, sans succès</span>
<span class="nx">cache</span><span class="o">:</span> <span class="s1">'no-cache'</span><span class="p">,</span>
<span class="nx">body</span><span class="o">:</span> <span class="s2">"Hello world"</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">requete</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Request</span><span class="p">(</span>
<span class="sb">`http://</span><span class="si">${</span><span class="nx">domain</span><span class="si">}</span><span class="sb">/</span><span class="si">${</span><span class="nx">bucket</span><span class="si">}</span><span class="sb">/</span><span class="si">${</span><span class="nx">filename</span><span class="si">}</span><span class="sb">`</span><span class="p">,</span>
<span class="nx">contexteRequete</span><span class="p">,</span>
<span class="p">);</span>
<span class="nx">fetch</span><span class="p">(</span><span class="nx">requete</span><span class="p">,</span><span class="nx">contexteRequete</span><span class="p">)</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"réponse s3 ok"</span><span class="p">,</span> <span class="nx">response</span><span class="p">.</span><span class="nx">text</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span> <span class="p">(</span><span class="nx">c</span><span class="p">)=></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">c</span><span class="p">)</span> <span class="p">))</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">erreur</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"réponse s3 ko"</span><span class="p">,</span> <span class="nx">erreur</span><span class="p">)</span>
<span class="p">});</span></code></pre>
<p>Quant aux journaux de CURL, je ne vois pas d'écart notable :</p>
<pre><code>* Trying 127.0.0.1:9000...
* Connected to localhost (127.0.0.1) port 9000 (#0)
> PUT /tout/test-text.json HTTP/1.1
> Host: localhost:9000
> User-Agent: curl/7.81.0
> Date: Sun, 04 Jun 2023 13:13:28 +0200
> Content-Type: text/plain
> Authorization: AWS F1vfymAX4V4yp25DbX33:GbddtmO6/A2PGse8ySAwEPNn3vk=
> Accept: */*
> Accept-Language: en-US,en;q=0.5
> Accept-Encoding: gzip, deflate, br
> Origin: moz-extension://183b3036-20b3-4bc3-82e2-46f80d95c2ca
> Connection: keep-alive
> Sec-Fetch-Dest: empty
> Sec-Fetch-Mode: cors
> Sec-Fetch-Site: same-origin
> Cache-Control: max-age=0
> Content-Length: 9547
> Expect: 100-continue
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 100 Continue
HTTP/1.1 100 Continue
* We are completely uploaded and fine
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
HTTP/1.1 200 OK
(...)
</code></pre>
<p>J'ai pensé que l'entête <code>Date</code> serait la source du problème (au détriment de <code>x-amz-date</code>), mais si je retire celui-ci dans Bash, l'erreur est bien différente d'une 403 (il lui faut une date) : </p>
<pre><code class="xml"><span class="nt"><Error><Code></span>AccessDenied<span class="nt"></Code><Message></span>AWS authentication requires a valid Date or x-amz-date header<span class="nt"></Message><Resource></span>/tout/test-text.json<span class="nt"></Resource><RequestId></RequestId><HostId></HostId></Error></span></code></pre>
<p>Point intéressant, la requête n'est pas valide par défaut de signature (403, <code>SignatureDoesNotMatch</code>) si je rajoute <code>x-amz-date</code> dans les entêtes CURL (avec ou sans <code>Date</code>) - ici le bout de script pour tester avec les entêtes de Firefox que je teste :</p>
<pre><code class="bash">curl -v -I -X PUT -T <span class="s2">"</span><span class="si">${</span><span class="nv">fileorigin</span><span class="si">}</span><span class="s2">"</span> <span class="se">\</span>
-H <span class="s2">"Host: </span><span class="si">${</span><span class="nv">domain</span><span class="si">}</span><span class="s2">"</span> <span class="se">\</span>
-H <span class="s2">"User-Agent: curl/7.81.0"</span> <span class="se">\</span>
-H <span class="s2">"Date: </span><span class="si">${</span><span class="nv">dateValue</span><span class="si">}</span><span class="s2">"</span> <span class="se">\</span>
-H <span class="s2">"x-amz-date: </span><span class="si">${</span><span class="nv">dateValue</span><span class="si">}</span><span class="s2">"</span> <span class="se">\</span>
-H <span class="s2">"Content-Type: </span><span class="si">${</span><span class="nv">contentType</span><span class="si">}</span><span class="s2">"</span> <span class="se">\</span>
-H <span class="s2">"Authorization: AWS </span><span class="si">${</span><span class="nv">signature</span><span class="si">}</span><span class="s2">"</span> <span class="se">\</span>
-H <span class="s2">"Accept: */*"</span> <span class="se">\</span>
-H <span class="s2">"Accept-Language: en-US,en;q=0.5"</span> <span class="se">\</span>
-H <span class="s2">"Accept-Encoding: gzip, deflate, br"</span> <span class="se">\</span>
-H <span class="s2">"Origin: moz-extension://183b3036-20b3-4bc3-82e2-46f80d95c2ca"</span> <span class="se">\</span>
-H <span class="s2">"Connection: keep-alive"</span> <span class="se">\</span>
-H <span class="s2">"Sec-Fetch-Dest: empty"</span> <span class="se">\</span>
-H <span class="s2">"Sec-Fetch-Mode: cors"</span> <span class="se">\</span>
-H <span class="s2">"Sec-Fetch-Site: same-origin"</span> <span class="se">\</span>
-H <span class="s2">"Cache-Control: max-age=0"</span> <span class="se">\</span>
<span class="s2">"http://</span><span class="si">${</span><span class="nv">domain</span><span class="si">}</span><span class="s2">/</span><span class="si">${</span><span class="nv">bucket</span><span class="si">}</span><span class="s2">/</span><span class="si">${</span><span class="nv">filename</span><span class="si">}</span><span class="s2">"</span></code></pre>
<p>Notez bien que le contenu textuel qui sert à la signature (en plus du secret), est correct (sinon ça ne fonctionnerait jamais en Bash). </p>
<p>Selon vous, quelle serait ma méprise ? Est-ce seulement cette question de l'entête <code>Date</code>, mais si oui, comment "forcer" son envoi par le navigateur ? </p>
<p><em>PS : ce sont des clés bidon évidemment.</em> </p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/signature-s3-et-comportement-du-navigateur-web.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/131462/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/signature-s3-et-comportement-du-navigateur-web#comments">ouvrir dans le navigateur</a>
</p>
JulienGhttps://linuxfr.org/nodes/131462/comments.atomtag:linuxfr.org,2005:Post/436212023-05-14T10:39:16+02:002023-05-14T12:26:34+02:00Nommage et typage des variables en JavaScript<p>Bonjour,</p>
<p>Je commence mon vrai premier projet en Javascript : une page qui fait divers calculs à partir de paramètres (<code>input</code> de la page HTML).</p>
<p>Je me débrouille à faire un truc qui marche, mais je me noie dans le nom des variables.</p>
<p>Par exemple pour un seul de ces paramètres qui est sous la forme d'un <code><input type="range"></code> il me faut :<br>
- un id pour le retrouver<br>
- une variable JS de l'objet trouvé avec <code>getElementById()</code><br>
- une variable JS pour la valeur numérique</p>
<p>Y a-t-il des us-et-coutumes en la matière ?</p>
<p>Ensuite second gros problème : le typage. Oui je sais, tant pis pour moi, j'avais qu'à pas utiliser un langage non typé… mais quel enfer !</p>
<p>Je m'en sors à peu près en définissant systématiquement mes variables numériques par un :</p>
<pre><code class="javascript"><span class="kd">let</span> <span class="kd">var</span> <span class="o">=</span> <span class="mf">0.0</span>
<span class="kd">var</span> <span class="o">=</span> <span class="nx">calcul</span> <span class="o">+</span> <span class="nx">a</span> <span class="o">*</span> <span class="nx">la</span> <span class="o">-</span> <span class="nx">con</span></code></pre>
<p>Est-ce la bonne façon de faire ?</p>
<p>Merci !</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/nommage-et-typage-des-variables-en-javascript.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/131223/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/nommage-et-typage-des-variables-en-javascript#comments">ouvrir dans le navigateur</a>
</p>
gUIhttps://linuxfr.org/nodes/131223/comments.atomtag:linuxfr.org,2005:Post/432652022-11-17T21:59:19+01:002022-11-17T21:59:19+01:00financement participatif d'un client CalDAV pur JS/HTML/CSS ?<p>Bonjour,</p>
<p>Comme vous le savez peut être, la société que je dirige développe <a href="https://www.tracim.fr">Tracim</a>, une solution de collaboration d'équipe qui intègre des agendas partagés et individuels.</p>
<p>Dans une démarche d'ouverture, les agendas dans Tracim reposent sur le protocole CalDAV et s'appuient sur des briques opensource :</p>
<ul>
<li>le serveur d'agenda <a href="https://radicale.org/">Radicale</a>
</li>
<li>le client web, un fork bricolé de <a href="https://inf-it.com/open-source/clients/caldavzap/">caldavzap</a>, un client CalDAV pur frontend</li>
</ul>
<p>Il est depuis quelques temps question de réécrire l'agenda car caldavzap n'est pas maintenable dans une démarche de génie logiciel.</p>
<p>Nous souhaitons donc implémenter un client d'agenda CalDAV en pur frontend : JS, HTML, CSS.</p>
<p>À notre connaissance, il existe plusieurs bibliothèque implémentant soit le support du protocole, soit une interface utilisateur type calendrier/agenda. Mais il n'existe pas de client caldav complet - c'est à dire l'agrégation des deux.</p>
<p>On prévoit de faire ça pour Tracim, et dans une démarche de réutilisabilité, <strong>je me demande si des entreprises sont intéressées pour cofinancer le développement d'une brique agenda CalDAV réutilisable qu'on exploiterait dans Tracim et qui serait également facile à intégrer dans d'autres solutions</strong>.</p>
<p>Si on finance seuls, on fera au plus rentable pour Tracim - donc une solution qui prend en compte uniquement nos problématiques. C'est à ma connaissance ce que font les solutions collaboratives telles que NextCloud et autres solutions étudiées.</p>
<p>Si des entreprises sont intéressées par une telle brique, on peut aborder les choses comme on l'a fait pour <a href="https://pypi.org/project/preview-generator/">notre brique de prévisualisation de fichiers</a> qui est exploitable en dehors de Tracim en quelques lignes de python (là ça serait donc en quelques lignes de JS)</p>
<p>Ma question est donc simple : si vous êtes intéressés, faites-vous connaître pour qu'on voit ce vers quoi aller.</p>
<p>À noter que si vous connaissez une brique complète qu'on aurait loupée, on est preneur : si ça existe on préférera s'orienter vers une réutilisation et des contributions que sur une nième implémentation (et dans le cas où on implémentera, ce sera en s'appuyant sur des bibliothèques existantes).</p>
<p><strong>Si le financement est mutualisé, l'objectif est de produire du code réutilisable libre/propriétaire donc a priori du code sous licence MIT.</strong></p>
<p>À dispo pour avancer sur le sujet si vous êtes intéressés.</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/financement-participatif-d-un-client-caldav-pur-js-html-css.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/129334/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/financement-participatif-d-un-client-caldav-pur-js-html-css#comments">ouvrir dans le navigateur</a>
</p>
LeBouquetinhttps://linuxfr.org/nodes/129334/comments.atomtag:linuxfr.org,2005:Post/432602022-11-16T21:22:02+01:002022-11-16T21:22:02+01:00textarea pour SQL avec coloration syntaxique et autocomplétion ?<p>Salut,</p>
<p>J’ai un pour saisir une requête SQL et j’aimerais y avoir une coloration syntaxique et de l’autocomplétion qui tiendrait compte du schéma de la base de données (nom des tables et noms des champs.</p>
<p>Quelqu’un aurait-il une piste ?</p>
<p>PS: Je viens de trouver le site web <a href="https://prismjs.com">https://prismjs.com</a> et je suis en train d’essayer de comprendre si ça pourrait me convenir…</p>
<p>Merci d’avance <sup>_^</sup></p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/textarea-pour-sql-avec-coloration-syntaxique-et-autocompletion.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/129316/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/textarea-pour-sql-avec-coloration-syntaxique-et-autocompletion#comments">ouvrir dans le navigateur</a>
</p>
Space_e_manhttps://linuxfr.org/nodes/129316/comments.atomtag:linuxfr.org,2005:Post/430212022-07-12T23:06:38+02:002024-03-03T20:13:14+01:00NGinx, Docker, IP v.6 et TLS<p>Bonjour,</p>
<p>Sur un Kimsufi, j'ai mis en place une configuration très classique à base de NGinx dans du Docker avec du TLS (Let's Encrypt), qui fonctionnait parfaitement en IP v.6 et IP v.4.<br>
Depuis dimanche, la configuration SSL ne fonctionne plus en IP v.6 mais continue à fonctionner en IP v.4 :</p>
<pre><code class="bash"> $ curl -vvvv -6 https://xxx.yyy/
* Trying <span class="m">2607</span>:dddd:dddd:dddd::1:443...
* Connected to xxx.yyy <span class="o">(</span><span class="m">2607</span>:dddd:dddd:dddd::1<span class="o">)</span> port <span class="m">443</span> <span class="o">(</span><span class="c1">#0)</span>
* ALPN, offering h2
* ALPN, offering http/1.1
* successfully <span class="nb">set</span> certificate verify locations:
* CAfile: /etc/ssl/cert.pem
* CApath: none
* <span class="o">(</span><span class="m">304</span><span class="o">)</span> <span class="o">(</span>OUT<span class="o">)</span>, TLS handshake, Client hello <span class="o">(</span><span class="m">1</span><span class="o">)</span>:
* error:02FFF036:system library:func<span class="o">(</span><span class="m">4095</span><span class="o">)</span>:Connection reset by peer
* Closing connection <span class="m">0</span>
curl: <span class="o">(</span><span class="m">35</span><span class="o">)</span> error:02FFF036:system library:func<span class="o">(</span><span class="m">4095</span><span class="o">)</span>:Connection reset by peer
$ curl -4 https://xxx.yyy/
<html>
<head><title>301 Moved Permanently</title></head>
<body>
<center><h1>301 Moved Permanently</h1></center>
<hr><center>nginx/1.23.0</center>
</body>
</html></code></pre>
<p>(résultat attendu) <br>
En HTTP (sans TLS), cela fonctionne aussi bien en IP v.4 qu'en IP v.6 :</p>
<pre><code class="bash"> $ curl -6 http://xxx.yyy/
<html>
<head><title>301 Moved Permanently</title></head>
<body>
<center><h1>301 Moved Permanently</h1></center>
<hr><center>nginx/1.23.0</center>
</body>
</html></code></pre>
<p>J'en déduis que la config SSL est fonctionnelle (vu qu'elle fonctionne en IP v.4) et que la config IP v.6 est aussi fonctionnelle (vu que c'est bon sans TLS). Bien évidemment, je n'ai aucune erreur côté serveur.</p>
<p>Auriez-vous des idées ?</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/nginx-docker-ip-v-6-et-tls.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/128290/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/nginx-docker-ip-v-6-et-tls#comments">ouvrir dans le navigateur</a>
</p>
flanhttps://linuxfr.org/nodes/128290/comments.atomtag:linuxfr.org,2005:Post/430012022-07-06T10:20:24+02:002022-07-06T10:20:24+02:00Quel framework léger pour remplacer Boostrap ?<p>Plop,</p>
<p>Pour développer qques outils Web vite fait (en Python pour ne pas le citer), quel petit framework CSS vous conseilleriez autre que l'usine à gaz Bootstrap ?</p>
<p>C'est facile de trouver des listes d'alternative, mais ça n'aide pas trop à choisir.</p>
<p>N'étant pas développeur Web (j'ai de bonnes notions CSS et HTML mais je ne connais pas tout l'art de faire un truc beau et qui tourne sur tous les browsers), je cherche un truc léger et surtout très bien documenté au niveau des bonnes pratiques.</p>
<p>Merci pour vos conseils !</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/quel-framework-leger-pour-remplacer-boostrap.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/128213/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/quel-framework-leger-pour-remplacer-boostrap#comments">ouvrir dans le navigateur</a>
</p>
gUIhttps://linuxfr.org/nodes/128213/comments.atomtag:linuxfr.org,2005:Post/429912022-06-28T14:03:58+02:002022-06-28T14:03:58+02:00Site web via Apache<p>Salut à tous, j'ai un petit problème !</p>
<p>j'ai installé un serveur Web ( apache2 ) sur ma machine debian 10<br>
je cherche à acceder à mon site web depuis un navigateur,<br>
mon dns est parfaitement configuré,<br>
mais mon site ne veut pas se crée lorsque je tape "a2ensite" puis le nom du site, en l'occurence "Ccslinux.com"</p>
<p>J'ai pourtant fait la configuration dans /etc/apache2/sites-available/ccslinux.com</p>
<p>Mais rien y fait, ca me dit qu'il n'existe pas…</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/site-web-via-apache.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/128141/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/site-web-via-apache#comments">ouvrir dans le navigateur</a>
</p>
ilies_ithttps://linuxfr.org/nodes/128141/comments.atomtag:linuxfr.org,2005:Post/429262022-05-28T15:17:10+02:002022-05-29T13:56:26+02:00combien d'instances django/react en meme temps sur un petit serveur?<p>Bonjour,<br>
J'envisage de louer un serveur sur digitalocean (1 core CPU, 1 GB Memory / 25 GB Disk / AMS3 - Debian 11 x64 à 5$/mois). </p>
<p>J'ai une appli qui tourne sur 2 containers dockers (edit : 1 pour django et 1 pour nginx, la bdd est une sqlite incluse dans le container django). Je m'interroge sur le nombre de paires de containers dockers que je pourrais faire tourner sur la machine sans la saturer. Il s'agit d'une appli permettant de faire des blogs qui n'auront quasiment pas de traffic (ou tres peu).</p>
<p>Est ce que vous avez une idée à la louche? Si je veux tester, à partir de quel % utilisation cpu et % utilisation mémoire on considere que cest saturé? </p>
<p>(javais pour projet de publier des sites django sur aws lambda a des coûts défiant toute concurrence avec une bdd unique en commun sur un seul serveur mais je n'ai pas réussi à bien gérer les images sur aws lambda donc je me rabbat sur l'option multi containers sur un serveur)</p>
<p>Merci</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/combien-d-instances-django-react-en-meme-temps-sur-un-petit-serveur.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/127866/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/combien-d-instances-django-react-en-meme-temps-sur-un-petit-serveur#comments">ouvrir dans le navigateur</a>
</p>
kr1phttps://linuxfr.org/nodes/127866/comments.atomtag:linuxfr.org,2005:Post/429112022-05-21T18:53:35+02:002022-05-21T22:40:17+02:00Framework CSS<p>Bonjour à tous, </p>
<p>Je développe une application en Vue 3. Cette application est une sorte de backoffice. J'utilisais jusqu'ici Vuetify mais ce framework passe mal la migration de Vue 2 vers Vue 3.</p>
<p>Je me pose alors la question : est-ce que je ne prendrais pas un autre framework ?</p>
<p>Sachant que :<br>
- ce n'est pas une application mobile<br>
- je veux que ce soit responsive<br>
- je veux que ce soit simple à utiliser (j'ai quelques widget dont je vais avoir besoin du type: tree view, progress bar, data table).</p>
<p>Et vous ? Quel framework utilisé vous pour vos application de type backoffice ?</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/framework-css.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/127814/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/framework-css#comments">ouvrir dans le navigateur</a>
</p>
phoenixhttps://linuxfr.org/nodes/127814/comments.atomtag:linuxfr.org,2005:Post/428462022-04-29T16:21:18+02:002022-04-30T20:46:23+02:00site stateful ou stateless?<p>Bonjour,<br>
J'apprend react et je découvre les applis stateful…<br>
Jusque là, j'aurais tout mis en requete sql sur une base de données en backend…</p>
<p>Je me demande dans quel cas et comment cest intelligent pour développer un site web? <br>
Est ce que vous auriez des exemples pour que je me rende compte? </p>
<p>J'imagine qu'on ne requete pas tout en sql pour éviter de surcharger la base de données quand il y a beaucoup d'utilisateurs, mais j'ai du mal à voir l'interet des sites stateful à part pour conserver le contenu des formulaires par exemple (exemple qui est utilisé dans mon cours).</p>
<p>Merci</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/site-stateful-ou-stateless.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/127615/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/site-stateful-ou-stateless#comments">ouvrir dans le navigateur</a>
</p>
kr1phttps://linuxfr.org/nodes/127615/comments.atomtag:linuxfr.org,2005:Post/428292022-04-21T14:56:16+02:002022-04-21T14:56:16+02:00framework javascript : lequel (ou pas) pour un site type stackoverflow?<p>Bonjour,<br>
Je voudrais construire un site qui intégrerait une partie forum fondée sur le meme modele que stackoverflow (avec les fonctionnalités de notifications, de votes, de suivi du compte utilisateur etc.)</p>
<p>Peut etre un peu moins élaboré dans les détails de suivi utilisateur du forum mais grosso modo les meme fonctionnalités…</p>
<p>J'ai appris jquery avec bootstrap et je me demande si j'ai besoin d'un framework type react en plus pour faire un forum de ce type. Qu'en pensez vous ? (en dehors du fait que bootstrap 5 a abandonné jquery ce qui posera des soucis de maintenabilité si je me lance sur jquery maintenant peut etre)</p>
<p>Je debute avec react car cest dans mon cours d'apprentissage de web ui…je ne trouve pas ça tres intuitif et je me demande encore comment ca va etre pratique ou pas pour l'integration avec django.</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/framework-javascript-lequel-ou-pas-pour-un-site-type-stackoverflow.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/127532/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/framework-javascript-lequel-ou-pas-pour-un-site-type-stackoverflow#comments">ouvrir dans le navigateur</a>
</p>
kr1phttps://linuxfr.org/nodes/127532/comments.atomtag:linuxfr.org,2005:Post/428252022-04-20T04:13:45+02:002022-04-20T04:13:45+02:00Savoir où mes utilisateurs cliquent<p>Bonjour <br>
Je debute en creation de sites web, nottament avec django et bootstrap.<br>
Je voudrais savoir comment savoir où mes utilisateurs cliquent sans passer par google analytics, nottament pour ameliorer le design du site si necessaire. Comment faire svp?<br>
Merci!</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/savoir-ou-mes-utilisateurs-cliquent.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/127512/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/savoir-ou-mes-utilisateurs-cliquent#comments">ouvrir dans le navigateur</a>
</p>
kr1phttps://linuxfr.org/nodes/127512/comments.atomtag:linuxfr.org,2005:Post/427972022-04-08T10:11:51+02:002022-04-08T10:54:55+02:00[Résolu] Calculs sur des coordonnées géographiques<p>Bonjour!</p>
<p>Pour un de mes projets je dois effectuer des additions et soustractions sur des coordonnées géographiques. Le problème est quand on dépasse une des limites des longitudes (-180:180). Je pourrais gérer ces cas avec des if/else mais il y a peut être un meilleur moyen en JavaScript? J'utilise la bibliothèque leafletjs, si ça peut être utile.</p>
<p>Exemple: je voudrais que la longitude 170+20 ne donne pas 190 mais -170.</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/resolu-calculs-sur-des-coordonnees-geographiques.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/127421/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/resolu-calculs-sur-des-coordonnees-geographiques#comments">ouvrir dans le navigateur</a>
</p>
tedhttps://linuxfr.org/nodes/127421/comments.atomtag:linuxfr.org,2005:Post/427382022-03-08T11:25:09+01:002022-03-08T11:59:34+01:00Haskell et elm<p>Bonjour,<br>
Je voudrais faire un petit projet de site web de vote. Pour ce faire, je pensais évidemment à <code>elm</code> pour l’interface côté front. Mais, comme il doit y avoir plusieurs utilisateurs votant, il faut que le front de chacun communique pour dire que son vote est prêt, etc. Donc, il faut communiquer avec le côté back.</p>
<h2 id="toc-Étape-0-préliminaire">Étape 0 (préliminaire)</h2>
<p>Dans la mesure du possible, je voudrais rester en programmation fonctionnelle. Du coup, je pensais faire le back en <code>haskell</code>. Mais quelle bibliothèque choisir ? Y-en-a-t-il qui embarque le serveur ?</p>
<p>Et comment, lier la page fournie par le back pour y mettre le elm ?</p>
<p>Ensuite comment partager les infos entre les différents clients ? J’imagine par websocket, mais j’ai du mal à trouver des exemples simples.</p>
<p>En framework, j’ai vu <a href="http://snapframework.com">Snap</a> qui à l’air pas mal.<br>
J’ai également vu <a href="https://hackage.haskell.org/package/scotty">scotty</a> qui devrait faire l’affaire dans ce projet.</p>
<p>Avez-vous des sites, avec de la documentation ?</p>
<h2 id="toc-Étape1">Étape1</h2>
<p>Créer une petite interface : Nom de la personne, et un bouton ratio pour entrée dans une « salle », ou en créer une.<br>
Si on entre dans une salle, ajouter un champ avec le nom de la salle.<br>
Un bouton « Validé »</p>
<p>Une fois validé, on affiche une page avec les personnes présentes. Un bouton pour valider les présents (uniquement celui qui à créé la salle)</p>
<p>Une fois que le propriétaire valide la salle, on se retrouve en salle de vote. Et on affiche juste un message.</p>
<h2 id="toc-besoin">Besoin</h2>
<p>Pour l’instant, j’en suis à l’étape préliminaire du choix du framework pour commencer mes expérimentation. Je vous fournirai le code au fur et à mesure, histoire d’apprendre et d’améliorer mes compétences. </p>
<p>J’éditerai au fur et à mesure des avancées.</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/haskell-et-elm.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/127122/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/haskell-et-elm#comments">ouvrir dans le navigateur</a>
</p>
Anthony Jaguenaudhttps://linuxfr.org/nodes/127122/comments.atomtag:linuxfr.org,2005:Post/426102022-01-05T23:21:08+01:002022-01-05T23:21:08+01:00nginx, .htpasswd : demander ou pas le mot de passe<p>Bonjour,</p>
<p>j'ai installé nginx sur un raspberry pi avec un écran tactile pour en faire une interface web de type kiosk.</p>
<p>J'aimerai que ces pages web s'affichent sur l'écran du RPi (adresse <code>http://localhost</code>) mais soit aussi accessible du reste du réseau local par l'IP du RPi. Sauf que j'aimerai que l'accès depuis le réseau soit protégé par un mot de passe.</p>
<p>J'ai ajouté un .htpasswd à la racine du site et modifié en conséquence <code>/etc/nginx/sites-available/default</code> avec <code>auth_basic</code> et <code>auth_basic_user_file</code> </p>
<p>Ça fonctionne exactement comme ça le devrait <strong>mais pas comme je le voudrais</strong>…</p>
<p>Comment faire pour que ce mot de passe ne soit pas demandé lors le l'affichage de la page sur l'écran du RPi, donc avec l'adresse <code>http://localhost</code> ?</p>
<p>Merci<br>
Christian</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/nginx-htpasswd-demander-ou-pas-le-mot-de-passe.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/126474/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/nginx-htpasswd-demander-ou-pas-le-mot-de-passe#comments">ouvrir dans le navigateur</a>
</p>
cévhéhttps://linuxfr.org/nodes/126474/comments.atomtag:linuxfr.org,2005:Post/425502021-12-09T10:58:52+01:002021-12-09T12:50:13+01:00Filtrage d'une adresse électronique<p>Bonjour,</p>
<p>Avec une expression rationnelle (régulière ?), je cherche à filtrer un tant soit peu des adresses électroniques saisies dans un formulaire. Pour l'instant, je me base sur les RFC 5321 sections 4.1.2 and 4.1.3 + Errata :</p>
<pre><code>email address = local-part@domain ou local-part@address-literal
local-part = (?:[a-zA-Z0-9!#$%&'*+\-/=?^_\x60{|}~]+(?:\.[a-zA-Z0-9!#$%&'*+\-/=?^_\x60{|}~]+)*)|(?:"[\x20-\x21\x23-\x5B\x5D-\x7E]*")|(?:"(?:\\[\x20-\x7E])*")
domain = (?:[A-Za-z0-9](?:[A-Za-z0-9\-]*[A-Za-z0-9])?(?:\.[A-Za-z0-9](?:[A-Za-z0-9\-]*[A-Za-z0-9])?)*(?:\.)?)
</code></pre>
<p>Pour address-literal, ça devient folklorique, j'ai laissé tomber après avoir tenté un truc pourri du style :</p>
<pre><code> (?:\[([0-9]|([1-9][0-9])|(1[0-9][0-9])|(2[0-5][0-5]))(?:\.([0-9]|([1-9][0-9])|(1[0-9][0-9])|(2[0-5][0-5]))){3}\])|(?:\[IPv6:[0-9A-F]{1,4}(?::[0-9A-F]{1,4}){7}\])|(?:\[IPv6:(?:[0-9A-F]{1,4}(?::[0-9A-F]{1,4}){0,5})?::(?:[0-9A-F]{1,4}(?::[0-9A-F]{1,4}){0,5})?\])|(?:\[IPv6:[0-9A-F]{1,4}(?::[0-9A-F]{1,4}){5}:([0-9]|([1-9][0-9])|(1[0-9][0-9])|(2[0-5][0-5]))(?:\.([0-9]|([1-9][0-9])|(1[0-9][0-9])|(2[0-5][0-5]))){3}\])|(?:\[IPv6:(?:[0-9A-F]{1,4}(?::[0-9A-F]{1,4}){0,3})?::(?:[0-9A-F]{1,4}(?::[0-9A-F]{1,4}){0,3}:)?([0-9]|([1-9][0-9])|(1[0-9][0-9])|(2[0-5][0-5]))(?:\.([0-9]|([1-9][0-9])|(1[0-9][0-9])|(2[0-5][0-5]))){3}\])|(?:\[[A-Za-z0-9\-]*[A-Za-z0-9]:[\x21-\x5A\x5E-\x7E]+\])
</code></pre>
<p>Donc si je me cantonne à local-part@domain, ça donne :</p>
<pre><code> /^((?:[a-zA-Z0-9!#$%&'*+\-/=?^_\x60{|}~]+(?:\.[a-zA-Z0-9!#$%&'*+\-/=?^_\x60{|}~]+)*)|(?:"[\x20-\x21\x23-\x5B\x5D-\x7E]*")|(?:"(?:\\[\x20-\x7E])*"))@(?:[A-Za-z0-9](?:[A-Za-z0-9\-]*[A-Za-z0-9])?(?:\.[A-Za-z0-9](?:[A-Za-z0-9\-]*[A-Za-z0-9])?)*(?:\.)?)$/
</code></pre>
<p>Je n'ai pas trouvé de règles précises sur les longueurs limites, plusieurs RFC hésitent entre 63 et 64 octets pour local-part (RFC 5321 section 4.5.3.1), entre 254 et 255 octets pour le domaine. Pour la longueur totale, c'est flou Afflelou. Si quelqu'un connaît la/les bonnes RFC récentes…</p>
<p>L'autre souci souci, c'est l'internationalisation, avec les RFC 5891 et suivantes, 6530 et suivantes. En gros, on peut écrire à pelé@exemple.com, δοκιμή@παράδειγμα.δοκιμή, 我買@屋企.香港, 二ノ宮@黒川.日本, медведь@с-балалайкой.рф, संपर्क@डाटामेल.भारत (et il y a aussi les langues qui s'écrivent de droite à gauche). Comment implémenter cela ?</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/filtrage-d-une-adresse-electronique.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/126224/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/filtrage-d-une-adresse-electronique#comments">ouvrir dans le navigateur</a>
</p>
plouchttps://linuxfr.org/nodes/126224/comments.atomtag:linuxfr.org,2005:Post/424922021-11-09T16:37:07+01:002021-11-09T16:37:07+01:00Bonnes pratiques pour un site web ?<p>Salut,</p>
<p>Je ne fais pas du tout de web ; j'ai, au mieux, acheté quelques noms de domaines à une époque lointaine ou fait des petits travaux par-ci par-là…<br>
Bref, je me suis engagé à déployer un Wordpress sur un serveur mutualisé OVH pour une petite association assez pauvre mais sympathique…c'est du bénévolat (mais j'ai du temps…c'est l'avantage quand on veut apprendre).</p>
<p>Du coup, je me demandais quelles étaient les bonnes pratiques et je cherche des conseils en tout genre.</p>
<p>Vaut-il mieux que je déploie WP en local, que je fasse le site avec quelques plugins et arrangements graphiques puis que je l'exporte sur le serveur mutualisé ou dois-je directement bricoler en ligne et non en local ?<br>
Si je dois travailler en local, quel serveur me conseillez-vous ? Faudra-t-il aussi installer un serveur capable de gérer WP sur le serveur d'OVH ou bien, je pourrai simplement choisir mon type de serveur là-dessus ?</p>
<p>Faudra-t-il absolument utiliser HTTPS pour un site qui n'aura ni utilisateurs enregistrés, ni achats…juste un formulaire de contact ? </p>
<p>Bref, je pars de loin, n'hésitez pas à me donner simplement de bonnes pistes, je ferai toutes les recherches nécessaires ensuite. Merci pour votre lecture et votre aide ! :)</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/bonnes-pratiques-pour-un-site-web.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/125920/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/bonnes-pratiques-pour-un-site-web#comments">ouvrir dans le navigateur</a>
</p>
Stinouffhttps://linuxfr.org/nodes/125920/comments.atomtag:linuxfr.org,2005:Post/423962021-09-21T11:15:25+02:002021-09-21T11:15:25+02:00https et github pages<p>Bonjour,</p>
<p>j'utilise github page pour héberger un petit site statique créé avec <a href="https://getpublii.com/">Publii</a>. Ce site est visible à <a href="http://myrealbook.vintherine.org/">http://myrealbook.vintherine.org/</a>. Pour un site statique qui ne demande aucun login, sans page de contact et ne permettant aucun commentaire je n'ai pas trouvé utile de me soucier de https.</p>
<p>le problème est que si l'adresse est forcée en https la page s'affiche mais sans aucun style. C'est par exemple le cas avec firefox en fenêtre privée (même si l'option "Ne pas activer le mode HTTPS uniquement" est cochée).</p>
<p>Auriez-vous une solution ou une suggestion ?</p>
<p>Merci d'avance</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/https-et-github-pages.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/125487/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/https-et-github-pages#comments">ouvrir dans le navigateur</a>
</p>
Vincent Gayhttps://linuxfr.org/nodes/125487/comments.atom