Skip to main content

Jigsaw image server configuration

Objective

Learn how to configure your jigsaw image server to work with PuzzleMe

Overview​

To be able to load the images and use them within our jigsaw puzzles, the image server needs to allow cross origin access to the image from the [*].amuselabs.com domain. Please replace [*] with the subdomain provided to you (For example: cdn-x.amuselabs.com or cdn-y.amuselabs.com).

The Access-Control-Allow-Origin header must be present, and https://[*].amuselabs.com must be set to one of the AllowedOrigins. This needs to be configured at your server end.

AWS configuration​

Serving directly from S3​

To allow our app to load and process the image, an "Access-Control-Allow-Origin" CORS header needs to be present on the file server. The header also needs to specify the domains which are allowed to fetch and process the images. This header can be set at a bucket level. So all files with public access in that bucket can be used in our jigsaw puzzles.

You can set the CORS header using the instructions present in this AWS document.

Here is the CORS configuration that you need to add for the S3 bucket :

[
    {
        "AllowedHeaders": [
            "Authorization"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://*.amuselabs.com",
            "https://amuselabs.com"
        ],
        "ExposeHeaders": [
            "Access-Control-Allow-Origin"
        ]
    }
]

Once you have enabled this CORS configuration, PuzzleMe is able to fetch and use the images in the jigsaw puzzles.

Serving from S3 via Cloudfront distribution​

If you are using Cloudfront with your images being served from an S3 bucket, you need to configure the CORS setting in the S3 bucket (as shown above) first. Additionally, you also need to set the Response header policy name for your Cloudfront distribution behavior to Managed-CORS-With-Preflight.

You can edit an existing behavior as shown in the image below, or create a new behavior.

Edit distribution behavior

Go to the Response headers policy - optional setting, and make sure that the CORS-With-Preflight option is selected from the dropdown.

Edit distribution behavior

If you have multiple behaviors configured for your distribution, please ensure that the Managed-CORS-With-Preflight policy is applied to the behavior with the path pattern for the jigsaw images in your S3 bucket.

WordPress​

The easiest way to modify the headers is via adding the appropriate directives in the .htaccess file present in the root directory of your WordPress installation. By default, editing the .htaccess file would enable CORS access to all the URLs on your website.

If you want to modify the CORS headers only for the wp-content directory (or another directory where you are serving the images from), please create a new .htaccess file only in the specific directory. We highly recommend this approach, to limit the files that have a cross origin sharing header present. The following should be added to the .htaccess file:

<IfModule mod_headers.c>
    <FilesMatch "\.(jpg|jpeg|webp|png)$">
          
          # The line below is a regex to match https://[*.]amuselabs.com[:valid_ports]
          # As per CORS specification, the server should set origin appropriately based on the subdomain
          SetEnvIf Origin ^(https?://(?:.+\.)?amuselabs\.com(?::\d{1,5})?)$   CORS_ALLOW_ORIGIN=$1
          
          Header append Access-Control-Allow-Origin  %{CORS_ALLOW_ORIGIN}e   env=CORS_ALLOW_ORIGIN
          Header merge  Vary "Origin"

    </FilesMatch>
</IfModule>