Saber Feedback Documentation

Screenshots

There are a couple of common and easily fixable scenarios that can cause Saber’s screenshots to render incorrectly.

Missing CSS and images

This is most common issue, and causes your screenshot to look like this:

Broken Screenshot

This happens as sadly it’s simply not possible to take accurate screenshots directly in the browser, so Saber’s screenshots are generated by a farm of servers, running over 800 combinations of browser and operating system, to ensure your screenshots are 100% accurate.

The downside is that these screenshot servers need to be able to access your website’s asset files (Images, CSS, Fonts, etc) in order to create the screenshots.

There are three main common reasons for the screenshot servers not being able to access your assets - local sites, blanket authentication, and private networks.

Local Sites

If you wish to use Saber on a localhost website, or just try it locally before putting it on your live site, you’ll need to set a localhost tunneling service, such as ngrok to allow the screenshot server to access your local assets.

Blanket Authentication

Normally authentication isn’t an issue for Saber. Blanket authentication refers to setups where your entire site is behind authentication, including the assets. HTTP Basic Authentication is common example of this set up:

Basic Auth

In the old days, this could easily be fixed by including a username and password in the asset URLs, and in fact BugMucnher provided a feature to do just this. Unfortunately this has now been depreciated as many modern browsers have dropped support for credentials in URLs.

Luckily Saber still has a solution to this problem, albeit a slightly more complicated one. If you wish to use BugMuncehr on a site with Blanket Authentication, you need to use the cookies run-time option to provide the screenshot server with an authenticated cookie before the screenshot is taken.

Private Networks (Intranets)

Private networks and intranets cause a similar issue to localhost sites, as your assets are not globally accessible, so the screenshot server can’t use them to create screenshots.

Depending on your setup, you may be able to use a tunneling service such as ngrok to allow the screenshot server to access your local assets.

If your use case is not listed above, or the solutions specified do not work for you, please get in touch using the feedback button on the right

Missing fonts

Some browsers will not load webfonts from domains other than that of the host page. This means if your site uses self hosted webfonts, those fonts may not be displayed in screenshots. To fix this you need to allow Cross Origin Resource Sharing (CORS) on your webfonts:

Nginx

location ~* \.(eot|ttf|woff|woff2|otf)$ {
  add_header Access-Control-Allow-Origin '*';
}

Apache

<FilesMatch ".(eot|ttf|woff|woff2|otf)">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

If you’re still having problems getting Saber working correctly please get in touch using the feedback button on the right.

Blank areas (iframes)

If your website uses iframes, these will appear as blank white rectangles in the screenshot. This is due to security restrictions in web browsers meaning that Saber can’t see the content of any iframes.

A solution to this is currently in development, which should fix this issue as long as you have control over the iframes, and can add the Saber script to them.

If your website relies on iframes, or if you’re having any issues that aren’t mentioned above, please get in touch using the feedback button on the right.