There may be instances when your Userback screens are not rendered correctly and lack elements such as CSS styling and images.

This is usually because your site is behind a firewall or requires basic authentication. It can also be that your static resources are protected.

Method 1: Whitelist IPs

If your website or web app is in a protected environment, such as behind a firewall or basic authentication, you may need to whitelist our server IPs. Userback's rendering engine needs access to your site's static resources (images + stylesheets) to accurately render your screens.

Below is a list of the IPs used by the Userback screenshot engine.

52.22.55.105
52.7.16.85
52.54.137.162
54.163.98.234
107.20.147.66

We also suggest whitelisting the Userback domains.

*.userback.io

Method 2: Add extra HTTP headers

If whitelisting IPs is not a feasible option on your end, you can also add extra HTTP headers to the requests made from our screenshot servers. Once the headers are added, you can identify them on your end and therefore allow the requests to come through.

Check CORS header for your images and web fonts

Sometimes even if you have whitelisted the Userback domain and added exceptions for the Userback IP addresses, the images or web fonts will not load.

This could be due to not having an appropriate CORS header on your images or web fonts. There is a simple way to test this before proceeding.

Firstly, validate if your images have a valid CORS header by using a tool such as https://extendsclass.com/web-service-tester.html

Simply paste the URL of one of your images into the URL box and click Test. Check to see if the response was successful or failed.

If the response fails, you will need to add an appropriate CORS header.

Access-Control-Allow-Headers: *

or

Access-Control-Allow-Headers: screenshot.userback.io

Here are instructions on the most common hosting providers for adding a CORS header:

AWS S3:
https://docs.aws.amazon.com/AmazonS3/latest/user-guide/add-cors-configuration.html

AWS Cloudflare:
https://support.cloudflare.com/hc/en-us/articles/200308847-Using-cross-origin-resource-sharing-CORS-with-Cloudflare

Microsoft Azure:
https://docs.microsoft.com/en-us/rest/api/storageservices/cross-origin-resource-sharing--cors--support-for-the-azure-storage-services

Google Cloud:
https://cloud.google.com/storage/docs/cross-origin

Apache Server:
https://enable-cors.org/server_apache.html

Nginx Server:
https://enable-cors.org/server_nginx.html

If your hosting provider is not listed above, you may need to contact them to ask how to proceed.

Browser Extension

If you are still unable to render screens correctly, we suggest using our browser extension as the best way to get feedback on your website.

If you still have issues with screens not displaying correctly, please feel free to contact us and we will gladly help you out.

Did this answer your question?