开发安全站点： CSP、LWS 和 闪电 柜子

光环 和轻水堆站点 在 Experience Cloud 中 使用内容安全策略 （CSP） 和 Lightning Web 安全 （LWS） 或 Lightning Locker 来保护 这 网站免受恶意攻击和自定义代码漏洞。潜在影响的因素 当您开发自己的自定义组件时，使用第三方组件时，这些安全功能， 或在标记中添加自定义代码。

head

云解决方案提供商

CSP 是一种 W3C 标准，用于控制可在页面上加载的内容源。 CSP 规则在页面级别工作，适用于所有第三方组件和自定义代码。由 默认情况下，框架的标头仅允许从安全 （HTTPS） URL 加载内容 并禁止来自 JavaScript 的 XHR 请求。

Experience Builder 提供了不同级别的 CSP 脚本安全性。CSP 级别 特定于每个站点。

闪电储物柜 和 Lightning Web Security

这 Lightning Locker 架构层通过隔离单个 Lightning 来增强安全性 组件命名空间，并强制执行编码最佳实践。闪电 Locker 一直是 Lightning 组件和 Aura 的默认安全架构 体验中的站点 云。

LWS 旨在使您的组件更容易使用安全编码实践和 旨在取代闪电储物柜。与 Lightning Locker 一样，LWS 的目标是防止 Lightning 组件干扰或访问属于平台代码的数据 或来自其他命名空间的组件。但是，Lightning Web Security 的架构 使用不同的方法保护 Lightning Web 组件。

LWS 如何在组织和站点级别应用

管理员可以在组织级别启用 LWS 以在整个组织内使用，而不是 Lightning 通过将 Lightning Web Security 用于 Lightning Web 组件和 Aura 组件的 Locker 在“设置”的“会话设置”中设置。

此组织级别设置会影响 Aura 站点，因为在组织中启用 LWS 时，LWS 在站点级别替换 Lightning Locker。然后，如果您禁用 Lightning Locker 在 Experience Builder 中为 Aura 站点进行设置时，您实际上是在禁用 LWS。

LWR 站点有自己的 LWS 实例，因此 LWS 的组织设置对 LWR 没有影响 网站。如果在 LWR 站点中禁用 Lightning Locker，则该站点的 LWS 实例为 禁用，即使在组织中启用了 LWS 也是如此。

注意

默认情况下，会为所有新的Experience Builder站点启用严格CSP，这意味着 Lightning Locker 或 LWS 也已启用。要访问 Lightning Locker 设置 Experience Builder，选择“轻松的 CSP”。

对于 B2B 商店和 B2C 商店 LWR 模板 在 Commerce Cloud 中，默认情况下不启用 LWS。

下表总结了组织级别设置和站点级别设置在 Aura 或 LWR 站点。

Experience Cloud 站点框架网站级设置组织级别设置现场使用的 LWS 或储物柜
光环上上上
上检查上
检查上闪电储物柜
检查检查LWS系列
轻水堆上上上
上检查上
检查上LWS（站点的实例）
检查检查LWS（站点的实例）
  • 解决 Aura 站点中的 Lightning Locker 冲突 默认情况下，Experience Cloud 中的所有新 Aura
    站点都启用了 Lightning Locker。但是，有时，由于与 Lightning Locker 发生冲突，页面上的第三方组件或标记中的自定义代码无法按预期工作。在这种情况下，Salesforce 建议使用此处描述的解决方法之一。head
  • 允许第三方组件在 Lightning Locker 关闭
    时运行 如果您在 Experience Builder 站点中关闭 Lightning Locker，则必须将从托管包安装的任何第三方组件配置为在设计时可用并在运行时呈现。
  • 示例：Aura Sites
    中的 Adobe Analytics 和 Lightning Locker 由于 Adobe Analytics 会与 Aura 站点中的组件进行交互，因此 Lightning Locker 可能会产生意想不到的结果。建议的解决方法是在标记中使用 JavaScript 自定义事件来隔离 Adobe Analytics。然后，Adobe Analytics 可以与组件进行交互，而无需负责直接加载或引用该资源。head

解决 Lightning Locker 冲突 光环 网站

默认情况下，Lightning Locker 为所有新 光环 体验中的站点 云。但是，偶尔会有第三方组件在页面上或自定义 由于以下原因，标记中的代码无法按预期工作 与 Lightning Locker 冲突。在这种情况下，Salesforce 建议使用 此处介绍的解决方法。

head

使用 JavaScript 自定义事件

Lightning Locker 可防止第三方组件和自定义代码与 来自其他命名空间的资源，但不来自标记的资源。此限制意味着您的标记可以 包含绕过 Lightning Locker 并引入安全漏洞的自定义代码。headhead

要解决此限制，请隔离您的第三方 Aura 和 Lightning Web 组件，并 使用 构造函数的自定义代码 您的标记。第三方组件和自定义代码 然后，可以与资源交互，而无需负责加载或引用 该资源。CustomEventhead

必须通过事件传递到侦听器的任何数据都将在属性中传递，该属性是在初始化 事件。该属性映射到 dataLayer。自定义事件 然后，被分派给任何扩展的资源。有关使用自定义事件的示例，请参阅 Adobe Analytics 和 Lightning Locker。detaildetailheadEventTarget

警告

请注意使用 JavaScript 构造函数传递的数据，并确保使用量 安全。网页上运行的任何 JavaScript，包括任何第三方 App Exchange 您正在使用的组件可能会侦听您的事件名称并读取此内容 数据。CustomEvent

将 Aura 组件设置为 API 39.0

如果您的第三方组件或自定义代码未与 Aura 组件交互，则 预期，您可以将 Aura 组件设置为 Salesforce API 版本 39.0，这将禁用 组件的 Lightning Locker。请参阅《Lightning Aura 组件开发人员指南》中的禁用组件的 Lightning Locker。

警告

禁用 Aura 组件的 Lightning Locker 可以引入安全性 缺陷进入您的网站，并阻止组件在设计时可用，或者 在运行时呈现。

为了保持一致性和易于调试，请避免使用父 Aura 组件和子组件 组件。因此，请勿使用任何设置为 API 的 Aura 组件 组件层次结构中的版本 39.0，例如组件中的组件或组件 这扩展了另一个组件。

如果在组织中启用了 LWS，则在组件中设置 API 版本 39.0 不会禁用 LWS 对于组件。但是，LWS 可能允许 Lightning 的组件的行为 Locker 块，无需禁用它。

关闭 Lightning Locker

警告

仅将此解决方法用作最后的手段。

如果您在站点中关闭 Lightning Locker，则会为站点的所有第三方组件和自定义代码禁用它。后果可能是 范围广泛且出乎意料，例如在您的网站中引入安全漏洞。如果 第三方组件尚未启用，无法在没有 Lightning Locker 的情况下工作，它可以防止这种情况发生 组件在设计时可用，在运行时呈现。当闪电 Locker 已关闭，来自不同命名空间的组件可以与每个命名空间交互并访问每个 其他的文档对象模型 （DOM） 以及有关自定义资源交互的限制 与您的网站是放松的。

有关禁用 Lightning Locker 的更多信息，请参阅 Salesforce 帮助中的在 Experience Builder 站点中选择安全级别。

注意

如果在组织中启用了 LWS，则当您在 Aura 站点中禁用 Lightning Locker 时，您 实际上在站点中禁用 LWS。如果在 LWR 站点中禁用 Lightning Locker，则 站点的 LWS 实例被禁用，即使在组织中启用了 LWS 也是如此。

允许第三方组件在 Lightning Locker 关闭时运行

如果您在 Experience Builder 站点中关闭了 Lightning Locker，则任何第三方 从托管包安装的组件必须配置为在设计时可用 并在运行时渲染。

