Mask Asset Domains

Images or assets served using Contentstack contain “contentstack.io” in the URL (i.e., https://images.contentstack.io/v3/assets/blt8b...). Many of our customers prefer to use their own domain instead by masking Contentstack’s URL.

'Masking' is the process where the end-user gets an impression as if the content is being delivered directly from the client instead of Contentstack. To do this, a proxy can be set up, however, we do not recommend setting up a proxy, as it not only increases the overall infrastructure overheads but also slows down the performance of content delivery.

Therefore, we strongly recommend using a CDN service such as Fastly to deliver content to the end-user quickly and efficiently.

Note: Images here refer to the usual images that we use in our content or something that has extension .png, .jpg, .jpeg, and so on. Assets refer to anything that is not images, for example, PDFs.

How Does Masking Work

When the end-user of our client sends some requests to fetch assets or images, the request is not sent to Contentstack directly. Instead, the static domain that is set up on the client side, using Fastly, routes the request to Contentstack CDN endpoints images.contentstack.io and assets.contentstack.io to deliver the content.

This routing happens at the backend (discussed below) and the end-user gets an impression as if the content is delivered through the client and not directly from Contentstack.

Setting up the Proxy Domain

To create proxy images.contentstack.io and assets.contentstack.io with a custom domain using Fastly, follow the below steps:

1. Create a service in Fastly for caching your custom domain. To learn how to work with services in Fastly, refer the https://docs.fastly.com/guides/basic-setup/working-with-services documentation page and set up the service as per your requirement.
2. Create a host in Fastly with the name 'F_images_contentstack_io' and add the address 'images.contentstack.io' in the origin section of the service created for static.<custom-domain>.com.
3. Now, depending upon the type of request (for images or for assets), we can route it by writing a condition in the ORIGIN of images.contentstack.io and set its header accordingly to point to images.contentstack.io as shown below:
   
   

   # Request Condition: images.contentstack.io Prio: 10
    if( req.url ~ "\.(exr|apng|bmp|cgm|drle|emf|fits|g3|gif|heic|heics|heif|heifs|ief|jls|jp2|jpg2||jpeg|jpg|jpe|jpm|jpx|jpf|ktx|png|sgi|svg|svgz|t38|tif|tiff|tfx|webp|wmf|pti|psd|azv|uvi|uvvi|uvg|uvvg|djvu|djv|\*sub|dwg|dxf|fbs|fpx|fst|mmr|rlc|ico|mdi|wdp|npx|tap|vtf|wbmp|xif|pcx|3ds|ras|cmx|fh|fhc|fh4|fh5|fh7|\*ico|jng|sid|\*bmp|\*pcx|pic|pct|pnm|pbm|pgm|ppm|rgb|tga|xbm|xpm|xwd)$" ) {
      set req.backend = F_images_contentstack_io;
    # Header rewrite images.contentstack.io : 10
          set req.http.host = "images.contentstack.io";
   #end condition

   In the above condition, any URL that ends with 'image type', the request is directed to 'images.contentstack.io', as depicted in the following diagram:
   
4. Similarly, create another host with the name 'F_assets_contentstack_io' and add the address 'assets.contentstack.io' in the origin section of the service created for static.<custom-domain>.com.
5. Write another condition to route requests for URL that ends with anything other than 'image type' to assets.contentstack.io and accordingly set its header to point to assets.contentstack.com if the condition is met:
   

   # Request Condition: assets.contentstack.io Prio: 10
    if( req.url !~ "\.(exr|apng|bmp|cgm|drle|emf|fits|g3|gif|heic|heics|heif|heifs|ief|jls|jp2|jpg2||jpeg|jpg|jpe|jpm|jpx|jpf|ktx|png|sgi|svg|svgz|t38|tif|tiff|tfx|webp|wmf|pti|psd|azv|uvi|uvvi|uvg|uvvg|djvu|djv|\*sub|dwg|dxf|fbs|fpx|fst|mmr|rlc|ico|mdi|wdp|npx|tap|vtf|wbmp|xif|pcx|3ds|ras|cmx|fh|fhc|fh4|fh5|fh7|\*ico|jng|sid|\*bmp|\*pcx|pic|pct|pnm|pbm|pgm|ppm|rgb|tga|xbm|xpm|xwd)$" ) {
      set req.backend = F_assets_contentstack_io;
    # Header rewrite assets.contentstack.io : 10
          set req.http.host = "assets.contentstack.io";
        
    #end condition

   The working of the above condition is depicted in the following diagram: