---
schema_version: "1"
id: da1adf596208e15792302373f64ae336273d90ca54ccf6054347f94545f1304f
title: CSP and Lightning Locker Design Considerations
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/networks_security_csp_tips.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.networks_security_csp_tips.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: a1ff0f61b63b576dc69a6a47e1eb3797e892e92c9867ec1cd1f380a2ab55b261
description: Whether you’re an administrator, content manager, or developer, be aware of the impact of the different security levels on your Experience Builder site. This impact can be far-ranging and unexpected.
products:
  - Experiences
release: "264"
---
# CSP and Lightning Locker Design Considerations

Whether you’re an administrator, content manager, or developer, be aware of the impact of the different security levels on your Experience Builder site. This impact can be far-ranging and unexpected.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: Salesforce Classic and Lightning Experience</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: <strong>Essentials</strong>, <strong>Enterprise</strong>, <strong>Performance</strong>, <strong>Unlimited</strong>, and <strong>Developer</strong> Editions</td></tr></tbody></table>

![Tip](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_tip.png)

Tip For extra error guidance when developing your Experience Builder site, we recommend using Google Chrome. After you set the CSP security level for your site, test it in other browsers to make sure that your customers have a good experience.

In addition to error messages and feedback, you can use the Developer Console to help identify any directive issues or CSP violations.

## What Does the Strict CSP Level Affect?

Strict CSP is the default, maximum security level for Experience Builder sites. This level of security can impact many aspects of your site, especially resources that make calls to external sources, such as:

- Rich Content Editor
- HTML Editor
- Third-party components
- Custom components
- `head` markup
- CMS Connect content

In addition, Strict CSP mitigates the risk of cross-site scripting (XSS) and other content injection attacks by disallowing inline scripts.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_note.png)

Note We recommend that you update your third-party libraries to modern versions that don’t depend on the `unsafe-inline` keyword.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:16.260162601626018%">
          <col style="width:27.80487804878049%">
          <col style="width:27.967479674796753%">
          <col style="width:27.967479674796753%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d39010e122">Impact</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d39010e125">Description</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d39010e128">Example</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d39010e131">Recommendation</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Impact" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e122 "><strong>Blocks inline scripts</strong></td>
            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e125 ">All inline scripts, including inline <code>&lt;script&gt;</code> elements
              and inline event handlers, are blocked from running on your site. Common services
              such as Google Tag Manager can’t work properly when these scripts are blocked. </td>
            <td data-label="Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e128 ">You include an inline script in the <code>head</code> markup to write
              messages to the console log for testing purposes, for example,
              <code>&lt;script&gt;console.log(“blocked”);&lt;/script&gt;</code>. Because all
              inline scripts are blocked, messages aren’t written to the log.
            </td>
            <td data-label="Recommendation" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e131 ">Replace inline scripts in your site and instead use a static resource that’s
              uploaded as a relative URL, or avoid inline scripts entirely.</td>
          </tr>
          <tr class="">
            <td data-label="Impact" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e122 "><strong>Blocks remote JavaScript
                resources
                unless allowlisted</strong></td>
            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e125 ">All requests for remote JavaScript files are blocked from
              executing,
              unless you explicitly allow those resources..</td>
            <td data-label="Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e128 ">You want to use the popular D3.js library to create a scatterplot. But because
              all remote JavaScript files are blocked, nothing is drawn.</td>
            <td data-label="Recommendation" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e131 ">Upload all JavaScript libraries to your org as static resources, and then add
              the static resource to your component. After the library is loaded from the static
              resource, you can use it as
              normal. Or you
              can host the asset as a static resource and refer to it with a relative
              URL
            </td>
          </tr>
          <tr class="">
            <td data-label="Impact" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e122 "><strong>Blocks non-script remote resources unless allowlisted</strong></td>
            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e125 ">All requests for non-script resources to external servers are prevented, unless
              you explicitly allow those servers.</td>
            <td data-label="Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e128 ">You decide to host your company logo on an external server and reference it in
              a component. However, the image isn’t shown.</td>
            <td data-label="Recommendation" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e131 ">Host your resources through Salesforce using component functionality, such as
              the Rich Content Editor. Or you can host the asset as a static resource and refer to
              it with a relative URL.</td>
          </tr>
          <tr class="">
            <td data-label="Impact" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e122 "><strong>Isolates third-party components and custom code when Lightning Locker is on</strong></td>
            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e125 ">
              <p dir="ltr">Third-party components and custom code from different namespaces are
                prevented from interacting and accessing each other’s DOM. These resources can
                only access supported APIs.</p>
              <p style="margin-bottom:0;" dir="ltr">If you inadvertently allow a malicious domain, isolated resources are
                unable to send data to that domain.</p>
            </td>
            <td data-label="Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e128 ">By mistake, you use a malicious component on the same page that you’re exposing
              internal Salesforce records through a Salesforce out-of-the-box component. Because
              the components are isolated, the malicious component is unable to access those
              records.</td>
            <td data-label="Recommendation" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e131 ">
              <p>Follow best practices for using third-party components in your site and custom
                code in your <code>head</code> markup. </p>
              <p style="margin-bottom:0;">If you have trouble getting
                third-party components or custom code to work with Lightning Locker, see <a href="https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_security_limitations.htm" target="_blank">Resolve Lightning Locker Conflicts in Experience
                  Builder</a> in the <cite>Experience Cloud Developer Guide</cite>.</p>
            </td>
          </tr>
          <tr class="">
            <td data-label="Impact" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e122 "><strong>Allows third-party components and custom code to communicate when Lightning
                Locker is off</strong></td>
            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e125 ">
              <p>Third-party components and custom code from different </p>
              <p dir="ltr">Third-party
                components and custom code from different namespaces can interact and access each
                other’s DOM. These resources can also use unpublished frameworks. And resources in
                an open browser tab are exposed, permitting third-party components and custom code
                to access and edit them.</p>
              <p style="margin-bottom:0;" dir="ltr">Partners and developers of managed
                packages on AppExchange must choose whether they want their components to be
                available when Lightning Locker is turned off.</p>
            </td>
            <td data-label="Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e128 ">You want to use third-party components that automatically inject additional
              third-party JavaScript into the page, including the site’s<code>head</code>
              markup.</td>
            <td data-label="Recommendation" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e131 ">Turning off Lightning Locker can potentially cause security flaws in your site
              and prevent third-party Aura components from being available at design time and
              rendering at runtime. Disable Lightning Locker only as a last resort.</td>
          </tr>
          <tr class="">
            <td data-label="Impact" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e122 ">&nbsp;</td>
            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e125 ">&nbsp;</td>
            <td data-label="Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e128 ">&nbsp;</td>
            <td data-label="Recommendation" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e131 ">&nbsp;</td>
          </tr>
        </tbody>
      </table>

