Bonnes Pratiques Web
36.4K views | +5 today
Follow
 
Scooped by Mickael Ruau
onto Bonnes Pratiques Web
Scoop.it!

Analyze Runtime Performance  |  Tools for Web Developers  |  Google Developers

Analyze Runtime Performance  |  Tools for Web Developers        |  Google Developers | Bonnes Pratiques Web | Scoop.it
Users expect pages to be interactive and smooth. Each stage in the pixel pipeline represents an opportunity to introduce jank. Learn about tools and strategies to identify and fix common problems that slow down runtime performance.
Mickael Ruau's insight:

 

  • Don't write JavaScript that forces the browser to recalculate layout. Separate read and write functions, and perform reads first.
  • Don't over-complicate your CSS. Use less CSS and keep your CSS selectors simple.
  • Avoid layout as much as possible. Choose CSS that doesn't trigger layout at all.
  • Painting can take up more time than any other rendering activity. Watch out for paint bottlenecks
more...
No comment yet.
Bonnes Pratiques Web
Développement Php, Mysql , Javascript, Jquery, Css3, (X)HTML5...
Curated by Mickael Ruau
Your new post is loading...
Your new post is loading...
Scooped by Mickael Ruau
Scoop.it!

Un environnement de développement PHP avec Netbeans et Docker

Un environnement de développement PHP avec Netbeans et Docker | Bonnes Pratiques Web | Scoop.it
Docker, c’est une technologie qui révolutionne la virtualisation. Pour nous les développeurs, Docker signe la fin du syndrome “works on my machine”. Je ne saurais trop vous recommander de suivre les…
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Stylez-moi ce formulaire ! · Les intégristes

Après avoir tenu ce discours : «Non les formulaires, on ne peut pas les styler, désolé» pendant des années, les webdesigners les plus tenaces sont revenus avec des exemples de sites en nous disant : «Tu me dis que c’est pas possible, mais là sur tel site, ils l’ont fait.»”

Mickael Ruau's insight:
jQuery UI selectmenu
Pas des plus facile à manipuler, mais très complet, il couvre largement le spectre des utilisations de menus avec des listes déroulantes. Trop de styles inline qui complique le skinning des css externes. A noter que ce plugin utilise les attributs ARIA pour l’accessibilité.
jQuery UI checkbox
Simplissime. Par exemple pour une case à cocher il suffit d’initialiser le script de cette façon $('input').checkBox();
Et la case à cocher est remplacée par un span avec la classe “ui-checkbox”, il ne reste plus qu’à appliquer les CSS.
jQuery Stylish select
Je ne l’ai pas testé personnellement, mais ça a été utilisé sur un projet récent dans ma boîte. Complètement customisable en CSS et ultra light.
Uniform
Je suis tombé sur celui-ci il y a quelques jours, il me parait assez complet et facilement skinnable, une image sprite pour tous les éléments (vous pouvez créer des thèmes et les proposer sur le site), une fois les éléments stylés la navigation au clavier me parait correcte, reste juste à mettre plus en avant le focus sur les éléments.
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Que se passe-t-il en mode quirks ? (traduction) · Les intégristes

Ce billet est la traduction de l’article « What happens in Quirks mode » de Jukka “Yucca” Korpela initialement paru sur le site du Tampere University of Technologie (Finlande) le 13 avril 2007, dernière modification le 28 février 2008.

Le mode quirks est un mode de fonctionnement des navigateurs Web tels qu’Internet Explorer (IE), Firefox et Opera. En gros, le mode quirks (aussi appelé mode compatibilité) signifie qu’un navigateur relativement moderne simule intentionnellement de nombreux bugs des anciens navigateurs, en particulier IE 4 et IE 5.

 

Le mode quirks est déclenché par le doctype sniffing aussi connu sous le nom de doctype switching. Cela signifie que le navigateur inspecte le début d’un document HTML pour voir si il contient une déclaration de doctype comme requis par les spécifications HTML.

Le but du mode quirks est de faire que les vieilles pages s’affichent comme l’a voulu leur auteur. Les vieilles pages peuvent avoir été écrites pour utiliser les caractéristiques connues des vieux navigateurs ou du moins de s’y adapter. Pour plus d’informations sur le mode quirks, en général, consultez le site QuirksMode.org.

