> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dc.ag/llms.txt
> Use this file to discover all available pages before exploring further.

# dynamic content - CSP-Management

> Securely enable external content on your website via CSP headers.

In the CSP-Management you can allow external content to be displayed on your site.

<Steps>
  <Step>
    ## Step 1: Navigate to CSP-Management

    First, navigate to the CSP-Management. To do so, hover your mouse over the settings icon — the gear wheel in the upper right corner — and select "CMS-Management" from the drop-down menu that appears. You should now be in the settings for your CSP-Management.

    <Frame>
      <img src="https://mintcdn.com/dcag/BJVIQhqr6cd9g2F-/images/dynamic-content/csp-management/navigation-csp-management.png?fit=max&auto=format&n=BJVIQhqr6cd9g2F-&q=85&s=5eb0666d2fc5261b3523e6781b967183" alt="Navigation to CSP-Management via the gear icon" width="1080" height="643" data-path="images/dynamic-content/csp-management/navigation-csp-management.png" />
    </Frame>
  </Step>

  <Step>
    ## Step 2: Create a new CSP header

    Here you can create a new CSP header. To do this, click the "Plus" icon with the label "New" below it. A window with the heading "Create CSP Header" should open. A CSP header consists of a header type and a header value. The header type defines the content type, while the header value determines where the content may originate from.

    <Tip>
      You can edit an existing CSP header by double-clicking it.
    </Tip>

    <Frame>
      <img src="https://mintcdn.com/dcag/BJVIQhqr6cd9g2F-/images/dynamic-content/csp-management/neuer-csp-header.png?fit=max&auto=format&n=BJVIQhqr6cd9g2F-&q=85&s=49977c824786991f205e9d5ab55de54c" alt="Create CSP Header window" width="1080" height="643" data-path="images/dynamic-content/csp-management/neuer-csp-header.png" />
    </Frame>
  </Step>

  <Step>
    ## Step 3: Select the header type

    First, select a header type from the corresponding drop-down. For example, using "default-src" allows you to define the default value for all header types. Alternatively, "img-src" lets you specify the permitted sources for images. Comprehensive documentation on the various header types is available in English from Mozilla or in German from SELFHTML. In our example, we want to define that the visitor's browser should by default be allowed to display all content from the dc site. Therefore, we select "default-src" as the header type.

    <Frame>
      <img src="https://mintcdn.com/dcag/BJVIQhqr6cd9g2F-/images/dynamic-content/csp-management/header-typ.png?fit=max&auto=format&n=BJVIQhqr6cd9g2F-&q=85&s=86e9e52ceb51a24b5b8b4fd103863da9" alt="Selecting the header type from the drop-down" width="1080" height="643" data-path="images/dynamic-content/csp-management/header-typ.png" />
    </Frame>
  </Step>

  <Step>
    ## Step 4: Define the header value

    Next, select a header value. The header value determines the source from which the external data originates. For example, you can enter a URL to allow the previously selected header type from that site. It is also possible to specify other values, such as "none", to block this header type entirely. In our example, we enter the URL of the dc site as the header value, since we want to allow content from that site.

    <Frame>
      <img src="https://mintcdn.com/dcag/BJVIQhqr6cd9g2F-/images/dynamic-content/csp-management/header-wert.png?fit=max&auto=format&n=BJVIQhqr6cd9g2F-&q=85&s=df86bb4a29e8c336171184e093164518" alt="Defining the header value with a URL as the source" width="1080" height="643" data-path="images/dynamic-content/csp-management/header-wert.png" />
    </Frame>
  </Step>

  <Step>
    ## Step 5: Set active and save

    Now set the CSP header to active so that it takes effect. To do this, check the corresponding checkbox. Finally, save your settings. You have now successfully created a CSP header.

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/BJVIQhqr6cd9g2F-/images/dynamic-content/csp-management/aktiv-setzen.png?fit=max&auto=format&n=BJVIQhqr6cd9g2F-&q=85&s=43847e28ac9ac338f1d962fbb1e63d93" alt="Checkbox for setting active" width="1080" height="643" data-path="images/dynamic-content/csp-management/aktiv-setzen.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/BJVIQhqr6cd9g2F-/images/dynamic-content/csp-management/speichern.png?fit=max&auto=format&n=BJVIQhqr6cd9g2F-&q=85&s=a06798f63110d86a3c1b4c76656902ea" alt="Save CSP header" width="1080" height="643" data-path="images/dynamic-content/csp-management/speichern.png" />
        </Frame>
      </Column>
    </Columns>

    <Check>
      The CSP header has been created, set to active, and saved.
    </Check>
  </Step>
</Steps>

## Related Topics

<CardGroup cols={2}>
  <Card title="General Navigation" icon="compass" href="/docs/en/dynamic-content/user-guide/generelle-navigation">
    Orientation in the CMS and an overview of all tabs.
  </Card>

  <Card title="Switch Website" icon="toggle-on" href="/docs/en/dynamic-content/user-guide/webseite-umstellen">
    Switch between websites.
  </Card>

  <Card title="Redirects" icon="route" href="/docs/en/dynamic-content/user-guide/weiterleitungen">
    Set up URL redirects.
  </Card>
</CardGroup>
