Hotlink images for email signatures or other systems e.g CRM

Allowing Images to be Hotlinked from Your Website

This article explains how to configure your website to allow specific images to be displayed on other websites or platforms, such as email signatures. This process is often referred to as "hotlinking."

Why Allow Hotlinking for Specific Images?

By default, for security and bandwidth protection, websites hosted with SixFive restrict images from being directly used ("hotlinked") on other domains. This is known as a "same-origin policy." However, there are legitimate reasons to allow certain images to be hotlinked, such as:

• Email Signatures: Using your company logo or a personal photo in your email signature.

• Partnerships & Collaborations: Sharing specific promotional images with partners for their websites.

• Specific Integrations: Certain tools or platforms may require direct image links.

Understanding the Process

To allow specific images to be hotlinked, we need to adjust your website's configuration to bypass the default "same-origin policy" for those images. This involves:

1. Dedicated Folder: Placing the images in a specific folder on your server.

2. Cloudflare Configuration (if applicable): Adjusting Cloudflare rules if your domain uses them.

3. CORS Policy: Adding a Cross-Origin Resource Sharing (CORS) policy to your server's configuration for that specific folder.

Step-by-Step Guide

This relies on editing server configuration, consult our team support for the exact method to edit NGINX configuration files if you are not comfortable doing so.

Step 1: Create a Dedicated Folder for Hotlinkable Images

Images you want to hotlink must be stored in a specific folder on your server. This folder will be configured to allow external access.

1. Connect via sFTP: Read the guide 

2. Navigate to the uploads Directory: Once connected, navigate to the following path: /htdocs/wp-content/uploads/

3. Create the hotlink-ok Folder: Inside the uploads folder, create a new folder named hotlink-ok.

   Our standard practice is to place it here (/wp-content/uploads/hotlink-ok/) so that if your WordPress site is migrated, these images will automatically be included.

4. Upload Your Images: Upload the images you wish to hotlink into this newly created hotlink-ok folder.

   Note: Images in this folder will not appear in your WordPress Media Library.

Step 2: Configure Cloudflare (If Applicable)

If your domain is managed by Cloudflare and uses our firewall rules, you may need to adjust a rule to ensure Cloudflare's Hotlink Protection does not block these images.

1. Access Cloudflare Dashboard: Log in to your Cloudflare account.

2. Scrape Shield For Hotlink Protection, switch the toggle to On.

3. Navigate to Firewall Rules: Go to Security > Security Rules > Allow Good Bots (depending on your Cloudflare setup and the specific rule).

4. Check "Good Bots" Rule: Look for a rule related to "Good Bots" or a similar rule that might have an exception list.

5. Add Exception: Ensure the rule includes the following condition, or add it if it's missing: or (http.request.uri.path contains "/hotlink-ok/")

   This tells Cloudflare to bypass hotlink protection for any requests coming from a folder with /hotlink-ok/ in the path.

Step 3: Add a CORS Policy to Your Website's Configuration

This is the most crucial step, as it tells your server to explicitly allow other websites to access images from the hotlink-ok folder.

1. Access Server Configuration: You will need to access your server's NGINX configuration files. On our Managed Wordpress Hosting, this is typically done by editing the cors-main-context.conf file for your site. The path is usually: /var/www/your.site.url/nginx/cors-main-context.conf

2. Add the CORS Policy Block: Open the cors-main-context.conf file and add the following code block. It's recommended to place it at the end of the file or within a logical section.

   # CORS Policy for images in the 'hotlink-ok' folder
   # This block ensures that images within the specified folder can be accessed
   # from any domain, which is useful for hotlinking scenarios.
   location ~* ^wp-content/uploads/hotlink-ok/.\.(jpg|jpeg|gif|png|svg|webp|ico)$ {
   	# Allow access from any origin. This is crucial for hotlinking.
   	add_header 'Access-Control-Allow-Origin' '';
   	# Allow common methods for image retrieval.
   	add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
   	
   	# Allow common headers for requests.
   	add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
   	
   	# Allow credentials (e.g., cookies, HTTP authentication) if needed.
   	# For simple image hotlinking, this is often not required, but included for completeness.
   	add_header 'Access-Control-Allow-Credentials' 'true';
   	
   	# Set max-age for preflight requests (OPTIONS).
   	# This tells the client how long the preflight response can be cached.
   	add_header 'Access-Control-Max-Age' 1728000;
   	
   	# Handle preflight (OPTIONS) requests.
   	# For preflight requests, we just need to return a 204 No Content status.
   	if ($request_method = 'OPTIONS') {
   	    add_header 'Access-Control-Allow-Origin' '*';
   	    add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
   	    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
   	    add_header 'Access-Control-Allow-Credentials' 'true';
   	    add_header 'Access-Control-Max-Age' 1728000;
   	    add_header 'Content-Type' 'text/plain; charset=utf-8';
   	    add_header 'Content-Length' 0;
   	    return 204;
   	}
   	
   	# Optional: Prevent caching of preflight responses by proxies
   	# add_header 'Vary' 'Origin';
   }
   

3. If there are no errors, nginx will then restart and your CORS Policy will be in place.