var Phenix = function () {

Troll du Web depuis 1996

Contourner un proxy filtrant avec PuTTY et Firefox

23 février 2018 par Phenix dans Trucs et astuces

Je ne suis pas un professionnel de la sécurité, je ne sais pas a quel point cette méthode est fiable, ni si elle fonctionnera aussi pour vous. Il est également probable que le règlement de votre institution vous interdise de contourner les mesures de sécurités mises en place.

Utilisation à vos risque et péril !

Il m’arrive régulièrement de me retrouver dans un environnement web bien sale, avec un proxy qui filtre le contenu et bloque l’accès a certain sites.
Comme tous ces outils sont bien bêtes et bloquent souvent des sites légitimes, et que je avais bien le temps, je me suis amusé à le contourner.

Avoir une connexion la maison

La première étape consiste à avoir un accès « outdoor » qui servira de relai. Ici j’utilise mon ordinateur à la maison.
Comme beaucoup, j’ai un adresse IP dynamique, problème que j’ai corrigé en utilisant le service nsupdate.info. Si le proxy bloque nsupdate.info, il faudra partir chaque matin avec votre IP sous le bras...
Si vous avez un nom de domaine chez OVH, vous pouvez vous en servir aussi.

Ensuite, il suffit de connecter PuTTy sur cette machine. Dans le cas où le proxy n’accepte pas les connexions SSH sur le port 22, changer le port SSH sur votre machine pour utiliser le même que celui du proxy (8080 par exemple).
Pour cela j’ai utilisé mon téléphone et ma connexion 4G (oui, oui :->) et j’ai modifié la configuration SSH.

Configurer l’hôte dans PuTTY

Il faut aussi ajouter le proxy dans la configuration PuTTy.

Configurer le proxy dans PuTTY

Ouvrir un tunnel SSH

On va ensuite ouvrir un tunnel SSH pour y faire passer le trafic de notre navigateur web. Ce qui circulera entre le proxy et vous sera complètement illisible pour le premier proxy, car protégé par le tunnel SSH.

Ouvrir un tunnel SSH

Dans « port source » placé le numéro de port du proxy (ici 8080). Coché aussi « dynamique ».

Brancher Firefox sur le tunnel.

Brancher Firefox sur PuTTY

On branche ensuite Firefox sur ce nouveau « proxy ». Placer « localhost » dans le SOCKS et coché bien SOCK v5. Coché également la case « Proxy DNS when using SOCKS v5 ».

Il reste à vérifier que vous avez accès à internet :).

Limiter le pouvoir d’Iedit-mode

15 janvier 2018 par Phenix dans Emacs/Spacemacs

Petit pense-bête pour Iedit-mode et Spacemacs.
Cela peut vous faire gagner un temps fou !

Iedit permet de replacer toutes les occurrences d’une sélection en une seule fois. Mais par défaut, il le fait dans tout le buffer.

Il existe cependant quelques possibilités pour limiter le « scope », la sélection :

  • F pour limiter Iedit à la fonction en court. C’est parfait pour renommer une variable !
  • L pour limiter à la ligne en court.
  • J pour ajouter une ligne du dessous a la sélection Iedit.
  • K pour ajouter une ligne au-dessus de la sélection Iedit.
  • Naviguer entre les occurrences : n et N ou TAB.

Il est aussi possible de sélectionner une zone pour réduire la sélection Iedit :

  1. SPC s e pour activer Iedit.
  2. Sélectionnée la zone (v en Evil-mode, les autres comme V ne fonctionne pas).
  3. SPC s e pour réactiver Iedit qui limitera l’effet.
Voir en ligne : How to replace words in a region using iedit ?

Une marge sur le « scroll » des ancres HTML

17 décembre 2017 par Phenix dans Trucs et astuces

Voici une petite astuce pour avoir une marge, entre le « haut du browser » et l’emplacement réel de l’ancres, lorsque l’on clic sur une ancre.

  1. /**
  2.  * Appliquer une marge sur les ancres HTML c'est plus
  3.  * ergonomique.
  4.  */
  5. :target {
  6.     border-top: 75px solid transparent;
  7.     margin: -75px 0 0;
  8.     -webkit-background-clip: padding-box;
  9.     -moz-background-clip: padding;
  10.     background-clip: padding-box;
  11.     outline: none; /* Supprimer la outline disgracieuse de Chrome */
  12. }

:target est une sélécteur css bien supporté qui cible toutes les ancres. Du coup on lui ajouter une fausse marge.
L’avantage ce code, c’est qu’il va fonctionner même si l’ancre est dans un texte. Ce que n’est pas le cas de la majorité des techniques à base de display: block; et de :before.

Voir en ligne : offsetting an html anchor to adjust for fixed header

Recherche ajax avec les formulaires SPIP

