KB-1583 Web Content Component not rendering content

Symptoms

When embedding content into a Web Content Component, it fails to render in one of two ways.

1. The a!webContentField() is blank instead of rendering the expected page.
   
2. There is a pink box error rendering the a!webContentField():
   

   Could not display interface. Please check definition and inputs.
   Interface Definition: Expression evaluation error at function a!webContentField[<line number>]: A web content field [label=<label>] has an invalid value for "source". Source must be secure (HTTPS). Received: http://<URL> 

   
   

Cause

1. Blank web content components are typically caused by the host server using response headers that explicitly restrict where content can be embedded. Typically, embedding restrictions are controlled by sending an X-Frame-Options header in the HTTP response from a web page. This can be set to either DENY to disallow embedding globally, SAMEORIGIN to allow embedding only within the same origin or an explicit domain to establish domains where content can be embedded. A blank page or a page with an error message can also arise if the site you are attempting to embed is unavailable, either due to being down or hidden from the public internet by IP restrictions or VPN.
2. The pink box error is caused by using an insecure source that is served over HTTP rather than HTTPS. In order to minimize vulnerabilities arising from embedding insecure content and to prevent browser errors arising from serving mixed content, Appian explicitly prevents designers from using a!webContentField() to embed content served over HTTP.

Action

If a web content component shows up as blank, check that:

1. A web browser can load the resource as expected.
2. The resource being embedded is accessible over the public Internet or configured to allow traffic from the Appian instance by either an IP allow list or a VPN tunnel.
3. The source of the web content component does not send out a X-Frame-Options header that would block it from being embedded. This can be seen in the response headers of the web page, which can be accessed by opening the browser's developer console and monitoring the requests and responses going over the network:
   

Content that uses a restrictive X-Frame-Options header cannot be embedded without changing the web server configurations of the source server. Please contact the owner of the source server to determine if this can be changed to allow embedding in Appian.

If a web content component errors out with the insecure source error, the source must be configured to use HTTPS.

Affected Versions

This article applies to Appian 18.1 and later.

Last reviewed: June 2020