One place for hosting & domains

      What Is User Experience (And How Can You Use It to Build a Site That Suits Your Audience)?


      What a time to be alive!

      Beginners with no coding experience can now build a website with minimal effort and expense. Even better, the options are limitless: You’ve got an entire arsenal of colors, fonts, images, and buttons at your disposal. But with so many design elements to play with, it can be tempting to go a bit wild.

      “A sprinkle of animation here! A dash of cheetah print there!”

      But, as is often the case with things that glitter, it’s easy to go overboard — especially if your creativity is reducing the functionality of your site.

      Whether you want to sell a product or share some blog posts, you’re not really building the website for you. It’s your site’s visitors that need to be happy with the design and user interface. That’s where User Experience (UX) comes into play. Keeping a strong focus on UX while building your site should pay off in higher conversions and lower bounce rates.

      In this article, I’ll give you a crash course in UX and explain what a UX designer does. Then we’ll go over some tips on recognizing good UX design when you encounter it. Finally, I’ll show you how to use UX to create a better website for your audience. Feel free to jump ahead to the section that’s most beneficial to you!

      Ready to talk UX strategy? Let’s get started!

      An Introduction to User Experience (UX) and Why It Matters

      Simply put, User Experience (UX) is how interacting with technology makes a user feel. UX applies to any technology, from an app to a game console.

      When it comes to websites, UX design is about optimizing the interaction between the human user and the page. A site built with solid UX principles should leave the user feeling like they accomplished what they came to do without frustration.

      That may make you think of going all out with the website’s visual design. That might include flashy animations and gigantic image carousels. If you remember MySpace, you probably still have nightmares about animated glitter and MIDI versions of Blink-182 songs . . . yikes.

      A MySpace profile using lots of bright colors and glitter.

      But UX design has a lot less to do with how a site looks than how it’s used. To be effective, your website should be a complete experience — not just words and images on a page.

      Users will forget data, such as how much they paid for the products they ordered. However, the experience of ordering should be pleasant and effortless. That experience will stay with them, increasing the odds that they’ll buy from you time and again.

      If your site delivers a poor UX, you may see the opposite result. Users who become stressed out or angry when using your site will likely head to one of your competitors’ sites. They have many options and no reason to return to a website that’s difficult to use.

      If you’re still not convinced that UX matters to your website, here are a few key statistics:

      All of this serves to illustrate the importance of good UX design when building a website.

      The Role of the UX Designer

      UX is so vital there’s an entire profession dedicated to optimizing it. A UX designer’s day-to-day tasks will vary based on what kinds of projects they’re tackling. However, the goal is usually the same. The UX designer’s job is to optimize the user’s experience when interacting with digital technology while also keeping in mind the well-being of the business.

      To achieve this balancing act, the UX designer follows a process that results in multiple deliverables.

      Before any actual designing starts, there’s a lot of UX research to do. Therefore, the designer may first create one or more audience personas. This enables the designer to understand the user’s needs.

      Next, the UX designer may present a potential user flow diagram to help explore possible ways that a user may interact with the website. They can then translate that information into a prototype. Prototypes may be as basic as a wireframe, a rough blueprint for what a final web page could look like. The designer may also create a more visually-robust prototype or even one that can be interacted with.

      A basic wireframe for designing a website.
      A basic wireframe.

      The UX designer’s responsibilities don’t end with the final design. Once the site is launched, they may conduct usability testing or look into usage analytics to identify and fix potential problems.

      In other words, they’re involved with all stages of a website’s creation and launch.

      How to Recognize Good UX Design

      If you’re handling your own UX design, it’s your responsibility to advocate for your audience while ensuring that you’re still getting what you want from your site. To do that, the first step is to learn how to recognize robust UX design.

      With that in mind, let’s look at some examples of UX in the wild. There are four key elements you’ll want to pay close attention to.

      1. Navigation

      Poor navigational design can render any website useless. Moving through a site should be smooth and intuitive. The navigation menu should also be accessible no matter what device a visitor is using.

      Breadcrumb navigation is one way designers prevent users from getting lost, especially if a website has many pages.

      H-E-B’s website, using a navigation bar and breadcrumbs.

      It’s also important to pay attention to links. Web designers who employ strong UX make sure you can identify links when you see them. This often means underlining them and using a different text color. They’ll also use meaningful anchor text, so you know where the link is taking you before clicking on it.

      2. Content

      A significant part of successful UX is understanding how people interact with different parts of a website. For example, most people don’t read web page content normally. They scan it and then stop to read if they’ve found something interesting.

      Content is scannable if a user can quickly browse through a blog post or sales page and come away with a clear idea of what it’s communicating.

      Content made scannable using headings, short paragraphs, and a bulleted list.

      Keeping paragraphs short is one way to create scan-friendly content. Those paragraphs should be broken up frequently with headings, lists, and images. Designers may also make use of pull-quotes, bolded text, and similar elements.

      3. Animation

      Animation is an effective way to stand out from a sea of websites and grab a user’s attention. It adds an element of fun and can contribute to creating a memorable experience for the user.

      However, there’s a right and a wrong way to go about implementing it.

      Subtle animation can provide feedback while you wait for a transaction to complete. An animation can also loop endlessly while you struggle to focus on reading a product description. These approaches create two very different experiences. The overuse of animation can also affect UX on mobile devices.

      4. Responsiveness

      Optimizing a website for mobile users is a must. If you’re like most people, you usually use your phone to access the internet. If you come across a site that you have to struggle to use on your device, you’re likely to simply abandon it.

      Beyond choosing a responsive theme, you can take additional steps to ensure that your site works well on all screens. For example, you can run your website through Google’s Mobile-Friendly Test Tool.

      Sample results of Google’s Mobile-Friendly Test Tool.

      This tool will alert you to issues that are keeping your site from being mobile-friendly. You may find that a particular font is too difficult to read on a tiny screen, for instance, or that buttons are too small to tap easily.

      How to Use UX to Design a Site for Your Audience

      Now that you know what good UX is, how do you apply it to your site?

      You probably won’t be doing intensive market research or prototyping with high-fidelity wireframes. Still, putting on your UX designer hat can help you create a site that both you and your audience will love.

      First, it’s important to be clear about why you have a website and what you want it to do. For example, are you:

      Next, get to know your ideal user or potential customer. Creating a user persona will help you imagine how your target audience may interact with your website. This persona can be as simple as who the person is, what they want, and what keeps them from getting it. Crucially, you must identify what the user needs to be successful on your site.

      Remember that accessibility is an integral part of UX. You may have visitors who use assistive technology, so consider making accessibility a priority when building your site.

      You can also check out your competitors’ sites to see what’s working for them. Is the shopping cart icon always in the upper-right corner? Maybe yours should be, too. You can be creative without reinventing the wheel; users shouldn’t have to figure out how your site works to accomplish their goals.

      Sample results from Google’s PageSpeed Insights.

      Finally, website performance matters for UX. Slow pages will cause visitors to leave before the site has a chance to load. There are many ways to speed up your site, although your best bet is to start with quality hosting.

      Building a Better User Experience?

      Partner with DreamHost. We’ll make sure your website is fast, secure, and always up so your visitors trust you. Plans start at $2.59/mo.

      UX Resources

      At this point, you’ve likely figured out that UX design isn’t something you optimize in one shot. There’s a lot more to this field than we can cover in one article.

      UX Matters’ home page, which uses an infographic for navigation.

      Fortunately, there are many quality UX resources you can refer to as you continue to improve your website:

      • Awwwards is where you can find inspiration. Grab some coffee; you’ll probably be scrolling for a while.
      • UXmatters covers just about everything related to design. There’s content for everyone — from the seasoned UX strategist, UX researcher, UI designer, or graphic designer to brand-new UX enthusiasts.
      • UX Magazine publishes the latest news, timely insights, and UX research for anyone interested in improving their visitors’ digital experience.
      • Stack Overflow is the place for all your burning questions. It’s an open community of helpful, knowledgeable people.
      • Website and Digital Marketing Help is a Facebook group powered by DreamHost where website owners of all levels can share best practices and ideas.

      If you combine these resources with research and practice, you should find yourself implementing good user experience practices in no time.

      Design a Great User Experience

      You don’t need to be a professional UX designer to build a website your audience will love interacting with. All it takes is some understanding of what will make life easier for your visitors and a willingness to build a site that provides that experience.

      UX describes what the experience of interacting with your website is like for users. Optimizing your site’s UX means ensuring that it has clear navigation, creating content that’s easy to scan, testing it for responsiveness, and more. There’s a lot to learn, but there are also plenty of useful resources and knowledgeable designers who can help.

      After that, you’ll be ready to conquer the internet with your UX-optimized website! You can check some of the performance-related tasks off your list early with our high-quality shared website hosting plans.



      Source link

      Comment héberger un site web en utilisant Cloudflare et Nginx sur Ubuntu 18.04


      L’auteur a choisi la Electronic Frontier Foundation comme récipiendaire d’un don dans le cadre du programme Write for DOnations.

      Introduction

      Cloudflare est un service qui se situe entre le visiteur et le serveur du propriétaire du site web, agissant comme un proxy inverse pour les sites web. Cloudflare fournit un Réseau de Diffusion de Contenu (CDN), ainsi que des services d’atténuation des DDoS et de serveurs de noms de domaine distribués.

      Nginx est un serveur web populaire qui héberge certains des sites les plus importants et les plus fréquentés d’Internet. Il est courant que des organisations desservent des sites web avec Nginx et utilisent Cloudflare comme fournisseur de CDN et de DNS.

      Dans ce tutoriel, vous allez sécuriser votre site web servi par Nginx avec un certificat Origin CA de Cloudflare et ensuite configurer Nginx pour utiliser des requêtes d’extraction authentifiées. Les avantages de cette configuration sont que vous bénéficiez du CDN et de la résolution DNS rapide de Cloudflare tout en vous assurant que toutes les connexions passent par Cloudflare. Cela empêche toute requête malveillante d’atteindre votre serveur.

      Conditions préalables

      Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

      Étape 1 – Génération d’un certificat Origin CA TLS

      Origin CA de Cloudflare vous permet de générer un certificat TLS gratuit signé par Cloudflare, à installer sur votre serveur Nginx. En utilisant le certificat TLS généré par Cloudflare, vous pouvez sécuriser la connexion entre les serveurs de Cloudflare et votre serveur Nginx.

      Pour générer un certificat avec Origin CA, connectez-vous à votre compte Cloudflare dans un navigateur web. Sélectionnez le domaine que vous souhaitez sécuriser et naviguez jusqu’à la section SSL/TLS de votre tableau de bord Cloudflare. De là, naviguez jusqu’à l’onglet Origin Server (Serveur d’origine) et cliquez sur le bouton Create Certificate (Créer un certificat)  :

      Option de création de certificat dans le tableau de bord de Cloudflare

      Laissez l’option par défaut Let Cloudflare generate a private key and a CSR (Laisser Cloudflare générer une clé privée et une RSE) sélectionnée.

      Options de l'interface graphique d'Origin CA

      Cliquez sur Next (Suivant) et vous verrez un dialogue avec le Origin Certificate (certificat d’origine) et la Private key (clé privée). Vous devez transférer à la fois le certificat d’origine et la clé privée de Cloudflare vers votre serveur. Pour des raisons de sécurité, les informations relatives à la clé privée ne s’afficheront plus. Copiez donc la clé sur votre serveur avant de cliquer sur Ok.

      Boîte de dialogue illustrant le certificat d'origine et la clé privée

      Nous utiliserons le répertoire /etc/ssl sur le serveur pour contenir les fichiers de certificat d’origine et de clé privée. Le dossier existe déjà sur le serveur.

      Tout d’abord, copiez le contenu du certificat d’origine affiché dans la boîte de dialogue de votre navigateur.

      Ensuite, sur votre serveur, ouvrez /etc/ssl/cert.pem dans votre éditeur de texte préféré :

      • sudo nano /etc/ssl/cert.pem

      Ajoutez le contenu du certificat dans le fichier. Ensuite, sauvegardez et quittez l’éditeur.

      Retournez ensuite à votre navigateur et copiez le contenu de la clé privée. Ouvrez le fichier /etc/ssl/key.pem pour le modifier :

      • sudo nano /etc/ssl/key.pem

      Collez la clé privée dans le fichier, enregistrez le fichier et quittez l’éditeur.

      Remarque : parfois, lorsque vous copiez le certificat et la clé à partir du tableau de bord Cloudflare et que vous les collez dans les fichiers correspondants sur le serveur, des lignes vierges sont insérées. Nginx considérera ces certificats et ces clés comme non valides, assurez-vous donc qu’il n’y a pas de lignes blanches dans vos fichiers.

      Attention : le certificat Origin AC de Cloudflare n’est fiable que sur Cloudflare et ne doit donc être utilisé que par les serveurs d’origine qui sont activement connectés à Cloudflare. Si, à un moment donné, vous mettez en pause ou désactivez Cloudflare, votre certificat d’AC d’origine affichera une erreur de certificat non fiable.

      Maintenant que vous avez copié les fichiers de clés et de certificats sur votre serveur, vous devez mettre à jour la configuration de Nginx pour les utiliser.

      Étape 2 – Installation du certificat d’origine AC dans Nginx

      Dans la section précédente, vous avez généré un certificat d’origine et une clé privée en utilisant le tableau de bord de Cloudflare et avez enregistré les fichiers sur votre serveur. Vous allez maintenant mettre à jour la configuration de Nginx pour votre site afin d’utiliser le certificat d’origine et la clé privée pour sécuriser la connexion entre les serveurs de Cloudflare et votre serveur.

      Tout d’abord, assurez-vous que UFW autorisera le trafic HTTPS. Activez Nginx Full, qui ouvrira à la fois le port 80 (HTTP) et le port 443 (HTTPS) :

      • sudo ufw allow 'Nginx Full'

      Relancez maintenant UFW :

      Enfin, vérifiez que vos nouvelles règles sont autorisées et que UFW est actif :

      Vous verrez un résultat similaire à ce qui suit :

      Output

      Status: active To Action From -- ------ ---- OpenSSH ALLOW Anywhere Nginx Full ALLOW Anywhere OpenSSH (v6) ALLOW Anywhere (v6) Nginx Full (v6) ALLOW Anywhere (v6)

      Vous êtes maintenant prêt à ajuster votre bloc serveur Nginx. Nginx crée un bloc serveur par défaut lors de l’installation. Supprimez-le s’il existe encore, car vous avez déjà configuré un bloc de serveur personnalisé pour votre domaine :

      • sudo rm /etc/nginx/sites-enabled/default

      Ensuite, ouvrez le fichier de configuration Nginx pour votre domaine :

      • sudo nano /etc/nginx/sites-available/your_domain

      Le dossier devrait ressembler à ceci :

      /etc/nginx/sites-available/your_domain

      server {
              listen 80;
              listen [::]:80;
      
              root /var/www/your_domain/html;
              index index.html index.htm index.nginx-debian.html;
      
              server_name your_domain www.your_domain;
      
              location / {
                      try_files $uri $uri/ =404;
              }
      }
      
      

      Nous allons modifier le fichier de configuration de Nginx pour faire ce qui suit :

      • Ecoutez sur le port 80 et redirigez toutes les requêtes pour qu’elles utilisent le protocole https.
      • Écoutez sur le port 443 et utilisez le certificat d’origine et la clé privée que vous avez ajoutés dans la section précédente.

      Modifiez le fichier de manière à ce qu’il ressemble à ce qui suit :

      /etc/nginx/sites-available/your_domain

      server {
          listen 80;
          listen [::]:80;
          server_name your_domain www.your_domain;
          return 302 https://$server_name$request_uri;
      }
      
      server {
      
          # SSL configuration
      
          listen 443 ssl http2;
          listen [::]:443 ssl http2;
          ssl        on;
          ssl_certificate         /etc/ssl/cert.pem;
          ssl_certificate_key     /etc/ssl/key.pem;
      
          server_name your_domain www.your_domain;
      
          root /var/www/your_domain/html;
          index index.html index.htm index.nginx-debian.html;
      
      
          location / {
                  try_files $uri $uri/ =404;
          }
      }
      

      Enregistrez le fichier et quittez l’éditeur.

      Ensuite, procédez à un test pour vous assurer qu’il n’y a aucune erreur de syntaxe dans aucun de vos fichiers Nginx :

      Si aucun problème n’a été trouvé, redémarrez Nginx pour permettre vos modifications :

      • sudo systemctl restart nginx

      Allez maintenant dans la section SSL/TLS du tableau de bord Cloudflare, naviguez jusqu’à l’onglet Overview (Vue d’ensemble), et changez le mode de cryptage SSL/TLS en mode Full (strict). Ceci informe Cloudflare de toujours crypter la connexion entre Cloudflare et votre serveur Nginx d’origine.

      Activez le mode SSL Full(strict) dans le tableau de bord de Cloudflare

      Visitez maintenant votre site web à l’adresse https://your_domain pour vérifier qu’il est correctement configuré. Vous verrez votre page d’accueil s’afficher et le navigateur vous indiquera que le site est sécurisé.

      Dans la section suivante, vous allez mettre en place des Authenticated Origin Pulls (Extractions à l’Origine Authentifiée) pour vérifier que votre serveur d’origine parle bien à Cloudflare et non à un autre serveur. Ce faisant, Nginx sera configuré pour n’accepter que les requêtes qui utilisent un certificat client valide de Cloudflare ; toutes les requêtes qui ne sont pas passées par Cloudflare seront abandonnées.

      Le certificat Origin CA aidera Cloudflare à vérifier qu’il parle au bon serveur d’origine. Cette étape utilisera l’authentification du client TLS pour vérifier que votre serveur Nginx d’origine parle à Cloudflare.

      Dans le cadre d’un handshake TLS authentifié par le client, les deux parties fournissent un certificat à vérifier. Le serveur d’origine est configuré pour n’accepter que les requêtes qui utilisent un certificat client Cloudflare valide. Les requêtes qui ne sont pas passées par Cloudflare seront abandonnées car elles n’auront pas le certificat de Cloudflare. Cela signifie que les pirates ne peuvent pas contourner les mesures de sécurité de Cloudflare, ni se connecter directement à votre serveur Nginx.

      Cloudflare présente des certificats signés par une AC avec le certificat suivant :

      -----BEGIN CERTIFICATE-----
      MIIGCjCCA/KgAwIBAgIIV5G6lVbCLmEwDQYJKoZIhvcNAQENBQAwgZAxCzAJBgNV
      BAYTAlVTMRkwFwYDVQQKExBDbG91ZEZsYXJlLCBJbmMuMRQwEgYDVQQLEwtPcmln
      aW4gUHVsbDEWMBQGA1UEBxMNU2FuIEZyYW5jaXNjbzETMBEGA1UECBMKQ2FsaWZv
      cm5pYTEjMCEGA1UEAxMab3JpZ2luLXB1bGwuY2xvdWRmbGFyZS5uZXQwHhcNMTkx
      MDEwMTg0NTAwWhcNMjkxMTAxMTcwMDAwWjCBkDELMAkGA1UEBhMCVVMxGTAXBgNV
      BAoTEENsb3VkRmxhcmUsIEluYy4xFDASBgNVBAsTC09yaWdpbiBQdWxsMRYwFAYD
      VQQHEw1TYW4gRnJhbmNpc2NvMRMwEQYDVQQIEwpDYWxpZm9ybmlhMSMwIQYDVQQD
      ExpvcmlnaW4tcHVsbC5jbG91ZGZsYXJlLm5ldDCCAiIwDQYJKoZIhvcNAQEBBQAD
      ggIPADCCAgoCggIBAN2y2zojYfl0bKfhp0AJBFeV+jQqbCw3sHmvEPwLmqDLqynI
      42tZXR5y914ZB9ZrwbL/K5O46exd/LujJnV2b3dzcx5rtiQzso0xzljqbnbQT20e
      ihx/WrF4OkZKydZzsdaJsWAPuplDH5P7J82q3re88jQdgE5hqjqFZ3clCG7lxoBw
      hLaazm3NJJlUfzdk97ouRvnFGAuXd5cQVx8jYOOeU60sWqmMe4QHdOvpqB91bJoY
      QSKVFjUgHeTpN8tNpKJfb9LIn3pun3bC9NKNHtRKMNX3Kl/sAPq7q/AlndvA2Kw3
      Dkum2mHQUGdzVHqcOgea9BGjLK2h7SuX93zTWL02u799dr6Xkrad/WShHchfjjRn
      aL35niJUDr02YJtPgxWObsrfOU63B8juLUphW/4BOjjJyAG5l9j1//aUGEi/sEe5
      lqVv0P78QrxoxR+MMXiJwQab5FB8TG/ac6mRHgF9CmkX90uaRh+OC07XjTdfSKGR
      PpM9hB2ZhLol/nf8qmoLdoD5HvODZuKu2+muKeVHXgw2/A6wM7OwrinxZiyBk5Hh
      CvaADH7PZpU6z/zv5NU5HSvXiKtCzFuDu4/Zfi34RfHXeCUfHAb4KfNRXJwMsxUa
      +4ZpSAX2G6RnGU5meuXpU5/V+DQJp/e69XyyY6RXDoMywaEFlIlXBqjRRA2pAgMB
      AAGjZjBkMA4GA1UdDwEB/wQEAwIBBjASBgNVHRMBAf8ECDAGAQH/AgECMB0GA1Ud
      DgQWBBRDWUsraYuA4REzalfNVzjann3F6zAfBgNVHSMEGDAWgBRDWUsraYuA4REz
      alfNVzjann3F6zANBgkqhkiG9w0BAQ0FAAOCAgEAkQ+T9nqcSlAuW/90DeYmQOW1
      QhqOor5psBEGvxbNGV2hdLJY8h6QUq48BCevcMChg/L1CkznBNI40i3/6heDn3IS
      zVEwXKf34pPFCACWVMZxbQjkNRTiH8iRur9EsaNQ5oXCPJkhwg2+IFyoPAAYURoX
      VcI9SCDUa45clmYHJ/XYwV1icGVI8/9b2JUqklnOTa5tugwIUi5sTfipNcJXHhgz
      6BKYDl0/UP0lLKbsUETXeTGDiDpxZYIgbcFrRDDkHC6BSvdWVEiH5b9mH2BON60z
      0O0j8EEKTwi9jnafVtZQXP/D8yoVowdFDjXcKkOPF/1gIh9qrFR6GdoPVgB3SkLc
      5ulBqZaCHm563jsvWb/kXJnlFxW+1bsO9BDD6DweBcGdNurgmH625wBXksSdD7y/
      fakk8DagjbjKShYlPEFOAqEcliwjF45eabL0t27MJV61O/jHzHL3dknXeE4BDa2j
      bA+JbyJeUMtU7KMsxvx82RmhqBEJJDBCJ3scVptvhDMRrtqDBW5JShxoAOcpFQGm
      iYWicn46nPDjgTU0bX1ZPpTpryXbvciVL5RkVBuyX2ntcOLDPlZWgxZCBp96x07F
      AnOzKgZk4RzZPNAxCXERVxajn/FLcOhglVAKo5H0ac+AitlQ0ip55D2/mf8o72tM
      fVQ6VpyjEXdiIXWUq/o=
      -----END CERTIFICATE-----
      

      Vous pouvez également télécharger le certificat directement à partir de Cloudflare ici.

      Copiez ce certificat.

      Puis, créez le fichier /etc/ssl/cloudflare.crt pour y placer le certificat de Cloudflare  :

      • sudo nano /etc/ssl/cloudflare.crt

      Ajoutez le certificat au fichier. Ensuite, enregistrez le fichier et quittez l’éditeur.

      Mettez maintenant à jour votre configuration Nginx pour utiliser les Extractions d’Origine Authentifiée TLS. Ouvrez le fichier de configuration de votre domaine :

      • sudo nano /etc/nginx/sites-available/your_domain

      Ajoutez les directives ssl_client_certificate et ssl_verify_client, comme indiqué dans l’exemple suivant :

      /etc/nginx/sites-available/your_domain

      . . .
      
      server {
      
          # SSL configuration
      
          listen 443 ssl http2;
          listen [::]:443 ssl http2;
          ssl        on;
          ssl_certificate         /etc/ssl/cert.pem;
          ssl_certificate_key     /etc/ssl/key.pem;
          ssl_client_certificate /etc/ssl/cloudflare.crt;
          ssl_verify_client on;
      
          . . .
      

      Enregistrez le fichier et quittez l’éditeur.

      Ensuite, testez Nginx pour vous assurer qu’il n’y a pas d’erreurs de syntaxe dans votre configuration Nginx :

      Si aucun problème n’a été trouvé, redémarrez Nginx pour permettre vos modifications :

      • sudo systemctl restart nginx

      Enfin, pour activer les Extractions Authentifiées, ouvrez la section SSL/TLS dans le tableau de bord Cloudflare, naviguez jusqu’à l’onglet Origin Server (Serveur d’Origine) et cochez l’option Authenticated Origin Pulls.

      Activez les Extractions d'Origine Authentifiée

      Visitez maintenant votre site web à l’adresse https://your_domain pour vérifier qu’il est correctement configuré. Comme auparavant, vous verrez s’afficher votre page d’accueil.

      Pour vérifier que votre serveur n’accepte que les demandes signées par l’AC de Cloudflare, basculez l’option Authenticated Origin Pulls pour la désactiver, puis rechargez votre site web. Le message d’erreur suivant devrait apparaître :

      Message d'erreur

      Votre serveur d’origine génère une erreur si une requête n’est pas signée par l’AC de Cloudflare.

      Remarque : la plupart des navigateurs mettent les requêtes en cache. Pour voir le changement ci-dessus, vous pouvez donc utiliser le mode de navigation Incognito/Privé dans votre navigateur. Pour éviter que Cloudflare ne mette les requêtes en cache pendant que vous configurez votre site web, naviguez jusqu’à l’aperçu dans le tableau de bord Cloudflare et basculez en Development Mode (Mode Développement).

      Maintenant que vous savez qu’il fonctionne correctement, retournez à la section SSL/TLS du tableau de bord Cloudflare, naviguez jusqu’à l’onglet Origin Server (Serveur d’origine) et activez à nouveau l’option Authenticated Origin Pulls pour l’activer.

      Conclusion

      Dans ce tutoriel, vous avez sécurisé votre site web alimenté par Nginx en cryptant le trafic entre Cloudflare et le serveur Nginx à l’aide d’un certificat Origin CA de Cloudflare. Vous avez ensuite configuré des Authenticated Origin Pulls (Extractions d’Origine Authentifiée) sur le serveur Nginx pour vous assurer qu’il n’accepte que les requêtes des serveurs Cloudflare, empêchant ainsi toute autre personne de se connecter directement au serveur Nginx.



      Source link

      Como hospedar um site usando o Cloudflare e o Nginx no Ubuntu 18.04


      O autor selecionou a Electronic Frontier Foundation para receber uma doação como parte do programa Write for DOnations.

      Introdução

      O Cloudflare é um serviço que fica entre o visitante e o servidor do proprietário do site, atuando como um proxy reverso para sites. O Cloudflare fornece uma rede de entrega de conteúdo (CDN), bem como serviços de mitigação de DDoS e serviços de servidor de nomes de domínio distribuídos.

      O Nginx é um servidor Web popular responsável por hospedar alguns dos maiores e mais acessados sites na internet. É comum as organizações hospedarem sites com o Nginx e utilizarem o Cloudflare como provedor de CDN e DNS.

      Neste tutorial, você irá proteger seu site apresentado pelo Nginx com um certificado de CA de origem da Cloudflare e então configurar o Nginx para usar solicitações pull autenticadas. As vantagens do uso desta configuração é que você se beneficia da CDN do Cloudflare e da resolução rápida de DNS ao mesmo tempo em que garante que todas as conexões passem pelo Cloudflare. Isso impede que quaisquer requisições maliciosas atinjam seu servidor.

      Pré-requisitos

      Para completar este tutorial, você precisará do seguinte:

      Passo 1 — Gerando um certificado TLS de CA de origem

      O CA de origem da Cloudflare permite gerar um certificado TLS gratuito assinado pela Cloudflare para instalar em seu servidor Nginx. Ao usar o certificado TLS gerado pelo Cloudflare você pode proteger a conexão entre os servidores do Cloudflare e seu servidor Nginx.

      Para gerar um certificado de CA de origem, faça login em sua conta Clouflare em um navegador Web. Selecione o domínio que você deseja proteger e navegue até a seção SSL/TLS do seu painel do Cloudflare. De lá, navegue até a guia Origin Server e clique no botão Create Certificate:

      Create certificate option in the Cloudflare dashboard

      Deixe a opção padrão Let Cloudflare generate a private key and a CSR selecionada.

      Origin CA GUI options

      Clique em Next e você verá uma caixa de diálogo com o Origin Certificate e Private key. Você precisa transferir tanto o certificado de origem quanto a chave privada do Cloudflare para seu servidor. Por questões de segurança, as informações de Private Key não serão exibidas novamente, então copie a chave para seu servidor antes de clicar em Ok.

      Dialog showing the origin certificate and private key

      Usaremos o diretório /etc/ssl no servidor para manter o certificado de origem e os arquivos da chave privada. A pasta já existe no servidor.

      Primeiro, copie o conteúdo de Origin Certificate exibido na caixa de diálogo em seu navegador.

      Então, em seu servidor, abra /etc/ssl/cert.pem em seu editor de texto preferido:

      • sudo nano /etc/ssl/cert.pem

      Adicione o conteúdo do certificado ao arquivo. Depois, salve e saia do editor.

      Em seguida, retorne ao seu navegador e copie o conteúdo de Private Key. Abra o arquivo /etc/ssl/key.pem para edição:

      • sudo nano /etc/ssl/key.pem

      Cole a chave privada no arquivo, salve o arquivo e saia do editor.

      Nota: às vezes, quando você copia o certificado e a chave do painel Cloudflare e o cola nos arquivos relevantes no servidor, linhas em branco são inseridas. O Nginx irá tratar esses certificados e chaves como inválidos, então certifique-se de que não haja linhas em branco em seus arquivos.

      Atenção: o certificado de CA de origem do Cloudflare só é reconhecido pelo Cloudflare e, portanto, só deve ser usado por servidores de origem que estejam ativamente conectados ao Cloudflare. Se em qualquer momento você pausar ou desativar o Cloudflare, seu certificado de CA de origem irá disparar um erro de certificado não confiável.

      Agora que você copiou os arquivos de chave e de certificado para seu servidor, você precisa atualizar a configuração do Nginx para usá-los.

      Passo 2 — Instalando o certificado de CA de origem no Nginx

      Na seção anterior, você gerou um certificado de origem e uma chave privada usando o painel do Cloudlfare e salvou os arquivos em seu servidor. Agora, você irá atualizar a configuração do Nginx para que seu site use o certificado de origem e a chave privada para proteger a conexão entre os servidores do Cloudflare e seu servidor.

      Primeiro, certifique-se de que o UFW permitirá o tráfego HTTPS. Habilite o perfil Nginx Full, que abrirá tanto a porta 80 (HTTP) quanto a porta 443 (HTTPS):

      • sudo ufw allow 'Nginx Full'

      Agora, recarregue o UFW:

      Por fim, verifique se suas novas regras estão permitidas e se o UFW está ativo:

      Você verá uma saída como esta:

      Output

      Status: active To Action From -- ------ ---- OpenSSH ALLOW Anywhere Nginx Full ALLOW Anywhere OpenSSH (v6) ALLOW Anywhere (v6) Nginx Full (v6) ALLOW Anywhere (v6)

      Agora, você está pronto para ajustar seu bloco de servidor Nginx. O Nginx cria um bloco de servidor padrão durante a instalação. Remova-o se ele ainda existir, já que você já configurou um bloco de servidor personalizado para seu domínio:

      • sudo rm /etc/nginx/sites-enabled/default

      Em seguida, abra o arquivo de configuração Nginx para seu domínio:

      • sudo nano /etc/nginx/sites-available/your_domain

      O arquivo deve ficar assim:

      /etc/nginx/sites-available/your_domain

      server {
              listen 80;
              listen [::]:80;
      
              root /var/www/your_domain/html;
              index index.html index.htm index.nginx-debian.html;
      
              server_name your_domain www.your_domain;
      
              location / {
                      try_files $uri $uri/ =404;
              }
      }
      
      

      Vamos modificar o arquivo de configuração do Nginx para fazer o seguinte:

      • Ouvir na porta 80 e redirecionar todas as requisições para usar o https.
      • Ouvir na porta 443 e usar o certificado de origem e a chave privada que você adicionou na seção anterior.

      Modifique o arquivo para que fique da seguinte forma:

      /etc/nginx/sites-available/your_domain

      server {
          listen 80;
          listen [::]:80;
          server_name your_domain www.your_domain;
          return 302 https://$server_name$request_uri;
      }
      
      server {
      
          # SSL configuration
      
          listen 443 ssl http2;
          listen [::]:443 ssl http2;
          ssl        on;
          ssl_certificate         /etc/ssl/cert.pem;
          ssl_certificate_key     /etc/ssl/key.pem;
      
          server_name your_domain www.your_domain;
      
          root /var/www/your_domain/html;
          index index.html index.htm index.nginx-debian.html;
      
      
          location / {
                  try_files $uri $uri/ =404;
          }
      }
      

      Salve o arquivo e saia do editor.

      Em seguida, teste para garantir que não haja erros de sintaxe em qualquer um dos seus arquivos do Nginx:

      Se nenhum problema for encontrado, reinicie o Nginx para habilitar suas alterações:

      • sudo systemctl restart nginx

      Agora, vá até a seção SSL/TLS do painel do Cloudflare, navegue até a guia Overview e mude SSL/TLS encryption mode para Full (strict). Isso informa ao Cloudflare para sempre criptografar a conexão entre o Cloudflare e seu servidor Nginx de origem.

      Enable Full(strict) SSL mode in the Cloudflare Dashboard

      Agora, visite seu site em https://your_domain para verificar se ele está configurado corretamente. Você verá sua página inicial exibida, e o navegador irá informar que o site é seguro.

      Na próxima seção, você irá configurar o Authenticated Origin Pulls para verificar se seu servidor de origem está realmente falando com o Cloudflare e não com algum outro servidor. Ao fazer isso, o Nginx será configurado para aceitar somente requisições que usem um certificado cliente válido da Cloudflare; todas as requisições que não passaram pelo Cloudflare serão descartadas.

      Passo 3 — Configurando o Authenticated Origin Pulls

      O certificado de CA de origem irá ajudar o Cloudflare a verificar se ele está falando com o servidor de origem correto. Este passo irá usar o cliente de autenticação TLS para verificar se seu servidor Nginx de origem está falando com o Cloudflare.

      Em um handshake TLS autenticado no cliente, ambos os lados fornecem um certificado a ser verificado. O servidor de origem está configurado para aceitar somente requisições que usam um certificado de cliente válido do Cloudflare. As requisições que não passaram pelo Cloudflare serão descartadas, pois elas não terão o certificado do Cloudflare. Isso significa que os atacantes não podem contornar as medidas de segurança do Cloudflare e se conectar diretamente ao seu servidor Nginx.

      O Cloudflare apresenta certificados assinados por uma CA com o seguinte certificado:

      -----BEGIN CERTIFICATE-----
      MIIGCjCCA/KgAwIBAgIIV5G6lVbCLmEwDQYJKoZIhvcNAQENBQAwgZAxCzAJBgNV
      BAYTAlVTMRkwFwYDVQQKExBDbG91ZEZsYXJlLCBJbmMuMRQwEgYDVQQLEwtPcmln
      aW4gUHVsbDEWMBQGA1UEBxMNU2FuIEZyYW5jaXNjbzETMBEGA1UECBMKQ2FsaWZv
      cm5pYTEjMCEGA1UEAxMab3JpZ2luLXB1bGwuY2xvdWRmbGFyZS5uZXQwHhcNMTkx
      MDEwMTg0NTAwWhcNMjkxMTAxMTcwMDAwWjCBkDELMAkGA1UEBhMCVVMxGTAXBgNV
      BAoTEENsb3VkRmxhcmUsIEluYy4xFDASBgNVBAsTC09yaWdpbiBQdWxsMRYwFAYD
      VQQHEw1TYW4gRnJhbmNpc2NvMRMwEQYDVQQIEwpDYWxpZm9ybmlhMSMwIQYDVQQD
      ExpvcmlnaW4tcHVsbC5jbG91ZGZsYXJlLm5ldDCCAiIwDQYJKoZIhvcNAQEBBQAD
      ggIPADCCAgoCggIBAN2y2zojYfl0bKfhp0AJBFeV+jQqbCw3sHmvEPwLmqDLqynI
      42tZXR5y914ZB9ZrwbL/K5O46exd/LujJnV2b3dzcx5rtiQzso0xzljqbnbQT20e
      ihx/WrF4OkZKydZzsdaJsWAPuplDH5P7J82q3re88jQdgE5hqjqFZ3clCG7lxoBw
      hLaazm3NJJlUfzdk97ouRvnFGAuXd5cQVx8jYOOeU60sWqmMe4QHdOvpqB91bJoY
      QSKVFjUgHeTpN8tNpKJfb9LIn3pun3bC9NKNHtRKMNX3Kl/sAPq7q/AlndvA2Kw3
      Dkum2mHQUGdzVHqcOgea9BGjLK2h7SuX93zTWL02u799dr6Xkrad/WShHchfjjRn
      aL35niJUDr02YJtPgxWObsrfOU63B8juLUphW/4BOjjJyAG5l9j1//aUGEi/sEe5
      lqVv0P78QrxoxR+MMXiJwQab5FB8TG/ac6mRHgF9CmkX90uaRh+OC07XjTdfSKGR
      PpM9hB2ZhLol/nf8qmoLdoD5HvODZuKu2+muKeVHXgw2/A6wM7OwrinxZiyBk5Hh
      CvaADH7PZpU6z/zv5NU5HSvXiKtCzFuDu4/Zfi34RfHXeCUfHAb4KfNRXJwMsxUa
      +4ZpSAX2G6RnGU5meuXpU5/V+DQJp/e69XyyY6RXDoMywaEFlIlXBqjRRA2pAgMB
      AAGjZjBkMA4GA1UdDwEB/wQEAwIBBjASBgNVHRMBAf8ECDAGAQH/AgECMB0GA1Ud
      DgQWBBRDWUsraYuA4REzalfNVzjann3F6zAfBgNVHSMEGDAWgBRDWUsraYuA4REz
      alfNVzjann3F6zANBgkqhkiG9w0BAQ0FAAOCAgEAkQ+T9nqcSlAuW/90DeYmQOW1
      QhqOor5psBEGvxbNGV2hdLJY8h6QUq48BCevcMChg/L1CkznBNI40i3/6heDn3IS
      zVEwXKf34pPFCACWVMZxbQjkNRTiH8iRur9EsaNQ5oXCPJkhwg2+IFyoPAAYURoX
      VcI9SCDUa45clmYHJ/XYwV1icGVI8/9b2JUqklnOTa5tugwIUi5sTfipNcJXHhgz
      6BKYDl0/UP0lLKbsUETXeTGDiDpxZYIgbcFrRDDkHC6BSvdWVEiH5b9mH2BON60z
      0O0j8EEKTwi9jnafVtZQXP/D8yoVowdFDjXcKkOPF/1gIh9qrFR6GdoPVgB3SkLc
      5ulBqZaCHm563jsvWb/kXJnlFxW+1bsO9BDD6DweBcGdNurgmH625wBXksSdD7y/
      fakk8DagjbjKShYlPEFOAqEcliwjF45eabL0t27MJV61O/jHzHL3dknXeE4BDa2j
      bA+JbyJeUMtU7KMsxvx82RmhqBEJJDBCJ3scVptvhDMRrtqDBW5JShxoAOcpFQGm
      iYWicn46nPDjgTU0bX1ZPpTpryXbvciVL5RkVBuyX2ntcOLDPlZWgxZCBp96x07F
      AnOzKgZk4RzZPNAxCXERVxajn/FLcOhglVAKo5H0ac+AitlQ0ip55D2/mf8o72tM
      fVQ6VpyjEXdiIXWUq/o=
      -----END CERTIFICATE-----
      

      Você também pode baixar o certificado diretamente do Cloudflare aqui.

      Copie este certificado.

      Em seguida, crie o arquivo /etc/ssl/cloudflare.crt para armazenar o certificado do Cloudflare:

      • sudo nano /etc/ssl/cloudflare.crt

      Adicione o certificado ao arquivo. Então, salve o arquivo e saia do editor.

      Agora, atualize sua configuração do Nginx para usar o TLS Authenticated Origin Pulls. Abra o arquivo de configuração para seu domínio:

      • sudo nano /etc/nginx/sites-available/your_domain

      Adicione as diretivas ssl_client_certificate e ssl_verify_client como mostrado no seguinte exemplo:

      /etc/nginx/sites-available/your_domain

      . . .
      
      server {
      
          # SSL configuration
      
          listen 443 ssl http2;
          listen [::]:443 ssl http2;
          ssl        on;
          ssl_certificate         /etc/ssl/cert.pem;
          ssl_certificate_key     /etc/ssl/key.pem;
          ssl_client_certificate /etc/ssl/cloudflare.crt;
          ssl_verify_client on;
      
          . . .
      

      Salve o arquivo e saia do editor.

      Em seguida, teste para garantir que não haja erros de sintaxe em sua configuração do Nginx:

      Se nenhum problema for encontrado, reinicie o Nginx para habilitar suas alterações:

      • sudo systemctl restart nginx

      Por fim, para habilitar o Authenticated Pulls, abra a seção SSL/TLS no painel do Cloudflare, navegue até a guia Origin Server e alterne a opção Authenticated Origin Pulls.

      Enable Authenticated Origin Pulls

      Agora, visite seu site em https://your_domain para verificar se ele está configurado corretamente. Como antes, você verá sua página inicial exibida.

      Para verificar se seu servidor irá aceitar apenas requisições assinadas pela CA do Cloudflare, alterne a opção Authenticated Origin Pulls para desativá-la e então recarregue seu site. Você deve obter a seguinte mensagem de erro:

      Error message

      Seu servidor de origem gera um erro se uma requisição não for assinada pela CA do Cloudflare.

      Nota: a maioria dos navegadores irá fazer cache das requisições, então para ver a alteração acima que você pode usar o modo de navegação anônimo/privado em seu navegador. Para evitar que o Cloudflare faça cache das requisições enquanto você configura seu site, navegue até Overview no painel do Cloudflare e alterne o Development Mode.

      Agora que você sabe que ele funciona corretamente, retorne à seção SSL/TLS no painel do Cloudflare, navegue até a guia Origin Server e alterne a opção Authenticated Origin Pulls de novo para habilitá-la.

      Conclusão

      Neste tutorial, você protegeu seu site hospedado em Nginx criptografando o tráfego entre o Cloudflare e o servidor Nginx usando um certificado de CA de origem do Cloudflare. Em seguida, você configurou o Authenticated Origin Pulls no servidor Nginx para garantir que ele somente aceita requisições dos servidores do Cloudflare, impedindo qualquer um que se conecte diretamente ao servidor Nginx.



      Source link