Une recherche « live »

16 novembre 2017 par Phenix dans SPIP

Le but de ce formulaire est une recherche dynamique : a chaque nouvelle lettre dans l’input la recherche s’affine.

La bonne nouvelle c’est qu’on peut faire cela nativement avec les fonctions présentent dans SPIP.

Dans un premier temps, il faut créer un fichier formulaires/recherche_ajax.php. Il va mettre à jour le contexte du formulaire en lui passant un critère de recherche {recherche}.

  1. <?php
  2.  
  3. if (!defined('_ECRIRE_INC_VERSION')) {
  4.         return;
  5. }
  6.  
  7. function formulaires_recherche_ajax_charger_dist($ajax_bloc) {
  8.         return array(
  9.                 'ajax_bloc' => $ajax_bloc,
  10.                 'recherche_'.$ajax_bloc => _request('recherche_'.$ajax_bloc),
  11.                 'lang' => $lang,
  12.         );
  13. }

Ensuite un peu de JavaScript et d’HTML pour recharger un bloc ajax, dans un fichier formulaires/recherche_ajax.html.
Ici, j’ai simplement repris le formulaire de recherche de SPIP en modifiant le name de l’input de recherche.

  1. <div class="formulaire_spip formulaire_recherche[ (#ENV{class})]" id="formulaire_recherche">
  2.         <form action="[(#ENV{action})]" method="get">
  3.                 <div class="editer-groupe">
  4.                         [(#ENV{action}|form_hidden)]
  5.                         [<input type="hidden" name="lang" value="(#ENV{lang})" />]
  6.                         <label for="#ENV{_id_champ}"><:info_rechercher_02:></label>
  7.                         <input type="[(#HTML5|?{search,text})]" class="search text" name="recherche_#ENV{ajax_bloc}" id="#ENV{_id_champ}"[ value="(#ENV{recherche})"] />
  8.                         <input type="submit" class="submit" value="&gt;&gt;" title="<:info_rechercher:>" />
  9.                 </div>
  10.         </form>
  11. </div>

Dans le même fichier, à la fin, un peu de JavaScript pour mettre à jour le bloc_ajax (a savoir un squelette avec la boucle de recherche). Pour plus d’information, sur le fonctionnement d’Ajax avec SPIP, la page de la documentation officiel est bien faite.

  1. <script type="text/javascript">
  2.  // Chaque input déclenche la recherche ajax
  3.  $("#recherche_#ENV{ajax_bloc}").on("input", function () {
  4.          ajaxReload(
  5.                  "#ENV{ajax_bloc}",
  6.                  {
  7.                          args: {
  8.                                  // Envoyer le contenu du formulaire dans le
  9.                                  // contexte de recherche SPIP
  10.                                  recherche: $(this).val()
  11.                          }
  12.                  }
  13.          );
  14.  });
  15. </script>

Dans le bloc ajax (un fichier inclure/grille_article), je place simplement ma boucle de recherche :

  1. [(#SET{defaut_tri, #ARRAY{titre, 1, num titre, 1, date, #ENV{date_sens, -1}, id_article, 1, points, -1
  2.  }})
  3.  
  4. ]<B_article_ajax>
  5.         #ANCRE_PAGINATION
  6.         <BOUCLE_article_ajax(articles){recherche ?}{tri #ENV{par, [(#ENV{recherche}|?{points, num titre})]}, #GET{defaut_tri}}{pagination}>
  7.                 <INCLURE{fond=inclure/article_resume}{id_article} />
  8.         </BOUCLE_article_ajax>
  9.         [<p class="pagination">(#PAGINATION)</p>]
  10. </B_article_ajax>

Il ne reste qu’à appeler tout cela :

  1. [(#FORMULAIRE_RECHERCHE_AJAX{grille_article})
  2.  
  3. ]<INCLURE{fond=inclure/grille_article}{env, ajax=grille_article} />

Pour en savoir plus sur les formulaires de SPIP, rien ne vaut la documentation de spip.net :).

Laravel + Foundation 6

7 septembre 2017 par Phenix dans Laravel

Laraval vient par défaut avec Boostrap. Personnellement, en matière de Framework frontend, je préfère largement Foundation.

Heureusement, il existe un preset pour changer cela proprement dans Laravel. Les autres Tuto ou tout était fait à la main était quand même barbant.

Installer le preset :

Facile, on demande à composer :

  1. composer require laravel-frontend-presets/zurb-foundation

Activé le preset :

Soit on veut juste activer foundation :

  1. php artisan preset foundation

Soit on veut aussi que les templates de base de Laravel soit adapté :

  1. php artisan preset foundation-auth

Il ne reste plus qu’à installer :

  1. npm install && npm run dev
Voir en ligne : Zurb Foundation 6 Preset For Laravel 5.5