Content-Security-Policy configuration

By default, Sitecore XP/XM has a Content-Security-Policy (CSP) header configured in the web.config that is targeted at the /sitecore location. This CSP header prevents resources that live outside of your domain to be loaded in the Sitecore Content Editor.

This applies to the Content Management instance(s) of your Sitecore platform.

With this CSP header enabled, the Lytho Connector is unable to display selected assets in the Content Editor because they are served by the Lytho CDN and live outside of your own domain.
This will result in broken images as shown in this example:

To allow Lytho assets to be loaded in the Content Editor, you must update the CSP header so that it is allowed.
Here is an example of the modified configuration that is applicable to the standard (out-of-the-box) configuration that ships with Sitecore:

  <location path="sitecore">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Content-Security-Policy" 
            value="
              default-src 'self' 'unsafe-inline' 'unsafe-eval' https://apps.sitecore.net; 
              img-src 'self' data: https://embedded-links.lytho.io; 
              media-src 'self' data: https://embedded-links.lytho.io; 
              style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; 
              font-src 'self' 'unsafe-inline' https://fonts.gstatic.com; 
              upgrade-insecure-requests; 
              block-all-mixed-content;" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>

Your actual web.config may look a little different than the example. What is relevant is that the img-src and media-src setting must allow https://embedded-links.lytho.io.