您可以从 Relaxed CSP 安全性中关闭 Lightning LockerYou can off Lightning Locker from the Relaxed CSP security 水平。

如果 LWS 在组织中启用，当您在 Aura 站点中禁用 Lightning Locker 时，您实际上是禁用的 LWS 在站点中。如果在 LWR 站点中禁用 Lightning Locker，则该站点的 LWS 实例 被禁用，即使在组织中启用了 LWS。 LWR 站点可以包含第三方库 而不禁用 Lightning Locker 或 LWS。有关详细信息，请参阅集成 在 LWR 站点中使用特权脚本标记的第三方库 经验 云。

警告

关闭 Lightning Locker 可能会给您的网站带来安全漏洞。 禁用 Lightning Locker 仅作为最后的手段。

配置 第三方光环 要运行的组件 不带 Lightning Locker

对于第三方 Aura 组件，托管包开发人员必须为 元件。lightningcommunity:allowInRelaxedCSP

配置 第三方闪电网络 要运行的组件 不带储物柜

对于第三方 Lightning Web 组件，托管软件包开发人员必须在组件配置文件的标记中配置该值。lightningCommunity__RelaxedCSPcapability

示例：Adobe Analytics 和 Lightning Locker 光环 网站

因为 Adobe Analytics 会与 光环 站点，Lightning Locker可能会产生意想不到的结果。建议的解决方法是隔离 Adobe Analytics，在标记中使用 JavaScript 自定义事件。然后，Adobe Analytics 可以与组件进行交互，而无需 负责直接加载或引用该资源。

head

提示

LWR 站点可以使用不同的策略来包含分析。为 有关详细信息，请参阅集成第三方库 在 LWR 站点中使用特权脚本标记以获得体验 云。

将 Adobe Analytics 包含在 光环 网站

将 Adobe Analytics 脚本和适用的事件侦听器添加到 使用标记的网站标记。

headscript

<script> 
    document.addEventListener('analyticsEvent', function(e) {
        //add logic here to tell your dataLayer about the event
        //dataLayer.action = e.detail.action;
        //dataLayer.label = e.detail.label;
        //or map payload to an AA library event
    });
    
    document.addEventListener('analyticsViewChange', function() {
    });
</script>
<script src="full-url-to-your-adobe-script" async></script>

使用自定义事件

对于要与 Adobe Analytics 交互的任何组件，请使用 该物业。此属性传递数据 通过事件发送到侦听器，并映射到 In your Markup 侦听器。这 然后，可以将自定义事件分派给扩展 的任何资源。

detaildataLayerheadEventTarget

document.dispatchEvent(new CustomEvent('analyticsEvent', {'detail': {action: 'click', label: 'Submitted Case'}}));

警告

请注意使用 JavaScript 构造函数传递的数据，并确保使用量 安全。在页面上运行的任何 JavaScript（包括 Adobe Analytics）都可能 侦听您的事件名称并读取此数据。CustomEvent

为 Aura 组件实现其他事件

如果Adobe Analytics与Aura组件交互，则还必须实施and事件。forceCommunity:routeChangeaura:locationChange

forceCommunity:routeChange跟踪视图更改 在 Lightning 组件中 框架。

<aura:component implements="forceCommunity:availableForAllPageTypes">
    <aura:handler event="forceCommunity:routeChange" action="{!c.handleRouteChange}" />
</aura:component>
handleRouteChange : function(component, event, helper) {
    document.dispatchEvent(new Event('analyticsViewChange'));
}

aura:locationChange表示哈希部分 浏览器位置栏中的 URL 已被修改。但是，更改哈希部分 的位置 URL 很少使用，例如，在 选项卡组件。

分析和改进 Experience Builder 站点性能

Salesforce Page Optimizer 会分析您的网站并识别影响的问题 性能。使用这些信息来优化您的设计并提高网站性能 成员。Page Optimizer 是 Chrome 网上应用店提供的免费插件。下载和 像安装任何 Chrome 扩展程序一样安装插件。

