keul.fr - technologie web

Aller au contenu | Aller au menu | Aller à la recherche

5 bugs d'après les les dev, 500 selon les QA

jeudi, 21 avril 2016

L'accélération du web

ampcar.png

À gauche, une voiture qui peut être moins performante dû à la grosse remorque qu'on peut lui atteler grâce à son attache remorque
À droite, une voiture performante qui vous assure par son absence d'attache remorque que rien ne vous ralentira.

Qui irait acheter une nouvelle voiture sans attache-remorque pour s'assurer que celle-ci a toujours de bonnes performances? Personne?


Maintenant, si l'on suit cet article de Génération-nt: "AMP HTML : Google dope le Web mobile"
On se rend compte que Google propose un "sous-ensemble de HTML avec par exemple des restrictions fortes au niveau de JavaScript"
Grosso-modo, en retirant les scripts (souvent dispensables, charger jQuery, un script d'une centaine de Ko pour animer un menu déroulant), la plupart des pubs (avec script qui font de l'analyse, du tracking et plus) et d'autres idioties, HTML AMP permet de meilleures performances.

<putaclick> Vous ne devinerez jamais ce qu'a fait Google pour accélérer le web </putaclick>

desactiver_javascript.png
 

 

Qui irait refaire son site web dans une version sans attache-remorque pour s'assurer que celle-ci a toujours de bonnes performances?
"Twitter, Pinterest, WordPress.com ou encore LinkedIn sont de premiers partenaires technologiques qui vont intégrer des pages AMP HTML. Une trentaine d'éditeurs sont d'ores et déjà dans la boucle parmi lesquels la BBC, BuzzFeed, Financial Times, The Guardian, Mashable, The Washington Post ainsi que Les Échos."

pokerface.jpg
 

Est-ce que ça va marcher?
Je ne sais pas, google fait son forcing, mais comme google plus, ça n'attirera que ceux qui se soucient de leurs référencements.

 

Comment en est-on arrivé là? 
Est-ce un problème technologique?
Non, c'est le résultat de personnes bornées, qui ne réfléchissent pas à l'avenir et qui comprennent mal ce qui se passe réellement.
Se retrouvant face à un mur, elles ne se remettent pas en question, n'admettent pas leurs erreurs et préfèrent accuser la technologie.

Prenons une image bien connue:

 

free-model.jpg

N'est-ce pas super? On n'a rien à payer pour la grange.
Ouais! Et même la nourriture est gratuite.
Cochons discutant du modèle "Gratuit"

La plupart des sites web gratuits affichent de la pub aux visiteurs et essayent de récolter leurs données personnelles afin de les revendre aux publicitaires. Le visiteur est donc comparé à un cochon, à un produit qu'on vend au "client", le "publicitaire".
Puis, il y a eu des incidents: à force de mal nourrir et entretenir les animaux, ceux-si sont devenu malades et de piètre qualité.
Pour le web, c'est pareil, à force de mal respecter les visiteurs, en leurs mettant des publicités abusives,contenant des virus, ralentissant la navigation et bourrant les quotas, ceux-ci ont commencé à s'équiper en logiciels de blocage de publicité.
Et plutôt que de se remettre en question, ceux-ci persévèrent et se mettent à bloquer ceux qui bloquent la publicité, ce qui les risque de mener à la pire des solutions pour eux, non plus le retrait des publicités, mais le retrait des liens menant vers des pubs qui abusent avec la publicité. (à l'image de WoT)


 

lundi, 29 octobre 2012

Hacking da HTeuMeuLeu

ls.png1. Installez Stylish pour Firefox (ou Stylish pour Chrome).
2. Cliquez sur le bouton "Installer" dans cette page
3. Allez sur un skyblog
4. ????
5. PROFIT!!!

Complément

Changer le logo google
stylish-ex1.png

Changer le logo de Wikipédia
stylish-ex2.png

Mettre Yuki Nagato dans PhpMyAdmin
stylish-ex3.png

Explications

Les pages web sont basées sur le langage HTML qui est prévu pour s'adapter au support.
Les navigateurs peuvent ainsi se débrouiller pour afficher la page web sur votre ordinateur, smartphone, tablette ou tout autre appareil.
Ils redimensionnent alors les blocs de texte pour les adapter à la taille de l'écran et peuvent aussi s'adapter aux utilisateurs ayant des handicaps (voir la section Chrome), en mettant un fond sombre, en imposant une taille de texte minimale, en permettant la synthèse vocale...
Certains navigateurs vont plus loin, et rendent le bidouillage possible en modifiant leurs configuration et en gérant des modules supplémentaires. Le module Stylish permet par exemple de facilement modifier l'apparence et la mise en forme du contenu grâce à des règles CSS (note: c'est aussi possible sans module en modifiant le fichier userContent.css, mais c'est moins pratique, vu qu'il faut redémarrer le navigateur à chaque modification).

