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 using their own domain instead by masking the Contentstack’s URL.

'Masking' is the process in which the end-user gets an impression as if the content is being delivered directly from the client instead of Contentstack. For masking, you can set up a proxy.

However, it is recommended not to set 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.

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

When the client's end-user 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 the 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.

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

1. If you already have a Fastly account, log into it. Else, follow the steps given here to create one.
2. Once you log into your account, click the Create service drop-down and select CDN as shown below:
   Click to enlarge
3. On the Create a CDN service page, enter the details for your CDN service in the following fields:
   1. Service name: Enter a suitable name for your service. You can add your domain name as your service name if you want to (recommended).
   2. Add your own domain: Enter your domain name inside the Domain field, for example, static.<your-custom-domain>.com.
   3. Add an origin: Add an origin inside the Host field. In our case, it will be images.contenstack.io.
   4. Recommended Settings: Inside the Recommended Settings section, keep all the provided options enabled as shown below:
      Click to enlarge
4. Once you have entered the details, click Activate.
5. You'll be navigated to the Service configuration page (on the Domains section) as shown below:
   Click to enlarge
6. You can view the domain name that you have set up on this screen, and to view the hosts, click Hosts, inside Origins, on the left navigation panel.
   Click to enlarge
7. We will now add additional settings by editing the configuration. So, click the Edit configuration drop-down as shown below:
   Click to enlarge
8. On the screen that appears, click on Hosts inside Origins to edit it, and click the edit icon:
   Click to enlarge
9. On the Edit this host page, enter images_contentstack_io in the Name field.
   Ensure the Address field has images.contentstack.io as the value.
   Scroll down to the Override host field, and ensure it says images.contentstack.io.
   Leave all other fields to their default value and click Update.
   Click to enlarge
10. Now, we will attach a condition in the origin of images.contentstack.io by editing the host again. To do this, click the edit icon and then the attach a condition link as shown below:
    Click to enlarge
11. On the Create a new request condition modal, enter the name (for example, images) and the following condition in the respective fields.
    123

    req.url ~ "\. 
    
    (exr|apng|bmp|cgm|drle|emf|fits|g3|gif|heic|he ics|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|djv u|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)$"

    
    This basically implies that anything that has an extension like png, bmp, svg, and so on, consider it as an image and apply the condition accordingly.
12. Then, click the Save and apply to images_contenstack_io button as shown below:
    Click to enlarge
13. Then, go to the bottom of the page and click Update for the settings to take effect.
14. We will now create another host for assets in our service. So, click the + Create a host button as shown below:
    Click to enlarge
15. Then, enter assets.contentstack.io and click Add as shown below:
    Click to enlarge
16. The new host gets added. We will now edit this host similar to what we did for the previous host (images.contentstack.io). So, click the edit icon of this newly created host:
    Click to enlarge
17. On the Edit this host page, enter the name (assets_contentstack_io) in the Name field. Ensure the Address field has the value assets.contentstack.io.
    Scroll down to the Override host field at the bottom and enter assets.contentstack.io. Keep all other settings as is and click Update.
    Click to enlarge
18. Now, we will attach a condition in the origin of assets.contentstack.io by editing the host again. To do this, click the Attach a condition link on the host pages when it gets updated.
    Click to enlarge

    
    Alternatively, you can click the edit icon, and then click the Attach a condition link.

19. On the modal that opens, create a new condition by clicking the Create a new request condition button.
    Click to enlarge
20. On the Create a new request condition modal, enter the name (for example, NOT images) and the following condition in the respective fields.
    123

    req.url !~ "\. 
    
    (exr|apng|bmp|cgm|drle|emf|fits|g3|gif|heic|he ics|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|djv u|djv|\*sub|dwg|dxf|fbs|fpx|fst|mmr|rlc|ico|md i|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)$"

21. Then, click the Save and apply to assets_contenstack_io button, as shown below, and then the Update button for changes to take effect:
    Click to enlarge
22. Then, at the top of the Hosts page, click Activate.
    Click to enlarge

    
    You will get a message that the service has been activated and locked.

    Click to enlarge
23. If you already have a static subdomain for your images and assets, then make a DNS entry, pointing it to k.sni.fastly.net. For example:
    1

    static.<your-custom-domain>.com  → k.sni.fastly.net

    
    Pointing your static subdomain to Fastly will help you mask images and assets from Contentstack to your domain based on the settings that we have done in Fastly.

    NoteIf you do not have a subdomain, then there could be different ways of routing the traffic depending on the requirement. For this contact our support team at [email protected].

24. Lastly, update your images/assets URL in your application with your own domain URL. For example:
    Update
    1

    https://images.contentstack.io/v3/assets/blt2xxxyyyzzze34/blt7xxxyyyzzb4b/65a71577/istockphoto-1295274245-612x612.jpg

    to
    1

    https://static.<your-custom-domain>.com/v3/assets/blt2xxxyyyzzze34/blt7xxxyyyzzb4b/65a71577/istockphoto-1295274245-612x612.jpg