适用于：Salesforce Classic（并非在所有组织中都可用）和 闪电体验
适用于：Enterprise、Performance、Unlimited 和 Developer Edition
用户权限 需要
要自定义 Experience Cloud 站点，请执行以下操作：成为网站成员并创建和设置 经验或成为站点的成员，并查看设置和配置，以及 该站点中的体验管理员、发布者或构建者
要发布 Experience Cloud 站点，请执行以下操作：成为网站成员并创建和设置 经验或成为网站的成员，并且是其中的体验管理员或发布者 网站

要下载页面优化器，请在 Experience Builder 中单击设置左侧边栏，然后 ，然后点按“高级”。

安装后，页面优化器将与您的其他 Chrome 扩展程序一起定位。

见解

要分析您的网站，请导航到已发布的网站，加载页面，然后启动 页面优化器。

“见解”选项卡 （1） 根据 Web 应用程序的最佳实践评估您的页面 使用 Lightning 框架开发。此选项卡显示总体性能分数 （3） 以及各种分析规则的个人分数 （5）。查看详细信息和建议 操作中，单击每个规则。如需更多工作空间，请单击弹出窗口 （2）。

“见解”选项卡在提供建议时是保守的。如需进一步的见解， 考虑查看瀑布图、时间线、图表、成本和 “操作”选项卡。

要删除收集的指标，请单击清除 （4）。执行一些用户 操作以收集新指标，然后重新打开页面优化器。例如 要收集赞某个 Feed 项的效果指标，请清除效果指标，然后点击赞、 并重新打开页面优化器。

瀑布

“瀑布”选项卡显示所有网络请求和性能检测数据。点击 用于在边栏中查看上下文信息的行。单击每行左侧的箭头 以展开每行的信息。

时间线

“时间轴”选项卡提供每个组件渲染生命周期的配置文件。时间线 视图针对显示 Lightning 框架指标进行了优化，因此更易于解释 比 Chrome DevTools 。

图表

“图表”选项卡显示客户使用时有关内存和组件的趋势信息 您的页面。

组件

“组件”选项卡显示页面上每个组件的生命周期计数。此视图 帮助您识别潜在的组件泄漏和意外的渲染行为。使用 “组件”选项卡以及“成本”选项卡，用于全面了解组件性能。

成本

“成本”选项卡显示每个组件忙于处理其逻辑的时间量。这 时间越短，性能越好。

行动

“操作”选项卡显示页面上执行的所有操作的列表及其 计时信息。

出口

将您的分析导出到文件中，以便与您的开发和支持团队共享。

提交反馈

我们希望收到您的来信。分享您的意见、问题、请求和任何问题 找到。提交反馈。


将 Pardot 跟踪添加到您的体验构建器站点

Pardot 可以跟踪访问者在网站上的互动和活动，即使访问者 尚未转换为潜在客户。启用跟踪后，使用 Pardot 查看以下方面的报告 访客参与度，并根据现场活动自动对潜在客户进行评分。

  1. 在 Pardot 中，导航到要跟踪的广告系列。
  2. 点击查看跟踪 代码， 并复制代码。
  3. 访问要向其添加跟踪的站点的 Experience Builder。
  4. 在“设置”|”高级，单击“编辑头部标记”，然后粘贴到 Pardot 中 跟踪代码。

Experience Builder 站点是单页应用程序 （SPA），因此当用户导航到 网站上的不同页面，仅重新加载内容区域，而不是整个页面。这 Pardot 脚本将网站的首次加载记录为页面视图。修改脚本以允许 页面内的应用内导航，以便在 Pardot 中更准确地捕获。

  1. 在“编辑标题标记”窗口中，修改 Pardot 跟踪代码，以便在页面中进行更改 状态将添加到会话历史记录中。下面是一个包含修改的示例代码片段 著名的。
