When using the TelemetryTV Website App to display websites, you may occasionally encounter the message "Site Unavailable." This error occurs when a website has implemented a content security policy directive that restricts embedding within other websites. While this prevents previewing the website when managing your playlist on TelemetryTV, it does not affect playback on the media player devices running TelemetryTV's Electron-based application (Windows, Mac, Linux, and TelemetryOS), as the HTTP headers causing the issue are filtered out.

In this article, we will explore the HTTP response headers that can lead to this error and provide solutions to make your website compatible with TelemetryTV's preview feature and non-Electron media players (such as ChromeOS, Android, or the Progressive Web App).

Websites typically employ one of two HTTP response headers that deny embedding: X-Frame-Options or Content-Security-Policy with a frame-ancestors directive. These headers inform web browsers not to allow the website to be embedded within other websites, thereby blocking its display within the TelemetryTV Website App.

The X-Frame-Options header specifies whether a browser should permit a web page to be displayed in an iframe. If the X-Frame-Options header is set to a value that disallows embedding, the TelemetryTV Website App will show the "Site Unavailable" message. To resolve this issue, you need to remove or modify the X-Frame-Options header on your website. However, if you do not have control over the website's headers, there is no direct action you can take.

The Content-Security-Policy (CSP) header defines the security policies for a website, including restrictions on embedding. When a website uses the frame-ancestors directive within the CSP header to specify which websites can embed it, and TelemetryTV is not listed as an allowed domain, the website will be blocked from displaying within the TelemetryTV Website App. Similarly to X-Frame-Options, modifying or removing this header is necessary for compatibility with TelemetryTV. However, if you lack control over the website's CSP header, there are limited options available to resolve the issue.

To ensure your website works with the preview feature and non-Electron media players (ChromeOS, Android, or the Progressive Web App), you must remove the X-Frame-Options and/or frame-ancestors directive from your website's HTTP response headers. By doing so, you allow TelemetryTV to embed and display your website seamlessly within its application. However, it is essential to note that if you do not have administrative control over the website in question, you cannot make the necessary modifications to resolve the embedding issue.

To test a website for the presence of X-Frame-Options or Content-Security-Policy headers, you can use the command-line tool curl. Here's a simple guide on how to perform this test:

Open a terminal or command prompt on your computer. Ensure that curl is installed. If not, you can download and install it from the official website (https://curl.se/).

Type the following command, replacing "your-website.com" with the actual URL of the website you want to test:

The -I flag sends a HEAD request to retrieve the headers, while the -L flag follows any redirects. Replace https://your-website.com with the appropriate URL.

Press Enter to execute the command.

Look for the response headers in the output. Search for "X-Frame-Options" and "Content-Security-Policy" to determine if these headers are present. If they are, note the values specified.

If you find the "X-Frame-Options" header, it means the website is using this header to control embedding.

If you find the "Content-Security-Policy" header with a "frame-ancestors" directive, it indicates that the website employs a content security policy to restrict embedding.

By using curl to check for these headers, you can assess whether a website allows embedding and identify any potential issues that may cause the "Site Unavailable" error within the TelemetryTV Website App.

Encountering the "Site Unavailable" message in the TelemetryTV Website App indicates that the website you are attempting to display has implemented a content security policy directive that restricts embedding. To address this issue, it is recommended to remove the X-Frame-Options and/or frame-ancestors directive from the website's HTTP response headers. This enables compatibility with TelemetryTV's preview feature and non-Electron media players. However, if you do not have control over the website's headers, there are no direct actions you can take. If you require further assistance or have any questions, please reach out to TelemetryTV's support team for guidance.