Il n’existe pas de spécification de ce qui se passe en mode Quirks. Après tout, le mode est, par essence, une violation intentionnelle des spécifications CSS et HTML. Cependant, puisque les auteurs peuvent avoir besoin d’une description de ce qui peut réellement se passer dans le mode quirks, j’ai rédigé ce document.

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Workflow front-end : quels outils choisir ? (2/3) — Troopers

Workflow front-end : quels outils choisir ? (2/3) — Troopers | Bonnes Pratiques Web | Scoop.it
Après avoir pris connaissance des limites de notre worfklow actuel, quelles sont les possibilités qui s'offrent à nous pour établir une nouvelle stack front-end ? Nous vous en parlons !
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

La release candidate 1 d'Angular 7 est disponible, la sortie de la version stable est prévue pour fin octobre

La release candidate 1 d'Angular 7 est disponible, la sortie de la version stable est prévue pour fin octobre | Bonnes Pratiques Web | Scoop.it


La release candidate 1 (RC1) d'Angular 7 est disponible depuis le 10 octobre et elle permet d'avoir un aperçu des nouveautés du framework. Il y en a plusieurs, mais nous n'allons citer ici que quelques-unes qui, pour notre part, faciliteront grandement le travail des développeurs. Parmi ces améliorations on peut citer :

  • l’amélioration des performances des applications par l’automatisation de l’ajout ou du retrait des métadonnées de réflexion, réduisant ainsi la charge des applications une fois en production ;
  • la documentation CLI a été intégrée à la documentation principale angular.io ;
  • introduction de la fonctionnalité Glisser/Déposer qui permet de créer une interface utilisateur qui peut être utilisée pour glisser, déposer, trier et transférer des éléments librement dans une liste ;
  • l’amélioration du routeur : cette fonctionnalité est particulièrement intéressante car désormais l’interface CanLoad contiendra UrlSegment qui stockera les urls vers lesquelles un utilisateur a essayé de naviguer et pourra être redirigé ultérieurement.
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Tips for balancing web fonts & page load - Frontend News #1

Tips for balancing web fonts & page load - Frontend News #1 | Bonnes Pratiques Web | Scoop.it

In 2010 Google launched Google Fonts and made custom web fonts accessible to the world. You had a custom typeface on your site with just a few lines of copy-and-pasted CSS.

index.html
<link href="https://fonts.googleapis.com/css?family=Bevan" rel="stylesheet">
index.css
body { font-family: 'Bevan', Georgia, serif; }

Under the hood Google Fonts links to a stylesheet full of font-face declarations.