<script type='text/javascript'>
piAId = '{{%pardot-id-for-your-org%}}'; //no change from OOTB code (format: 123456)
piCId = '';
piHostname = '{{%pardot-hostname-for-your-org%}}'; //no change from OOTB code (format: www.yourpardottrackerdomain.com)
    
(function() {
  //patching the history push state function to include calling
  // the async_load function that sends data to Pardot
  var pushState = history.pushState;
  history.pushState = function() {
    pushState.apply(history, arguments);
    async_load(); 
  };
    
    function async_load(){0
        var s = document.createElement('script'); s.type = 'text/javascript';
        s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + piHostname + '/pd.js';
        var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c);
    }
    if(window.attachEvent) 
    { 
        window.attachEvent('onload', async_load);
         //attach event listener for browser history changes
         // for browsers that support attachEvent
         window.attachEvent('onpopstate', async_load);
    }
    else 
    { 
        window.addEventListener('load', async_load, false); 
        //add eventlistener for browser history changes
        // for all other browsers
        window.addEventListener('popstate', async_load, false);
    }
})();
    
    
</script>

更新网站的内容安全策略 （CSP） 设置，使 head 标记以 预期。

  1. 访问 Experience Builder |设置 |安全性。
  2. 选择“宽松的 CSP：允许访问内联脚本”和“允许” 主机，然后在确认中单击“允许” 窗。
  3. 在“CSP 错误”下，可以看到被阻止的站点列表。单击要允许作为 Pardot 跟踪器的每个站点的允许 URL 域。

在 Pardot 和 Experience Cloud 之间成功集成后，您可以 根据访客的 Experience Cloud 网站准确跟踪页面浏览量并对潜在客户进行评分 导航。

将 CMS 与 你 Experience Builder 站点

内容管理系统 （CMS） 使您能够重用内容，而不是拥有 来复制它。使用 CMS，您可以将内容馈送到多个站点，还可以集中更新 它使它同时在任何地方保持最新状态。

Experience Cloud 提供两个 CMS 选项来满足您的需求。Salesforce CMS 内置于您的组织中 用于在组织中使用多个渠道创建、管理和组织内容。和CMS Connect 是一种工具，用于将第三方 CMS 中的内容嵌入到您的网站中。查看更多 有关这两个选项的信息，请参阅 CMS 开发人员 指南。

关于偏转的报告：偏转信号框架

事件是 当用户启动案例，然后查看解决其问题的偏转项时触发，并且 导致他们放弃此案。

lightningcommunity:deflectionSignal

例如，假设用户正在填写表单以创建客户案例，然后 在页面上看到一篇有用的文章。单击文章后，用户发现它很有帮助，并且 决定创建案例是不必要的。然后触发一个事件。活动内容包括 有关用户与文章交互的信息。用户的操作报告为 成功偏转，因为用户未创建案例。lightningcommunity:deflectionSignal

您可以通过目标对象 Community 的自定义报告类型来报告这些事件 案例偏转指标。信号在报告中显示为成功偏转、 挠度失败或潜在挠度。

注意

仅报告由经过身份验证的用户触发的事件。lightningcommunity:deflectionSignal

  • 案例创建偏转信号
    当用户偏离创建客户案例时，将在 Aura 站点中触发该事件。在用户查看文章或讨论后，系统会询问他们互动是否有帮助，以及他们是否想放弃他们的案例。lightningcommunity:deflectionSignal

案例创建偏转信号

活动是 在 Aura 站点中，当用户偏离创建客户案例时触发。在用户之后 查看文章或讨论时，系统会询问他们互动是否有帮助，以及他们是否 想放弃他们的案子。

lightningcommunity:deflectionSignal

注意

我们仅收集由身份验证触发的事件的数据 用户。lightningcommunity:deflectionSignal

您可以将 Case Deflection 组件配置为自动触发此事件 在Experience Builder中使用组件的“偏转度量度”属性。案例 挠度组件与联系支持表一起用于记录挠度 相互 作用。

属性

