One place for hosting & domains

      blog

      How to Install WooCommerce on Your WordPress Website


      If you’re planning on using WordPress to create an online store, you’ll strongly want to consider installing WooCommerce. This plugin has become the de facto e-commerce solution for WordPress sites, thanks to its flexibility and a wide variety of customization options. However, given its wealth of features, it can be daunting to get started.

      Fortunately, WooCommerce is very easy to set up. Any e-commerce newbie can download, install, and configure the plugin to create a functional online store in no time. Even smaller tasks, like managing your products and configuring costs, are easy to handle.

      Getting Started With WooCommerce

      WooCommerce

      According to BuiltWith, WooCommerce powers 26% of all e-commerce sites. This makes it the most popular e-commerce solution in the world, and it’s not hard to see why. All you need is a WordPress site and the WooCommerce plugin to create a fully-functional, secure, and visually appealing store.

      What’s more, WooCommerce offers a lot of customization opportunities and scalability. The basic, free plugin will be enough for most online stores.

      WooCommerce also provides plenty of options to grow, scale, and expand your business as it becomes more successful. There are WooCommerce extensions, which add new functionality to your store, as well as dedicated themes like Storefront that help you perfect its appearance.

       

      With all of this in mind, it’s easy to see why you should consider WooCommerce when creating your online store in WordPress. It’s an excellent choice for beginners and experienced professionals alike. Now, let’s take a closer look at how the plugin works in practice.

      How to Install and Set Up WooCommerce (In 5 Steps)

      Creating and configuring your WooCommerce store is a pretty simple process. However, before you get started, it’s important to take a look at the recommended server requirements for WooCommerce:

      If your server does not meet these recommended minimums, your store will struggle, and it might not even work at all. One solution is to take advantage of our WooCommerce hosting plan:

      DreamHost WooCommerce hosting

      This plan comes with WooCommerce pre-installed, as well as several additional plugins and themes to make your store even better. Plus, essential considerations such as security, performance, and updates will be handled for you.

      Once you have your website and hosting plan ready, it’s time to create your WooCommerce store!

      Step 1: Install and Activate the WooCommerce Plugin

      WooCommerce WordPress plugin

      This first step is the most basic one. Simply install and activate WooCommerce just as you would any other plugin. As soon as you activate it, you will be presented with the WooCommerce setup wizard. This will help you configure your store, and we’ll look more closely at it in a moment.

      First, let’s see how activating WooCommerce has affected your site. Once WooCommerce is installed, you’ll find a number of new features, including:

      • Two new user roles: Customer and Shop Manager.
      • Widgets to help you display products in various ways.
      • Custom post types, taxonomies, and menu items.
      • Several shortcodes for inserting content into posts and pages.

      It’s worth noting that WooCommerce works a little differently on a WordPress Multisite install. Each site will share a database but store information in separate data tables. This setup makes each store its own separate entity. You will not be able to share information between the stores, such as user accounts, products, or checkout information. However, you can share extensions and themes across multiple WooCommerce sites.

      If you’re using a single WordPress site, you don’t need to worry about any of that.

      Now, it’s time to start configuring your store using the wizard we mentioned earlier.

      Get Content Delivered Straight to Your Inbox

      Subscribe to our blog and receive great content just like this delivered straight to your inbox.

      Step 2: Add Your Store’s Basic Information

      The first thing you’ll see after activating the WooCommerce plugin is the setup wizard. This will help you set up your site in a few simple steps. It’s worth noting that any settings you configure here can easily be changed later.

      The first page of the wizard contains general information about your store. You’ll be required to enter your store’s location, for instance. If your business does not have a physical location but is entirely based online, you will still need to select your country:

      WooCommerce store setup wizard

      You’ll then need to choose the currency you want to use. Your store can only use one currency at a time, but if you want to display prices in various currencies, you can use a plugin like Currency Converter Widget.

      The last option asks what type of products you plan on selling: physical, digital, or both. There are more specific product types (which we’ll look at later), but for now, you can select the option that best suits your needs. The final option is a checkbox that you should only tick if you’re also planning on selling items in person.

      When you’ve entered all the required information, click on Let’s go! to proceed to the next step.

      Step 3: Set Up Your Payment Options

      The next phase of the wizard lets you enter the payment options for your store. Here you can choose which payment methods you want to accept:

      WooCommerce payment configuration options

      The choices you’ll see will differ slightly depending on your specified location and the options you selected on the previous page:

      • PayPal and Stripe are always available.
      • Square is available if you selected the option to sell items in person and if your store is located in the U.S., the U.K., Canada, Australia, or Japan.
      • Klarna is also available if your store is in the U.K., Norway, Finland, Sweden, Denmark, Austria, Germany, or the Netherlands.

      Select the options you want to use, and WooCommerce will install the necessary extensions. You can always remove and add payment methods later.

      The final option in this section asks if you want to accept offline payments. If you select this, a panel will appear with more detailed options, letting you choose all payment types you’re willing to use:

      configuring accepted payment methods in WooCommerce

      When you have picked all the payment options you’ll need, click on Continue to proceed to the next page of the wizard.

      Step 4: Configure Your Shipping Settings

      It’s now time to configure your shipping settings. As with the last step, the options here will differ depending on your location. Stores in the U.S. and Canada will see settings relating to USPS and Canada Post, respectively:

      WooCommerce shipping settings

      If you want to use these services, we recommend taking a look at their specific settings to help you settle on appropriate rates.

      Stores located elsewhere will instead only see the options for specifying the weight and dimension units you want to use in your store. Simply choose the correct units, then select Continue to progress.

      Step 5: Complete the Installation Process

      The final steps of the wizard offer some additional options to help you get your store off the ground. The Extras section contains two choices:

      WooCommerce extras settings screen

      The first one asks if you want to install the Storefront theme. This is the official WooCommerce theme, which is highly recommended, as it’s built specifically to support sites powered by WooCommerce.

      You can also choose if you want WooCommerce to calculate tax rates for you automatically. This may be a better option than manually entering tax rates, depending on your location and business. We suggest that you consult with a professional about how your business should handle taxes.

      When you select Continue, you’ll come to the final step. Here you can connect your store to Jetpack, a useful plugin that will activate several additional services (such as live rates and automatic taxes):

      connect WooCommerce to Jetpack

      Click on Connect with Jetpack or Skip this step to complete your installation. Your store is now ready to go! If you want to configure it even further, we recommend checking out the official documentation to see all the available options.

      Adding Your First Product in WooCommerce

      With your store up and running, it’s time to create something to sell. There are plenty of product types you can use, but for this example, we’ll create a “simple” product. This is the most basic and common product type, meant to be used for physical products that will be shipped and require no additional options.

      To create a product, go to WooCommerce > Products > Add New. This opens the Add new product interface, which should look familiar if you’re used to creating blog posts in WordPress:

      adding a new product in WooCommerce

      Start by giving your product a title and description. You can also assign it to one or more product categories to keep everything organized.

      To configure your product’s settings, you can use the Product Data meta box. You’ll spend most of your time here when managing products, as it covers the most essential information:

      WooCommerce product data

      The first option is the product type, so leave this as Simple product. Then, state whether the product is Virtual or Downloadable. The rest of this section consists of several panels with additional options:

      • General is where you can set the product’s Stock Keep Unit (SKU) and price.
      • Inventory can be used to manage the product’s stock levels.
      • Shipping lets you specify the product’s weight and dimensions.
      • Linked Products can be used to cross-promote similar products or to create product groups.
      • Attributes let you assign attributes to the product, which is a way to connect items with similar characteristics.
      • Advanced contains advanced options, such as the ability to set up orders for the product and create a purchase note.

      These are the basics for creating a product, but there’s plenty more you can do. For instance, you can add product images, create variable products, and learn more about the different product types.

      Feel free to experiment with the editor, and refer to the official documentation whenever you need help. It won’t be long until your online store is off the ground and your wallet is feeling the benefits of your hard work!

      Uninstalling WooCommerce or Reverting to an Earlier Version

      If you want to shut down your store for any reason, you can’t just deactivate and uninstall WooCommerce. This is because the actual store data, such as your settings, orders, customer details, and products, will still be saved in your database.

      To delete all WooCommerce data, you will need to make an edit to your site’s wp-config.php file. This is the file that controls your site’s databases. All you need to do is add a single function to it.

      Copy and paste the following code into your wp-config.php file:

      define( 'WC_REMOVE_ALL_DATA', true);

      Make sure to place this snippet on its own line, right above the final comment in the file. This will clear all WooCommerce data from your database.

      Finally, you should always use the most up-to-date version of your plugins. However, if you do need to install an earlier version of WooCommerce, perhaps for testing purposes, you can do so from the Advanced options on the plugin’s directory page.

      First, you will need to restore a previous backup of your store’s database and uninstall the plugin. You can then use the Previous Versions section on the plugin page to select the one you want:

      When you’ve selected the preferred version, click on Download to get a .zip file of the plugin. You can now upload and install the plugin as usual.

      Create Your Online Store With WooCommerce

      WooCommerce is a terrific option for WordPress users who want to create an online store. Its user-friendly design makes it possible for beginners and experienced users alike to turn their WordPress websites into e-commerce businesses.

      To get started, simply install and activate the plugin on your WordPress site and enter some details about your store and products. Then, you can start adding items to your shop.

      Are you looking to build a fast and secure WooCommerce store? Our WooCommerce hosting solutions can help you speed up your site and grow your online business!

      Your Store Deserves WooCommerce Hosting

      Sell anything, anywhere, anytime on the world’s biggest eCommerce platform.

      Managed WordPress Hosting - DreamPress



      Source link

      How to Self-host Supabase with Docker


      Supabase is an open source Firebase alternative featuring a Postgres database, user authentication, and REST API capabilities. It offers a robust framework for creating the backend to Angular, React, Next.js, and other frontend applications.

      This tutorial, the first in our series on Supabase, introduces you to the basics of Supabase. It covers installing your own self-hosted Supabase instance with Docker, setting up an initial configuration, and securing your instance.

      Before You Begin

      1. Familiarize yourself with our
        Getting Started with Linode guide, and complete the steps for setting your Linode’s hostname and timezone.

      2. This guide uses sudo wherever possible. Complete the sections of our
        How to Secure Your Server guide to create a standard user account, harden SSH access, and remove unnecessary network services.

      3. Update your system.

        • Debian and Ubuntu:

            sudo apt update && sudo apt upgrade
          
        • AlmaLinux, CentOS Stream, Fedora, and Rocky Linux:

            sudo dnf upgrade
          

      Note

      This guide is written for a non-root user. Commands that require elevated privileges are prefixed with sudo. If you’re not familiar with the sudo command, see the
      Users and Groups guide.

      How to Install Supabase with Docker

      Docker is the recommended solution for self-hosting Supabase. Moreover, Docker’s containerization makes setting up and managing a platform like Supabase more convenient.

      These next few sections show you how to use Docker and Docker Compose to get your own Supabase instance up and running. This includes steps for installing Docker and downloading the necessary Supabase files.

      Afterward, keep reading to see how you can start configuring your instance to fit your security needs.

      Installing Docker and Docker Compose

      The first step is to install Docker and Docker Compose. Docker runs your Supabase instance while Docker Compose organizes and coordinates the instance’s parts.

      1. Install Docker using the steps outlined in sections two and three of the following guides, depending on your Linux distribution.

      2. Install the Docker Compose plugin using your distribution’s package manager.

        • Debian and Ubuntu:

            sudo apt install docker-compose-plugin
          
        • AlmaLinux, CentOS Stream, Fedora, and Rocky Linux:

            sudo dnf install docker-compose-plugin
          
      3. Verify your Docker Compose installation:

         docker -v
        

        Your version may be different the one shown below, but that’s okay, you just want to get a version response:

        Docker version 20.10.17, build 100c701

      Download the Supabase Repository

      Supabase operates its Docker Compose setup out of its Git repository. Thus, you need to download your own copy of the repository to run your Supabase instance. Once you have it, the cloned repository houses your Supabase files and configuration.

      1. Clone the Supabase repository from GitHub. This creates a supabase subdirectory to your current directory:

         git clone --depth 1 https://github.com/supabase/supabase
        

        Note

        You may first need to install Git. Typically, you can do so through your system’s package manager.

        Debian and Ubuntu:

        sudo apt install git
        

        AlmaLinux, CentOS Stream, Fedora, and Rocky Linux:

        sudo dnf install git
      2. Change into the repository’s Docker subdirectory:

         cd supabase/docker
        
      3. Make a copy of the included configuration file, .env.example. For now, you can leave the contents of the file as is, but this file is where most of your instance’s configuration resides. Later, you can get some ideas for how to customize it for your security needs:

         cp .env.example .env
        

      Run Supabase

      You are now ready to start running your Supabase instance. You can start it up by running the appropriate Docker Compose command within the supabase/docker subdirectory:

      sudo docker compose up -d
      

      If you’re on a local machine, simply, navigate to localhost:3000 in your web browser to see the Supabase interface:

      Supabase dashboard

      However, if you are wanting to access Supabase remotely, you need to open the port in your system’s firewall. You can learn about how to do so through our guide on
      securing your server.

      You also need to modify the URL values in your Supabase instance’s configuration to match your server’s remote address. Open Supabase’s .env file, and change the SITE_URL, API_EXTERNAL_URL, and PUBLIC_REST_URL variables, replacing localhost with your server’s remote address.

      This example uses a remote IP address of 192.0.2.0 for the server and assumes Supabase’s default ports:

      File: .env
      # [...]
      ## General
      SITE_URL=http://192.0.2.0:3000
      # [...]
      API_EXTERNAL_URL=http://192.0.2.0:8000
      
      # [...]
      
      ############
      # Studio - Configuration for the Dashboard
      ############
      
      STUDIO_PORT=3000
      PUBLIC_REST_URL=http://192.0.2.0:8000/rest/v1/ # replace if you intend to use Studio outside of localhost

      Similar changes need to be made again should you alter the server address or the instance’s ports. That is the case with the steps for implementing a reverse proxy server as shown further on in this tutorial.

      Once you have made the updates, restart your instance:

      sudo docker compose down
      sudo docker compose up -d
      

      After making the above preparations, you can access the Supabase interface remotely by navigating to port 3000 on your server’s remote IP address. For instance, if your server’s remote IP address is 192.0.2.0, navigate in a web browser to http://192.0.2.0:3000.

      Note

      You may need to open the port in your system’s firewall. You can learn about how to do so through our guide on
      securing your server.

      How to Configure Supabase

      With your Supabase instance up and running, you can now adjust its configuration to fit your needs.

      Much of the Supabase configuration is controlled via the .env file as shown in the previous section. Open that file with your preferred text editor, make the desired changes, and save the file. For the changes to take effect you then need to stop your Supabase services and start them back up, like so:

      sudo docker compose down
      sudo docker compose up -d
      

      Securing Supabase

      The next several sections of this tutorial show you specific configurations you can use to make your Supabase instance more secure. This includes applying API keys and secrets as well as using a reverse proxy with SSL.

      Generating API Keys and Secrets

      Setting keys and secrets for your Supabase instance helps keep it secure. Doing so is actually part of the basic setup steps in Supabase’s documentation. These should certainly be set before running the instance in any production context.

      1. Generate two passwords without special characters and consisting of at least 32 characters, referred to henceforth as examplePassword1 and examplePassword2. You can generate random passwords for this purpose using Bitwarden’s
        password generator.

      2. Navigate to Supabase’s
        API-key generator. This tool takes examplePassword2 and creates two specific JavaScript Web Tokens (JWTs) from it. Input examplePassword2into the JWT Secret field, and make sure ANON_KEY is selected as the Preconfigured Payload. Then, click the Generate JWT button to generate exampleJWT1 and save it along with your passwords.

        Using a random example password like from above, the result could look like:

        eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UiLAogICAgImlhdCI6IDE2NjE3NDkyMDAsCiAgICAiZXhwIjogMTgxOTUxNTYwMAp9.uUxRvehMuKsaDDvaQlm-phfgB58NjkiH7dg05kpnO8s
      3. Repeat the above step, input examplePassword2into the JWT Secret field, but this time select SERVICE_KEY as the Preconfigured Payload. Click the Generate JWT button to generate exampleJWT2 and save it along with your passwords.

        Using the same random example password, the result may resemble:

        eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJzZXJ2aWNlX3JvbGUiLAogICAgImlzcyI6ICJzdXBhYmFzZSIsCiAgICAiaWF0IjogMTY2MTc0OTIwMCwKICAgICJleHAiOiAxODE5NTE1NjAwCn0.93ec0gljiKlnrPUGEBqGOukXoNymz6EBgtHK33zkYpI
      4. Open the .env file in your supabase/docker directory. Replace the values for POSTGRES_PASSWORD, JWT_SECRET, ANON_KEY, and SERVICE_ROLE_KEY with your examplePassword1, examplePassword2, exampleJWT1, and exampleJWT2, respectively:

        File: .env
        1
        2
        3
        4
        5
        6
        
        # [...]
        POSTGRES_PASSWORD=examplePassword1
        JWT_SECRET=examplePassword2
        ANON_KEY=exampleJWT1
        SERVICE_ROLE_KEY=exampleJWT2
        # [...]
      5. Open the Kong configuration file, which is located at volumes/api/kong.yml in the supabase/docker directory. Find the consumers section of the file, and replace the key values under the anon and service_role usernames with your exampleJWT1 and exampleJWT2, respectively:

        File: volumes/api/kong.yml
        1
        2
        3
        4
        5
        6
        7
        
        consumers:
        - username: anon
          keyauth_credentials:
          - key: exampleJWT1
        - username: service_role
          keyauth_credentials:
          - key: exampleJWT2
      6. Restart your Supabase instance for these changes to take effect:

         sudo docker compose down
         sudo docker compose up -d
        

      Using a Reverse Proxy

      NGINX provides an excellent proxy. It routes traffic between the various Supabase endpoints, giving you control over what gets exposed and how.

      Moreover, using NGINX gives a solution for applying SSL certification to your endpoints. Doing so, which is outlined in the next section, provides a vast improvement to your server’s security.

      1. Install NGINX. Follow steps two and three from our guide on
        How to Install and Use NGINX. Use the drop down at the top of the guide to select your Linux distribution and get the steps matched to it.

        Additionally, follow any directions in the above guide related to locating and preparing the NGINX default configuration. On Debian and Ubuntu, for instance, this just means finding the configuration file at /etc/nginx/sites-available/default. On AlmaLinux, by contrast, you need first to comment out a section in the /etc/nginx/nginx.conf file and create a /etc/nginx/conf.d/example.com.conf file (replacing example.com with your domain).

      2. Open the NGINX configuration file that you located/created as part of the above step. For this and following examples, the location is presumed to be /etc/nginx/sites-available/default, but know that your location may be different. Remove the configuration file’s default contents, and replace them with the following contents. Be sure to replace the example IP address 192.0.2.0 with your server’s IP address and example.com with your domain.

        File: /etc/nginx/sites-available/default
        map $http_upgrade $connection_upgrade {
            default upgrade;
            '' close;
        }
        
        upstream supabase {
            server localhost:3000;
        }
        
        upstream kong {
            server localhost:8000;
        }
        
        server {
            listen 80;
            server_name localhost 192.0.2.0 example.com;
        
            # REST
            location ~ ^/rest/v1/(.*)$ {
                proxy_set_header Host $host;
                proxy_pass http://kong;
                proxy_redirect off;
            }
        
            # AUTH
            location ~ ^/auth/v1/(.*)$ {
                proxy_set_header Host $host;
                proxy_pass http://kong;
                proxy_redirect off;
            }
        
            # REALTIME
            location ~ ^/realtime/v1/(.*)$ {
                proxy_redirect off;
                proxy_pass http://kong;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection $connection_upgrade;
                proxy_set_header Host $host;
            }
        
            # STUDIO
            location / {
                proxy_set_header Host $host;
                proxy_pass http://supabase;
                proxy_redirect off;
                proxy_set_header Upgrade $http_upgrade;
            }
        }
            
      3. Restart the NGINX service, which you can typically do with:

         sudo systemctl restart nginx
        

      Afterward, you should be able to access the Supabase dashboard without having to specify port 3000.

      Note

      Should you encounter a “bad gateway” error, your system may be denying NGINX due to SELinux rules. You can verify this by checking the NGINX logs at /var/log/nginx/error.log and looking for “Permission denied”.

      According to Stack Overflow, the issue can typically be resolved with the following command. This allows NGINX to make network connection on your system:

      sudo setsebool -P httpd_can_network_connect 1
      

      Adding an SSL Certificate

      The following steps show you how to apply an SSL certificate to Supabase using
      Certbot. Certbot allows you to easily request and download free certificates from
      Let’s Encrypt.

      With an SSL certificate, your instance’s traffic gets encrypted and secured over HTTPS.

      1. Follow along with our guide on
        Enabling HTTPS Using Certbot with NGINX up to the step for executing the certbot command. Be sure to select the appropriate Linux distribution from the dropdown at the top of that guide.

      2. Certbot needs to use port 80 for Let’s Encrypt verification, so temporarily stop NGINX:

        sudo systemctl stop nginx
        
      3. This guide uses a variant of the certbot command to retrieve the certificate only and to use a standalone verification method. Doing so gives more control over how the certificate is applied.

        You can achieve this with the command:

        sudo certbot certonly --standalone
        

        Follow along with the prompts, entering an email address for renewal notifications, accepting the terms of service, and entering your server’s domain name.

        Take note of the locations of your certificate files. Certbot outputs these locations upon success, and you need these locations for the next step. Typically, the locations resemble the following, replacing example.com with your actual domain name:

        /etc/letsencrypt/live/example.com/fullchain.pem;
        /etc/letsencrypt/live/example.com/privkey.pem;
        
      4. Open your NGINX configuration file again (typically located at /etc/nginx/sites-available/default. Make the following changes to the beginning of the server section.

        Be sure to replace the ssl_certificate and ssl_certificate_key values here with the locations of the fullchain.pem and privkey.pem files created by Certbot. And replace the example.com in the server_name with your domain name:

        File: /etc/nginx/sites-available/default
        # [...]
        server {
            listen      80;
            server_name localhost;
            access_log  off;
            rewrite ^ https://$host$request_uri? permanent;
        }
        
        server {
            listen 443 ssl;
            server_name example.com;
        
            ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
            ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
        # [...]
            
      5. Restart NGINX:

         sudo systemctl start nginx
        

      Now, you can access your Supabase instance in a web browser via the HTTPS version of your domain. And you can be assured that your Supabase instance is secured using SSL certification.

      Note

      You can optionally also add your server’s remote IP address to the NGINX configuration above and use that as well. However, you may receive a certificate warning in your browser. This is because the certificate was issued for your server’s domain name, not its IP address.

      Conclusion

      Now you have your Supabase instance running and configured for your security needs. Take advantage of your instance by reading the
      Supabase documentation. There, you can find guides on getting started with the wide range of features Supabase has to offer.

      And continue learning with us in our upcoming series of guides on Supabase. These cover everything from setting up your instance, to linking your instance to Linode Object Storage, to building JavaScript applications with Supabase.

      Have more questions or want some help getting started? Feel free to reach out to our
      Support team.

      More Information

      You may wish to consult the following resources for additional information
      on this topic. While these are provided in the hope that they will be
      useful, please note that we cannot vouch for the accuracy or timeliness of
      externally hosted materials.



      Source link

      Working with CORS Policies on Linode Object Storage


      Linode Object Storage offers a globally-available, S3-compatible storage solution. Whether you are storing critical backup files or data for a static website, S3 object storage can efficiently answer the call.

      To make the most of object storage, you may need to access the data from other domains. For instance, your dynamic applications may opt to use S3 for static file storage.

      This leaves you dealing with Cross-Origin Resource Sharing, or CORS. However, it’s often not clear how to effectively navigate CORS policies or deal with issues as they come up.

      This tutorial aims to clarify how to work with CORS and S3. It covers tools and approaches for effectively reviewing and managing CORS policies for Linode Object Storage or most other S3-compatible storage solutions.

      CORS and S3 Storage – What you Need to Know

      Linode Object Storage is an S3, which stands for simple storage service. With S3, data gets stored as objects in “buckets.” This gives S3s a flat approach to storage, in contrast to the hierarchical and logistically more complicated storage structures like traditional file systems. Objects stored in S3 can also be given rich metadata.

      CORS defines how clients and servers from different domains may share resources. Generally, CORS policies restrict access to resources to requests from the same domain. By managing your CORS policies, you can open up services to requests from specified origin domains, or from any domains whatsoever.

      An S3 like Linode Object Storage can provide excellent storage for applications. However, you also want to keep your data as secure as possible while also allowing your applications the access they need.

      This is where managing CORS policies on your object storage service becomes imperative. Applications and other tools often need to access stored resources from particular domains. Implementing specific CORS policies controls what kinds of requests, and responses, each origin domain is allowed.

      Working with CORS Policies on Linode Object Storage

      One of the best tools for managing policies on your S3, including Linode Object Storage, is s3cmd. Follow along with our guide
      Using S3cmd with Object Storage to:

      1. Install s3cmd on your system. The installation takes place on the system from which you intend to manage your S3 instance.

      2. Configure s3cmd for your Linode Object Storage instance. This includes indicating the instance’s access key, endpoint, etc.

      You can verify the connection to your object storage instance with the command to list your buckets. This example lists the one bucket used for this tutorial, example-cors-bucket:

      s3cmd ls
      
      2022-09-24 16:13  s3://example-cors-bucket

      Once you have s3cmd set up for your S3 instance, use it to follow along with the upcoming sections of this tutorial. These show you how to use the tool to review and deploy CORS policies.

      Reviewing CORS Policies for Linode Object Storage

      You can get the current CORS policies for your S3 bucket using the info flag for s3cmd. The command provides general information on the designated bucket, including its policies:

      s3cmd info s3://example-cors-bucket
      
      s3://example-cors-bucket/ (bucket):
         Location:  default
         Payer:     BucketOwner
         Expiration Rule: none
         Policy:    none
         CORS:      <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"><CORSRule><AllowedMethod>GET</AllowedMethod><AllowedMethod>PUT</AllowedMethod><AllowedMethod>DELETE</AllowedMethod><AllowedMethod>HEAD</AllowedMethod><AllowedMethod>POST</AllowedMethod><AllowedOrigin>*</AllowedOrigin><AllowedHeader>*</AllowedHeader></CORSRule></CORSConfiguration>
         ACL:       31ffbc26-d6ed-4bc3-8a14-ad78fe8f95b6: FULL_CONTROL

      This bucket already has a CORS policy in place. This is because it was set up with the CORS Enabled setting using the Linode Cloud Manager web interface.

      The basic CORS policy above is fairly permissive, allowing access for any request method from any domain. Keep reading to see how you can fine-tune such policies to better fit your particular needs.

      Deploying CORS Policies on Linode Object Storage

      As you can see above, the Linode Cloud Manager can set up a general CORS policy for your bucket. However, if you need more fine-grained control, you need to deploy custom CORS policies.

      Creating CORS policies follows a similar methodology to the one outlined in our
      Define Access and Permissions using Bucket Policies tutorial.

      These next sections break down the particular fields needed for CORS policies and how each affects your bucket’s availability.

      Configuring Policies

      The overall structure for CORS policies on S3 looks like the following. While policies on your object storage instance can generally be set with JSON or XML, CORS policies must use the XML format:

      File: cors_policies.xml
       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      
      <CORSConfiguration>
        <CORSRule>
          <AllowedHeader>*</AllowedHeader>
      
          <AllowedMethod>GET</AllowedMethod>
          <AllowedMethod>PUT</AllowedMethod>
          <AllowedMethod>POST</AllowedMethod>
          <AllowedMethod>DELETE</AllowedMethod>
          <AllowedMethod>HEAD</AllowedMethod>
      
          <AllowedOrigin>*</AllowedOrigin>
      
          <ExposeHeader>*</ExposeHeader>
      
          <MaxAgeSeconds>3000</MaxAgeSeconds>
        </CORSRule>
      </CORSConfiguration>

      To break this structure down:

      • The policy introduces a list of one or more <CORSRule> elements within a <CORSConfiguration> element. Each <CORSRule> element contains policy details.

      • Policies tend to have some combination of the five types of elements shown in the example above.

        The <AllowedHeader>, <AllowedMethod>, and <AllowedOrigin> elements are almost always present. Further, there may be multiple of these elements within a single <CORSRule>.

        The other two elements, <ExposeHeader> and <MaxAgeSeconds>, are optional. There can be multiple <ExposeHeader> elements, but only one <MaxAgeSeconds>.

      • <AllowedHeader> lets you specify request headers allowed for the given policy. You can find a list of commonly used request headers in AWS’s
        Common Request Headers documentation.

      • <AllowedMethod> lets you specify request methods that the given policy applies to. The full range of supported HTTP request methods is shown in the example above.

      • <AllowedOrigin> lets you specify request origins for the policy. These are the domains from which cross-origin requests can be made.

      • <ExposeHeader> can specify which response headers the policy allows to be exposed. You can find a list of commonly used response headers in AWS’s
        Common Response Headers documentation.

      • <MaxAgeSeconds> can specify the amount of time, in seconds, that browsers are allowed to cache the response to preflight requests. Having this cache allows the browser to repeat the original requests without having to send another preflight request.

      Example CORS Policies

      To give more concrete ideas of how you can work with CORS policies, the following are two additional example policies. One provides another simple, but more limited, policy, while the other presents a more complicated set of two policies.

      • First, a public access read-only policy. This lets any origin, with any request headers, make GET and HEAD requests to the bucket. However, the policy does not expose custom response headers.

        File: cors_policies.xml
         1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
        
        <CORSConfiguration>
          <CORSRule>
            <AllowedHeader>*</AllowedHeader>
        
            <AllowedMethod>GET</AllowedMethod>
            <AllowedMethod>HEAD</AllowedMethod>
        
            <AllowedOrigin>*</AllowedOrigin>
          </CORSRule>
        </CORSConfiguration>
            
      • Next, a set of policies for fine control over requests from example.com. The <AllowedOrigin> elements specify the range of possible example.com domains. The two policies distinguish the kinds of headers allowed based on the kinds of request methods.

        File: cors_policies.xml
         1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        36
        
        <CORSConfiguration>
          <CORSRule>
            <AllowedHeader>Authorization</AllowedHeader>
        
            <AllowedMethod>GET</AllowedMethod>
            <AllowedMethod>HEAD</AllowedMethod>
        
            <AllowedOrigin>http://example.com</AllowedOrigin>
            <AllowedOrigin>http://*.example.com</AllowedOrigin>
            <AllowedOrigin>https://example.com</AllowedOrigin>
            <AllowedOrigin>https://*.example.com</AllowedOrigin>
        
            <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
        
            <MaxAgeSeconds>3000</MaxAgeSeconds>
          </CORSRule>
          <CORSRule>
            <AllowedHeader>Authorization</AllowedHeader>
            <AllowedHeader>Origin</AllowedHeader>
            <AllowedHeader>Content-*</AllowedHeader>
        
            <AllowedMethod>PUT</AllowedMethod>
            <AllowedMethod>POST</AllowedMethod>
            <AllowedMethod>DELETE</AllowedMethod>
        
            <AllowedOrigin>http://example.com</AllowedOrigin>
            <AllowedOrigin>http://*.example.com</AllowedOrigin>
            <AllowedOrigin>https://example.com</AllowedOrigin>
            <AllowedOrigin>https://*.example.com</AllowedOrigin>
        
            <ExposeHeader>ETag</ExposeHeader>
        
            <MaxAgeSeconds>3000</MaxAgeSeconds>
          </CORSRule>
        </CORSConfiguration>
            

      Deploying Policies

      The next step is to actually deploy your CORS policies. Once you do, your S3 bucket starts following them to determine what origins to allow and what request and response information to permit.

      Follow these steps to put your CORS policies into practice on your S3 instance.

      1. Save your CORS policy into a XML file. This example uses a file named cors_policies.xml which contains the second example policy XML above.

      2. Use s3cmd’s setcors commands to deploy the CORS policies to the bucket. This command takes the policy XML file and the bucket identifier as arguments:

        s3cmd setcors cors_policies.xml s3://example-cors-bucket
        
      3. Verify the new CORS policies using the info command as shown earlier in this tutorial:

        s3cmd info s3://example-cors-bucket
        
        s3://example-cors-bucket/ (bucket):
           Location:  default
           Payer:     BucketOwner
           Expiration Rule: none
           Policy:    none
           CORS:      <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"><CORSRule><AllowedMethod>GET</AllowedMethod><AllowedMethod>HEAD</AllowedMethod><AllowedOrigin>http://*.example.com</AllowedOrigin><AllowedOrigin>http://example.com</AllowedOrigin><AllowedOrigin>https://*.example.com</AllowedOrigin><AllowedOrigin>https://example.com</AllowedOrigin><AllowedHeader>Authorization</AllowedHeader><MaxAgeSeconds>3000</MaxAgeSeconds><ExposeHeader>Access-Control-Allow-Origin</ExposeHeader></CORSRule><CORSRule><AllowedMethod>PUT</AllowedMethod><AllowedMethod>DELETE</AllowedMethod><AllowedMethod>POST</AllowedMethod><AllowedOrigin>http://*.example.com</AllowedOrigin><AllowedOrigin>http://example.com</AllowedOrigin><AllowedOrigin>https://*.example.com</AllowedOrigin><AllowedOrigin>https://example.com</AllowedOrigin><AllowedHeader>Authorization</AllowedHeader><AllowedHeader>Content-*</AllowedHeader><AllowedHeader>Origin</AllowedHeader><MaxAgeSeconds>3000</MaxAgeSeconds><ExposeHeader>ETag</ExposeHeader></CORSRule></CORSConfiguration>
           ACL:       31ffbc26-d6ed-4bc3-8a14-ad78fe8f95b6: FULL_CONTROL

      Troubleshooting Common CORS Errors

      Having CORS-related issues on your S3 instance? Take these steps to help narrow down the issue and figure out the kind of policy change needed to resolve it.

      1. Review your instance’s CORS policies using s3cmd:

        s3cmd info s3://example-cors-bucket
        

        This can give you a concrete reference for what policies are in place and the specific details of each, like header and origin information.

      2. Review the request and response data. This can give you insights on any possible inconsistencies between existing CORS policies and the actual requests and responses.

        You can use a tool like cURL for this. First, use s3cmd to create a signed URL to an object on your storage instance. This example command creates a URL for an example.txt object and makes the URL last 300 seconds:

        s3cmd signurl s3://example-cors-bucket/example.txt +300
        

        Now, until the URL expires, you can use a cURL command like this one to send a request for the object:

        curl -v "http://example-cors-bucket.us-southeast-1.linodeobjects.com/index.md?AWSAccessKeyId=example-access-key&Expires=1664121793&Signature=example-signature"
        

        The -v option gives you verbose results, outputting more details to help you dissect any request and response issues.

      3. Compare the results of the cURL request to the CORS policy on your instance.

      Conclusion

      This covers the tools and approaches you need to start managing CORS for your Linode Object Storage or other S3 instance. Once you have these, addressing CORS issues is a matter of reviewing and adjusting policies against desired origins and request types.

      Keep improving your resources for managing your S3 through our collection of
      object storage guides. These cover a range of topics to help you with S3 generally, and Linode Object Storage in particular.

      Have more questions or want some help getting started? Feel free to reach out to our
      Support team.

      More Information

      You may wish to consult the following resources for additional information
      on this topic. While these are provided in the hope that they will be
      useful, please note that we cannot vouch for the accuracy or timeliness of
      externally hosted materials.



      Source link