En quoi est-ce utile? En quoi est-ce pratique?
Pour mes parents, j'ai configuré leur navigateur en utilisant ce style, Il retire tout soulignage et force le soulignage de tous les liens cliquables. Ils peuvent donc facilement savoir ce qui est cliquable en naviguant sur internet.
Certes, tous les liens dans les menus sont soulignés, ça devient moche à en tuer des graphistes mais bon.

Un peu de philosophie

En fin de compte, ce qui est très intéressant, c'est que HTML est un langage ouvert, documenté et librement utilisable, qui devient ainsi plein de possibilités:
  • les webmasters peuvent inclure des données et modules d'autres sites, gérer une identification externe...
  • les créateurs de logiciels peuvent effectuer des traitements de manière automatique (les linuxiens adorent l'outil wget)
  • les visiteurs peuvent très facilement profiter du bidouillage des codeurs grâce aux extensions des navigateurs.
Bien entendu, tout ceci n'est possible facilement qu'avec des protocoles et logiciels libres. Apple ne vous laisse pas la possibilité de bidouiller dans sa cage dorée iOS, contrairement à Google qui permet un minimum le bidouillage sous Android en autorisant l’installation applications tierces, même si les bidouilles restent assez limitées, par la volonté des constructeurs.

En effet, les constructeurs sont des sociétés capitalistes dont le but est la recherche du profit et l'accumulation du capital, en concevant certes de beaux produits qui "it just works", abrités des virus et des bidouilles, mais qui ne font pas forcément avancer l’humanité.

Avec un système libre, vous enverrez un satellite dans l'espace. Avec un système verrouillé, vous enverrez des piafs sur des cochons.


Le coté technique


Mettez dans un nouveau style sous stylish les lignes suivantes:
* {background:grey !important;}
a {border:1px solid red !important;}

Si vous relancez le navigateur, vous verrez que la couleur de fond à changée et que les liens sont encadrés en rouge

Explications:
  • A gauche, nous avons l'élément HTML modifié: "*" corresponds à tous les éléments, "a" aux liens, "img" aux images (liste des tags)...
  • Nous avons ensuite une accolade indiquant ce qui sera affecté à l'élément HTML
  • Nous avons ensuite une ou plusieurs propriété(s) (liste des propriétés) et ses(leurs) valeurs 
  • Puis le mot clef "!important", qui force la valeur à être appliqué (on augmente son importance)
  • Puis la fin de l'accolade

Essayez maintenant de mettre tous les textes en noir et les liens en bleu.

Afficher SolutionMasquer Solution


* {color:black!important;}
a {color:blue !important;}



jeudi, 6 septembre 2012

It's Time for Some Piracy!


En France, nous avons droit à la Hadopi, la "Haute Autorité pour la Création, la DistributionDiffusion des Œuvres, du Savoir et la Protection des ayants-droits sur Internet."
Je sais pas si les artistes arrivent à mieux remplir leurs frigo et si la culture est accessible à tous ou si ce sont juste de riches qui parviennent à s'enrichir encore plus.

namethese.png
source: Quantum Diaries
Parce que le savoir est relatif et à toute son importance

Ce que je sais en tout cas, c'est que pour mener leur mission à bien et s'assurer qu'internet ne soit plus utilisé pour télécharger illégalement, la Hadopi a décidé de responsabiliser le titulaire de l'abonnement internet face à un défaut de sécurisation.
Sauf que là, la Hadopi veut punir le titulaire au bout de trois avertissement par une coupure de la ligne pendant au minimum un mois, parce qu'il n'a pas réussi à sécuriser sa connexion.
Bon ben entendu, on ne va pas punir Sony, Sarkozy, les banquiers, les techniciens des centrales nucléaires iraniennes... Et ne pensez pas qu'ils veulent juste vous mettre à poil.

Enfin, si vous lisez cet article, je pense que vous êtes plus intéressés par la sécurité que la Hadopi et ses histoires de piratage. Entrons donc dans le vif du sujet.

Internet et la sécurité

Les ordinateurs, prévus à l'origine pour faire fonctionner de gros systèmes dans des entreprises, se sont forgés une place dans les foyers grâce aux progrès technologiques et à leurs polyvalence: jeux, traitement de texte, tableurs, retouche d'images, lecteur multimédia, connexions en réseau local.

ancien-imac.jpg
(Ancien modèle d'iMac - source)


Mais c'est surtout l'arrivée du réseau mondial Internet qui les ont rendu plus populaires.

Celui-ci a en effet de gros arguments: le savoir et les idées d'une personne pouvaient alors êtres transmises vers une audience mondiale, limités par la seule barrière physique de la langue.  Le courrier électronique, les groupes de discussionla messagerie instantanée, les sites web, les forums... n'ont alors cessé de se développer.

Hors, si les ordinateurs n'avaient à l'origine pas besoin d'une grande sécurité, étant isolé dans leurs entreprise et foyer, celle-ci s'est révélé indispensable avec Internet et l’arrivée des hacker et crackers, débutants ou vrais experts.

Le hacker, souvent confondu avec le cracker, se caractérise par l'informaticien qui cherche à agir pour le bien d'autrui.
Son but sera donc
  • D'informer l'utilisateur des risques de sécurité
  • D'améliorer la sécurité des systèmes existants
  • D'aider le peuple et les journalistes en proposant des systèmes anonymes, cryptés et décentralisés...
Le cracker lui se caractérise par l'informaticien qui cherche à agir uniquement pour lui.
Son but sera:
  • D'utiliser des systèmes anonymes pour agir sans se faire repérer et identifier.
  • De causer des dommages en détruisant des données ou du matériel
  • De dérober des données, souvent dans un but lucratif
  • D'usurper une identité...
Avec l'arrivée des tablettes, plus simple d'utilisation pour Mme Michu, qui n'a plus à savoir comment insérer un CD d'installation, la sécurité s'est faussement accrue en en empêchant certes les logiciels tiers d’accéder trop facilement à tout le système, mais en autorisant le vendeur à faire ce qu'il veut, ce qui est gênant en cas de piratage et même dangereux quand c'est volontaire.Les serveurs avec leurs bases de données deviennent aussi la proie des crackers.

Le piratage

ATTENTION: le faite de s'introduire dans un système informatique est illégal et est puni par la loi.
Si vous voulez acquérir des connaissances en piratage, vous ne pourrais le faire que sur le matériel vous appartenant, ou uniquement dans le cadre d'un audit de sécurité (renseignez-vous sur le sujet).

On va parler de trois cas que j'ai pu rencontrer.

Premier cas: défaçage de blog.

C'est arrivé à un ami, qui utilisait un blog basé sur Nucleus et qui n'avais pas été mis à jour suite à la découverte d'une faille de sécurité.
Le hacker ayant simplement recherché l’exploit permettant d'utiliser la faille de sécurité, puis recherché sur google les blogs qui utilisent une version qui n'est pas à jour.
Il a ensuite utilisé l'exploit pour défaçer le site web
Lire l'article

Second cas: faille Cross Site Scripting

J'avais découvert par hasard qu'un site contenait une faille de type Cross Site Scripting.
Des entrées de formulaires ne filtraient pas le caractère <, et permettaient donc d'afficher du code javascript sur le site.
Je les ai contacté par e-mail et ils ont pu corriger rapidement la faille de sécurité.

Attention par contre: si vous trouvez une faille de sécurité par hasard, et même si vous ne l'exploitez pas, faites attention en contactant la société gérant le site web.
Car même si vous n'avez rien fait de moralement répréhensible, elle pourrait tenter de vous attaquer.
Il peut être intéressant dans ce cas de passer par un intermédiaire comme zataz qui vous protégera et qui saura traiter le cas correctement (il vaut mieux être équipé en huissier et avocat)

Troisième cas: défaçage de site.

Attention, c'est du lourd. Un jour, je reçois le mail suivant avec un fichier en attache:

auth.png

Oui, il a bien mis dans l'URL la variable "auth" que le visiteur peut modifier à loisir.

Après un gros facepalm, je lui demande si je peux récupérer le reste du site pour vérifier si c'est bien ça la faille.
auth2.png
Fausse alerte, la variable "auth" était juste là pour indiquer au visiteur que le mot de passe est incorrect dans l'interface de connexion.

Je regarde les autres fichier pour voir s'il n'y aurais pas un problème et ...
auth3.png
$_GET['id'] est le contenu de la variable transmise dans l'URL. Donc si j'ai: monsite.com/repertoire/page.php?id=42 ma variable $_GET['id'] aura la valeur 42.
Sauf qu'il n'a absolument pas protégé sa requête contre les injections SQL.


Après avoir récupéré le fichier access.log, j'ai vu de belles requêtes. Vous pouvez regarder un extrait (j'ai retiré le nom de domaine)
Problème trouvé, faille comblée, je pensais que s'en était fini là.
On y voies donc les injections sql, et même l'utilisation d'un logiciel qui cherche toutes les pages d'administration qui pourraient exister.

Et pourtant, le délir continue.
Si on regarde bien dans le fichier access.log, on voie clairement dans le champ user-agent qu'il utilise ...
... Internet Explorer 8!
disgusted-mother-of-god.png


J'ai aussi récupéré l'URL d'une image envoyée par le hacker sur la page de défacage et pointant vers cette image : http://keul.fr/public/up312971987391.jpg
Donc le cracker à comme pseudo "Morrocan-alien", et si on faisait une recherche sur google?
http://www.experienzia.com/Newsletter/
"always able te break the security"
http://www.semia-autun.com/
"hacking is my game"
Bon
Point commun entre toutes les pages hackées?
la MÊME faille, la même injection SQL.
Donc son "always", j'en doute très fortement.

http://www.atcoroglio.it/interni/aziend.php?id_azi=1
"hello admin"
"this is just a minor warning"
"just to let you know how weak your"
"security is"
Bon, vous remarquez les problèmes de formatage de page?
Regardez la source de la page, et vous devriez voir rapidement un :
"urn:schemas-microsoft-com:office:word"
OhCrap.png
Il utilise des documents MICROSOFT WORD pour insérer son texte dans des pages web!!!

Un script kiddie qui utilise Word et IE8? Manquerait plus qu'il installe OpenOffice comme pare-feu.


Conclusion :

Si vous créez un programme local, il n'y a généralement pas trop de risque, l'utilisateur cherchant rarement à causer des dommages à sa propre machine. Par contre, si votre programme doit traiter des fichiers téléchargés ou se connecter à internet, faites attention à les traiter avec prudence.
Si vous créez un programme/site pour un serveur, le risque sera plus grand et il vous faudra à tout prix respecter cette règle:
NE FAITES CONFIANCE A PERSONNE.
Le visiteur vous envoie une requête? un fichier? dites-vous qu'il peut contenir n'importe-quoi, c'est le visiteur qui choisit ce qu'il vous envoie.
Il convient donc de traiter avec la plus grande prudence les variables $_GET, $_POST, $_FILES, $_COOKIE, $argc, $agrv... et de ne pas oublier que si vous comptez afficher du texte dans une page web, Un javascript contenu dans celui-ci pourrait aussi être exécuté.

J'expliquerai dans un prochain article comment sécuriser son code PHP.

Bonux:

http://hmm-la-bd.eu
Cliquez sur le bouton admin en haut à droite
Regardez l'URL
testez
...

samedi, 31 mars 2012

Conseil aux blogeurs

L'article de ce mois est publié ur le blog Meido-Rando pour son quartier libre.

Consulter l'article

mercredi, 29 février 2012

LibreScale [fr]

On utilise souvent des échelles de notation pour pouvoir donner rapidement un avis sur quelque-chose.

Certains sont automatiques, comme l'Acid test et d'autres dépendent plus d'un jugement personnel (notation de jeux vidéos).

Or si on commence à avoir une évolution sur le point de vue écologique (capacité de recyclage, consommation énergétique, ...), on ne dispose pas vraiment de système de notation pour juger si un système électronique/informatique est ouvert ou fermé/propriétaire.

J'ai décidé d'inventer donc une échelle, qui bien entendu sera amenée à évoluer :

librescale.php [en+fr] V1.0

- page 2 de 8 -