来自案例的偏转信号 挠度分量为 。sourceTypecaseCreateDeflectionModal

这是用户在主题中键入的内容 字段或案例创建表单的描述。是文章或讨论偏转项的 ID。sourcedestination

是 JavaScript 对象键值映射。 以下属性用于此类信号。payload

Payload 属性类型描述支持的值必填
deflectionAnswer字符串用户对第一个问题的回答，询问偏转项目是否 有益的。YESNOnull– 用户未投票不
confirmationAnswer字符串用户对第二个问题的回答，询问他们是否希望停止 创建案例。YESNOnull– 用户未投票不
state字符串弹出窗口在关闭之前最后处于的状态。MeasureDeflectionState– 用户 没有回答第一个问题ConfirmationQuestionState– 用户 没有回答第二个问题ConfirmationMessageState– 用户 回答了两个问题不
caseCreated布尔指示用户是否创建了案例。true– 用户创建了案例false– 用户未创建 箱不

例子

自定义 Aura 组件可以侦听此系统事件并根据需要进行处理。为 例如，如果用户发现内容没有帮助，则该组件可以启动另一个组件 过程。

下面是一个侦听系统事件的示例组件。

<aura:component implements="forceCommunity:availableForAllPageTypes">
    <aura:attribute name="message" type="String" required="false"/>
    <aura:handler event="lightningcommunity:deflectionSignal" action="{!c.handleSignal}"/>
    <lightning:formattedText value="{!v.message}"/>
</aura:component>

此客户端控制器示例处理系统事件并检查失败情况 挠度。也就是说，控制器会检查用户未找到 偏转项目很有帮助。

({
    handleSignal: function(component, event, helper) {
        var signal = event.getParams() || {},
            sourceType = signal.sourceType,
            payload = signal.payload;
        // Process case create deflection signals
        if (sourceType && sourceType === "caseCreateDeflectionModal") {
            if (payload && payload.deflectionAnswer === "NO") {
                component.set("v.message", "Sorry you didn't find that helpful.");
            }
            if (payload && payload.caseCreated === true) {
                component.set("v.message", "We Apologize For The Inconvenience. We'll get in touch with you shortly about your case.");
            }
        }
    }
})

自定义 Aura 组件充当外壳创建表单，外壳偏转组件可以 同时触发此事件。给定有效参数，将自动处理该事件，并 为报告而处理。此示例使用组件中的值触发一个事件 属性。lightningcommunity:deflectionSignal

fireCaseDeflectionSignal : function(component, shouldSubmitSourceTypeSignals) {
    var evt = $A.get("e.lightningcommunity:deflectionSignal");
    evt.setParams({
        sourceType: "caseCreateDeflectionModal",
        source: cmp.get("v.deflectionTerm"),
        destinationType: component.get("v.deflectionEntityType"),
        destination: component.get("v.deflectionEntityId"),
        payload: {
            deflectionAnswer: component.get("v.deflectionAnswer"),
            confirmationAnswer: component.get("v.confirmationAnswer"),
            state: component.get("v.deflectionState"),
            caseCreated: component.get("v.caseCreated")
        },
        shouldSubmitSourceTypeSignals: shouldSubmitSourceTypeSignals
    });
    evt.fire();
}

用户可以连续查看多个偏转项目，然后最终决定是否 创建或放弃案例。每个视图都会触发一个事件。如果要处理所有事件 作为单个批处理，设置为用户在其中的最终事件 放弃或创建案例。此示例根据 案例是否已创建。lightningcommunity:deflectionSignalshouldSubmitSourceTypeSignals=true

fireCaseCreatedSignal : function(component, caseCreated) {
    // Send all accumulated signals to the server to be processed
    var evt = $A.get("e.lightningcommunity:deflectionSignal");
    evt.setParams({
        sourceType: "caseCreateDeflectionModal",
        payload: {
            caseCreated: caseCreated
        },
        shouldSubmitSourceTypeSignals: true
    });
    evt.fire();
}