css?family=Bevan
/* latin */ @font-face { font-family: 'Bevan'; font-style: normal; font-weight: 400; src: local('Bevan Regular'), local('Bevan-Regular'), url(https://fonts.gstatic.com/s/bevan/v9/4iCj6KZ0a9NXjG8dWCvZtUSI.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

This setup prioritizes simplicity over performance. But it leads to a nasty problem on slow connections: FOIT.

Flash of Invisible Text (FOIT)

Most modern browsers will layout the page but wait for three seconds before rendering any text. If the custom font has loaded it will appear, if not the next available fallback font is rendered. This is known as FOIT. On a bad 3G connection this usually means three seconds of a site devoid of text.

Mickael Ruau's insight:

Use WebPageTest for profiling

WebPageTest is the best free tool for profiling page load. It allows you to throttle connections and use real mobile devices. For this study, we'll use the "Easy" profile, which is a slow 3G connection. The results WebPageTest provides are comprehensive but sometimes hard to understand.

 

(...)

A non-exhaustive check list to loading fonts

[ ] - Avoid plain-old @font-face { }
[ ] - Prefer .woff2 with a .woff fallback
[ ] - FOUT > FOIT for content sites
[ ] - Font Face Observer for FOUT
[ ] - Match styles for a subtle transition
[ ] - Keep an eye on HTTP/2 push
[ ] - Profile early and often

 

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Les principaux navigateurs Web prévoient de supprimer le support de TLS 1.0 et 1.1 au premier semestre 2020

Les principaux navigateurs Web prévoient de supprimer le support de TLS 1.0 et 1.1 au premier semestre 2020 | Bonnes Pratiques Web | Scoop.it

Cela fait déjà deux mois que la version 1.3 du protocole TLS a été officiellement publiée après son approbation en mars dernier par l'organisme d'élaboration des standards Internet IETF (Internet Engineering Task Force). Alors, c'est le temps pour abandonner les versions plus anciennes. C'est en tout cas le message que viennent de lancer les principaux navigateurs Web en annonçant simultanément leur intention de mettre fin au support de TLS 1.0 et 1.1.

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Le vaste monde des alternatives textuelles : les attributs ARIA : à n'utiliser qu'en connaissance de cause (6/6)

Le vaste monde des alternatives textuelles : les attributs ARIA : à n'utiliser qu'en connaissance de cause (6/6) | Bonnes Pratiques Web | Scoop.it
Dans la spécification ARIA, il existe 3 attributs qui permettent d'ajouter du contexte textuel à des éléments. Ils peuvent être utilisés comme alternatives textuelles dans certains contextes. Les attributs aria-label et aria-labelledby permettent de nommer un élément tandis que l'attribut aria-describedby permet de le décrire. Comment les utiliser ?
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

State of the Front-End Industrialisation

State of the Front-End Industrialisation | Bonnes Pratiques Web | Scoop.it
State of the Front-End Industrialisation. Contribute to GuillaumeAmat/state-of-the-front-end-industrialisation development by creating an account on GitHub.
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Bypass CORS Errors When Testing APIs Locally

Bypass CORS Errors When Testing APIs Locally | Bonnes Pratiques Web | Scoop.it
Make configuration changes to your web browser or run a local server to bypass CORS and other cross origin problems when testing APIs locally.
Mickael Ruau's insight:

Ask the server owner politely to add CORS support

It doesn’t take much effort to enable cross origin resource sharing on a server. As mentioned on enable-cors.org, the owner only needs to add Access-Control-Allow-Origin: * to the response header. There are even instructions on how to do this in various programming languages, all of which are not too difficult and make a world of difference to developers experiencing these errors.

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

A practical guide to CORS – Thomas Wang –

Web pages are under the restrictions of same-origin policy, which means scripts contained in a web page cannot access data in another page with different origin. For example…
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Requête Ajax Cross-domain via un proxy — Pascal MARTIN : développement Web & PHP

Nous avons vu au cours d’un précédent article comment contourner la limitation de Same Origin Policy en utilisant la balise <script> pour effectuer des requêtes Ajax vers un serveur distant (nom de domaine différent du nom de domaine sur lequel notre application est déployée).

Cette solution nous imposait de modifier notre code côté navigateur, pour ne plus utiliser une instance d’object XMLHttpRequest, mais passer par de la génération dynamique de balises HTML <script>.

Nous allons à présent voir comment effectuer des requêtes Ajax distantes en passant par un proxy, de manière à ne pas avoir à ré-écrire tout notre code de chargement de données depuis l’application HTML+Javascript.

Nous commencerons par l’écriture d’un proxy en PHP, par lequel nous passerons pour effectuer nos appels Ajax, et, en seconde partie, nous verrons comment utiliser les fonctionnalités de proxy-ing du serveur Web Apache, pour ne pas avoir à écrire nous-même le proxy.

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Gérer les Erreurs et les Exceptions en JavaScript

Gérer les Erreurs et les Exceptions en JavaScript | Bonnes Pratiques Web | Scoop.it

Voici les 3 principaux patterns a utilisés pour gérer vos erreurs JavaScript dans les navigateurs ou dans Node.js et pour ceux qui ont le temps, un petit topo sur la différence entre Erreur et Exception.

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Styling form controls | 456 Berea Street

Styling form controls | 456 Berea Street | Bonnes Pratiques Web | Scoop.it

 

The short answer is probably disappointing to many: you can't. Some also argue that you shouldn't, since doing so may reduce usability. My opinion on that is that light, sensible styling of some form controls can be OK, as long as you don't overdo it. But what if we don't think about usability, and just want to see what actually can be styled? I've made a few examples that make up a longer answer to the question about styling form controls.

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Semantics in practice and mapping semantic value to its consumers - Paul Irish

Semantics in practice and mapping semantic value to its consumers - Paul Irish | Bonnes Pratiques Web | Scoop.it

Divya Manian kicked off a good bout of discussion of HTML semantics with her post Our pointless pursuit of semantic value. It called into question the amount of time we spend on identifying the Right and Best ways of marking up our content while highlighting details of some of the consumers of semantics like assistive technology (AT). Jeremy Keith responded in Pursing Semantic Value. I wanted to chime in on Jeremy’s post so, I’ve published below my comment from the original post

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Conditional stylesheets vs CSS hacks? Answer: Neither! - Paul Irish

Conditional stylesheets vs CSS hacks? Answer: Neither! - Paul Irish | Bonnes Pratiques Web | Scoop.it

There are a few problems with it though:

  • Conditional stylesheets mean 1 or 2 additional HTTP requests to download
  • As they are in the the <head>, the rendering of the page waits until they’re totally loaded.
  • Also - Yahoo’s internal coding best practices do not recommend conditional stylesheets
  • It can separate a single CSS rule into multiple files. I’ve spent a lot of time wondering “Where the eff is that rule coming from!?” when it turned out to be tucked away in a conditional stylesheet.
Mickael Ruau's insight:

Throw it on the html tag

Here is the new recommendation, and the one that’s in use in the HTML5 Boilerplate.

1 2 3 4 5 <!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

Why?

  • This fixes a file blocking issue discovered by Stoyan Stefanov and Markus Leptien.
  • It avoids an empty comment that also fixes the above issue.
  • CMSes like Wordpress and Drupal use the body class more heavily. This makes integrating there a touch simpler
  • It doesn’t validate in html4 but is fine in html5. Deal with it.
  • It plays nicely with a technique to kick off your page-specific javascript based on your markup.
  • It uses the same element as Modernizr (and Dojo). That feels nice.

I left an empty class in there because you’ll probably be putting a no-js in there or something else. If not, delete.

 

(...)

Here is the current iteration that we have in the HTML5 Boilerplate. We actually tried to reduce it down to just a single .oldIE class for IE ≤8 (to use with safe css hacks), but that didn’t fly. Anyway, our current version..
1 2 3 4 <!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Chrome 70 : petit retour sur les nouveautés apportées aux développeurs, notamment les PWA desktop ou la possibilité de nommer les workers

Chrome 70 : petit retour sur les nouveautés apportées aux développeurs, notamment les PWA desktop ou la possibilité de nommer les workers | Bonnes Pratiques Web | Scoop.it

Les utilisateurs peuvent maintenant installer des PWA sur Windows et Linux !

Mickael Ruau's insight:

Progressive Web Apps (PWA) desktop sur Windows et Linux

Les utilisateurs peuvent maintenant installer des PWA sur Windows et Linux ! Une fois installées, elles sont lancées à partir du menu Démarrer et fonctionnent comme toutes les autres applications installées, c’est-à-dire sans barre d’adresse ni onglets. Les Service Workers s’assurent qu’elles sont rapides et fiables. L’utilisateur aura une expérience qui se rapproche de celle qu’il a avec toute autre application installée.

Pour ceux qui vont s’y mettre, LePage assure que ce n'est pas différent de ce que vous faites déjà aujourd'hui. Tout le travail que vous avez effectué pour votre PWA s'applique toujours ! Si votre application répond aux critères PWA standard, Chrome déclenchera l'événement beforeinstallprompt. Il vous faudra alors enregistrer l'événement, puis ajouter une interface utilisateur (comme un bouton d’installation d’une application) pour indiquer à l’utilisateur que votre application peut être installée. Ensuite, lorsque l'utilisateur clique sur le bouton, appelez prompt () sur l'événement enregistré. Chrome montrera ensuite l'invite à l'utilisateur. S'il clique sur Ajouter, Chrome ajoutera votre PWA à son menu de démarrage et à son bureau.


Pourquoi créer des PWA desktop ?

Le mobile a largement contribué à l'évolution des applications Web progressives. Mais si la croissance du mobile a été si forte, l'utilisation des ordinateurs de bureau continue de croître. Le téléphone portable atteint un pic d’utilisation le matin et le soir et la tablette est également beaucoup plus utilisée le soir. L'utilisation d’un poste de travail est mieux répartie tout au long de la journée que celle du mobile. Il a une utilisation significative pendant la journée lorsque la plupart des gens sont au travail et à leur bureau.

Avoir cette « configuration » native est important pour les utilisateurs, cela leur donne la certitude que l’application sera rapide, intégrée, fiable et attrayante. Les PWA desktop peuvent être lancées à partir du même endroit que les autres applications de bureau, mais elles s'exécutent dans une fenêtre d'applications (elles ont donc l'apparence d'autres applications sur le bureau).

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Intégrer facilement de l'accessibilité dans votre projet front-end

Intégrer facilement de l'accessibilité dans votre projet front-end | Bonnes Pratiques Web | Scoop.it
Nous travaillons assez rarement sur des projets qui doivent être accessibles. Nos clients, comme nous-mêmes ne sommes pas assez sensibilisés à cette
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Introduction WebExtensions

Introduction WebExtensions | Bonnes Pratiques Web | Scoop.it
WebExtensions : modifier le Web ou l’interception des requêtes et du fonctionnement des pages Web grâce à XSLT et JavaScript
Mickael Ruau's insight:

L'auteur rejette par avance tous les problèmes de sécurité ou de stabilité, ou de contournement des CGU, occasionnés par l’utilisation des exemples fournis dans le présent article, qui se veut strictement de sensibilisation et d’apprentissage.

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

« Accessibilité, par où commencer ? » – en conférence au DevFest Nantes avec Nathalie Rolland

« Accessibilité, par où commencer ? » – en conférence au DevFest Nantes avec Nathalie Rolland | Bonnes Pratiques Web | Scoop.it
Le 10 novembre dernier, j'ai fait un bond dans la cour des grands ; ça y est, j'ai donné ma première vraie conférence à un grand évènement. C'était au DevFest Nantes. Quand Nathalie Rolland m'a proposée de réaliser cette conférence sur l'accessibilité web avec elle, je n'ai pas hésité et, pourtant, je savais que ce n'était pas gagné pour moi. Petit point sur le déroulement et présentation de notre conférence.
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Un peu de programmation fonctionnelle en JavaScript ! - dsferruzza

Un peu de programmation fonctionnelle en JavaScript ! - dsferruzza | Bonnes Pratiques Web | Scoop.it

Cet article est une très légère variante de celui que j’ai publié dans 24 jours de web 2014. Je l’ai aussi adapté en présentation.

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

enable cross-origin resource sharing

enable cross-origin resource sharing | Bonnes Pratiques Web | Scoop.it

There are some more headers and settings involved if you want to support verbs other than GET/POST, custom headers, or authentication. You can learn more about these options in the Using CORS tutorial on HTML5 Rocks.

 

If you want the TL;DR version, take a look at the flowchart for implementing CORS support.

If you'd like to learn more about implementing CORS for a specific platform, follow one of the links below:

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Démystifier CORS (Cross-Origin Resource Sharing) : Inovia Blog

Démystifier CORS (Cross-Origin Resource Sharing) : Inovia Blog | Bonnes Pratiques Web | Scoop.it

Depuis des années, les navigateurs restreignent l’accès à des ressources n’appartenant pas au domaine depuis lequel un document a été chargé (règle dite de Same-Origin Policy).
Le fait que la balise script ne soit pas concernée par cette restriction a ouvert la voie à la technique JSONP(JSON with padding), permettant d’émettre des requêtes AJAX cross-domain retournant des données JSON encapsulées dans une fonction de rappel (callback) en JavaScript. Il faut admettre cependant que cette technique, bien qu’encore très utilisée, relève surtout de l’astuce.

CORS est un mécanisme robuste et normalisé par le W3C permettant à tout navigateur compatible d’effectuer des requêtes HTTP cross-domain. Il a valeur de standard industriel et étend le champ des possibilités bien au delà de ce qui est actuellement permis par JSONP.

JSONP est très pratique pour partager des données publiques (comprendre non sensibles).
Néanmoins, cette technique ne supporte pas les méthodes POST, PUT, DELETE (seule la méthode GET est supportée). Elle n’est donc à priori pas adaptée pour exposer une API JSON sauf à mettre en place des solutions de contournement (méthode HTTP transmise via un paramètre de requête, contrôles d’accès, etc.).

more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Accéder à une API cross-domain depuis Javascript avec CORS et un reverse proxy nginx

Cross-Origin Resource Sharing (CORS) est une spécification du W3C permettant les requêtes cross-domain depuis les navigateurs compatibles. Si l’API que vous interrogez est compatible avec CORS, vous pourrez accéder à l’API même si elle n’est pas sur le même domaine que votre application.

CORS est compatible avec :

  • Chrome 3+
  • Firefox 3.5+
  • Opera 12+
  • Safari 4+
  • Internet Explorer 8+

Pour utiliser CORS il faut envoyer au serveur des headers de contrôle d’accès qu’il inspectera pour approuver ou non la requête. Ces headers de contrôle d’accès décriront le contexte de la requête, sa méthode HTTP, son origine, ses headers custom, …

Selon le type de requête, ces headers sont envoyés automatiquement par le navigateur avec la requête ou dans une requête préliminaire (preflight request). La requête aboutira si le serveur répond avec des headers de contrôle d’accès compatibles.

=> OPTIONS https://api.com/foobar - HEADERS - Origin: http://application.com Access-Control-Request-Method: POST Access-Control-Request-Headers: Api-Key <= HTTP/1.1 204 No Content - RESPONSE HEADERS - Access-Control-Allow-Origin: http://application.com Access-Control-Allow-Methods: GET, POST, OPTIONS Access-Control-Max-Age: 86400 Access-Control-Allow-Headers: Api-Key

Pour plus d’informations sur le fonctionnement de CORS, je vous laisse lire les articles Making Cross-Domain Requests with CORS et Démystifier CORS (Cross-Origin Resource Sharing) qui sont très complets

Mickael Ruau's insight:

Reverse Proxy

Malheureusement l’API que je souhaitais utiliser n’était pas compatible CORS. Si c’est votre cas également, il faudra alors passer par un proxy.

Nginx permet simplement de mettre en place ce genre de reverse proxy grace à une configuration de ce type :

server { listen 80; server_name application.com; location /api { # Rewrite /api/resource/action?key=value to /resource/action?key=value RewriteRule ^/api/(.*)$ /$i [L,PT,QSA] # Activer le proxy proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://api.com; proxy_redirect off; proxy_buffers 32 16k; proxy_busy_buffers_size 64k; } }

Ainsi, votre application pourra appeler votre API sur http://application.com/api sans problème de cross-origin.

Si vous avez besoin d’exposer l’API sur un autre domaine ou sur un autre port que votre application, vous aurez besoin de permettre le cross-domain grâce à CORS. Mon application tournant sur localhost:8080, j’ai décidé de mettre mon proxy sur localhost:8181.

server { listen 8181; server_name localhost; location / { # Activer le proxy proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://api.com; proxy_redirect off; proxy_buffers 32 16k; proxy_busy_buffers_size 64k; # Ajouter les headers de contrôle d'accès CORS add_header 'Access-Control-Allow-Origin' '*' always; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always; add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept' always; add_header 'Access-Control-Allow-Credentials' 'true' always; }

Je peux ainsi appeler l’API sur localhost:8181 de façon transparente.

Attention, Access-Control-Allow-Origin: '*' autorise les requêtes cross-origin depuis n'importe quel domaine, en dev cela permet de facilement mettre CORS en place mais dans un soucis de sécurité il faudrait être plus restrictif.
more...
No comment yet.
Scooped by Mickael Ruau
Scoop.it!

Saviez-vous que l’assistance vocale va changer le SEO pour toujours ?

Saviez-vous que l’assistance vocale va changer le SEO pour toujours ? | Bonnes Pratiques Web | Scoop.it
Saviez-vous que l’assistance vocale va changer le SEO pour toujours ? Un ebook proposé par TrustPilot  Le monde du SEO change tellement rapidement, d’année en année, qu’il est presque méconnaissable. Certains crient à la catastrophe et se demandent si le SEO est mort. Bien que cela soit difficile à croire, il existe de nouvelles technologies …
more...
No comment yet.