## What Does the Relaxed CSP Level Affect?

To use resources from third parties such as Google, you can choose the Relaxed CSP level. But make sure that you understand the ramifications of a less secure, relaxed CSP environment on your site.

In this state, you can optionally disable Lightning Locker when custom functionality doesn’t work properly. But we strongly advise against turning off Lightning Locker. For information on Lightning Locker workarounds, see [Resolve Lightning Locker Conflicts in Experience Builder](https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_security_limitations.htm) in the Experience Cloud Developer Guide.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:20.32520325203252%">
          <col style="width:42.886178861788615%">
          <col style="width:36.78861788617886%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d39010e260">Impact</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d39010e263">Description</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d39010e266">Example</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Impact" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e260 ">
              <strong>Allows inline scripts</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e263 ">All inline scripts are allowed to run in your site, including scripts that use
              <code>eval()</code>. These scripts are allowed because
              many common services such as Google Tag Manager require them to work properly.
              However, inline scripts are a common source of XSS attacks.
            </td>

            <td data-label="Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e266 ">You include in your <code>head</code> markup an inline
              script to log every user action on a page for marketing-related analysis. Because
              inline scripts are allowed, analytics are logged successfully.</td>

          </tr>
          <tr class="">
            <td data-label="Impact" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e260 ">
              <strong>Allows remote JavaScript and non-script resources when
                allowlisted</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e263 ">All requests to external servers for JavaScript files and non-script resources
              are allowed when you identify the servers. Client-side code can also make requests
              to your site.</td>

            <td data-label="Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e266 ">You use a script that pulls in your company’s blog posts. For the content to
              show, allow the script for the site using the Trusted Sites for Scripts area in
              Experience Builder, and allow the non-script content host in Trusted URLs in
              Setup.</td>

          </tr>
          <tr class="">
            <td data-label="Impact" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e260 ">
              <strong>Isolates third-party components and custom code when Lightning Locker is
                on</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e263 ">
              <p>Third-party components and custom code from different namespaces are prevented
                from interacting and accessing each other’s DOM. These resources can only access
                supported APIs.</p>
              <p style="margin-bottom:0;">If you inadvertently allow a malicious domain, isolated resources
                are unable to send data to that domain.</p>
            </td>

            <td data-label="Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e266 ">By mistake, you use a malicious component on the same page that you’re exposing
              internal Salesforce records through a Salesforce out-of-the-box component. Because
              the components are isolated, the malicious component is unable to access those
              records.</td>

          </tr>
          <tr class="">
            <td data-label="Impact" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e260 ">
              <strong>Allows third-party components and custom code to communicate when Lightning
                Locker is off</strong>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e263 ">
              <p>Third-party components and custom code from different namespaces can interact
                and access each other’s DOM. These resources can also use unpublished frameworks.
                And resources in an open browser tab are exposed, permitting third-party components
                and custom code to access and edit them.</p>
              <p style="margin-bottom:0;">Partners and developers of managed
                packages on AppExchange must choose whether they want their components to be
                available when Lightning Locker is turned off in the relaxed CSP
                environment.</p>
            </td>

            <td data-label="Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d39010e266 ">You want to use third-party components that automatically inject additional
              third-party JavaScript into the page, including the site’s<code>head</code> markup.</td>

          </tr>
        </tbody>
      </table>

#### See Also

- [_Experience Cloud Developer Guide:_ Using the Developer Console](https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/intro_devconsole.htm)
- [_Lightning Web Components Dev Guide:_ Determine Whether a JavaScript Library Is Locker Compliant](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/js_third_party_guidance)
- [_Lightning Aura Components Developer Guide:_ eval() Function is Limited by Lightning Locker](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/security_js_eval.htm)
- [_Lightning Web Components Dev Guide:_ Use Third-Party JavaScript Libraries](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.js_third_party_library)
- [_Lightning Aura Components Developer Guide:_ Using External JavaScript Libraries](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_libs_platform.htm#js_libs_platform)
- [_Experience Cloud Developer Guide:_ Enable Third-Party Components to Run When Lightning Locker Is Off](https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_security_components.htm)