文档CommerceCommerce KB

在CSP限制模式下对storefront结账页面进行故障排除

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主题：

创建对象：

  • 开发人员

本文针对​ CSP restricted mode ​中查看签出页面时出现的Adobe Commerce 2.4.7问题提供了说明和修复，其中显示“拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src …”浏览器控制台日志中的错误消息。

受影响的产品和版本

云基础架构上的Adobe Commerce、Adobe Commerce内部部署和Magento Open Source：

  • 2.4.7
  • 2.4.6像素
  • 2.4.5-pX
  • 2.4.4像素

问题 — Storefront结帐页面已损坏或无法加载

storefront checkout ​页面已损坏或无法加载，因为“Refused to execute inline script，因为它违反了以下内容安全策略指令：浏览器控制台日志中的“script-src …”错误消息。

重现步骤：

  1. 去店面。
  2. 将产品添加到购物车并继续结帐。

预期的结果：

签出页面会正常完全加载。

实际结果：

签出页面为空或缺少组件。 浏览器控制台日志中显示以下JS错误： “拒绝执行内联脚本，因为它违反了以下内容安全策略指令： "script-src …"

原因

在Adobe Commerce和Magento Open Source版本2.4.7及更高版本中，CSP ​默认配置为restrict-mode，适用于店面和管理区域中的付款页面，以及所有其他页面的report-only模式。
在付款页的script-src指令中，相应的​ CSP ​标题不包含unsafe-inline关键字。 此外，只允许使用whitelisted内联脚本。

解决方案

由于某些脚本因​ CSP ​而被阻止，用户可能会看到浏览器错误：

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src

要解决此问题，您必须：

  1. Whitelist使用SecureHtmlRenderer类阻止的脚本。

  2. 使用CSPNonceProvider类允许执行脚本。
    Adobe Commerce和Magento Open Source 2.4.7及更高版本包含一个​ Content Security Policy (CSP) nonce提供程序，以便为每个请求生成唯一的nonce字符串。 然后将这些nonce字符串附加到CSP标头。

    在Magento\Csp\Helper\CspNonceProvider中使用generateNonce函数获取nonce字符串。

    code language-php 
    use Magento\Csp\Helper\CspNonceProvider;

class MyClass
{

    /**
     * @var CspNonceProvider
     */
    private $cspNonceProvider;

    /**
     * @param CspNonceProvider $cspNonceProvider
     */
    public function __construct(CspNonceProvider $cspNonceProvider)
    {
        $this->cspNonceProvider = $cspNonceProvider
    }

    /**
     * Get CSP Nonce
     *
     * @return String
     */
    public function getNonce(): string
    {
        return $this->cspNonceProvider->generateNonce();
    }
}

  3. 将 hash添加到模块的csp_whitelist.xml文件。

问题 — 付款方法缺失或无法正常工作

storefront checkout ​页面上缺少付款方法或付款方法不起作用，带有“Refused to execute inline script，因为它违反了以下内容安全策略指令：浏览器控制台日志中的“script-src …”错误消息。

重现步骤：

  1. 去店面。
  2. 将产品添加到购物车并继续结帐。
  3. 选择付款方式。

预期的结果：

您可以选择付款方式并继续成功下单。

实际结果：

付款方式缺失或无法正常工作。 浏览器控制台日志中显示以下JS错误： “拒绝执行内联脚本，因为它违反了以下内容安全策略指令： "script-src …"

原因

在Adobe Commerce和Magento Open Source版本2.4.7及更高版本中，CSP ​默认配置为restrict-mode，适用于店面和管理区域中的付款页面，以及所有其他页面的report-only模式。
在付款页的script-src指令中，相应的​ CSP ​标题不包含unsafe-inline关键字。 此外，只允许使用whitelisted内联脚本。

解决方案

由于某些脚本因​ CSP ​而被阻止，用户可能会看到浏览器错误：

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src

要解决此问题，您必须：

  1. Whitelist使用SecureHtmlRenderer类阻止的脚本。

  2. 使用CSPNonceProvider类允许执行脚本。
    Adobe Commerce和Magento Open Source 2.4.7及更高版本包含一个​ Content Security Policy (CSP) nonce提供程序，以便为每个请求生成唯一的nonce字符串。 然后将这些nonce字符串附加到CSP标头。

    在Magento\Csp\Helper\CspNonceProvider中使用generateNonce函数获取nonce字符串。

    code language-php 
    use Magento\Csp\Helper\CspNonceProvider;

class MyClass
{

    /**
     * @var CspNonceProvider
     */
    private $cspNonceProvider;

    /**
     * @param CspNonceProvider $cspNonceProvider
     */
    public function __construct(CspNonceProvider $cspNonceProvider)
    {
        $this->cspNonceProvider = $cspNonceProvider
    }

    /**
     * Get CSP Nonce
     *
     * @return String
     */
    public function getNonce(): string
    {
        return $this->cspNonceProvider->generateNonce();
    }
}

  3. 将 hash添加到模块的csp_whitelist.xml文件。

问题 — 客户无法下订单

客户无法下订单，因为“Refused to execute inline script，因为它违反了以下内容安全策略指令：浏览器控制台日志中显示“script-src …”错误消息。

重现步骤：

  1. 去店面。
  2. 将产品添加到购物车并继续结帐。
  3. 选择付款方式。
  4. 单击​ 下单。

预期的结果：

您可以成功下订单。

实际结果：

你无法下订单。 浏览器控制台日志中显示以下JS错误： “拒绝执行内联脚本，因为它违反了以下内容安全策略指令： "script-src …"

原因

在Adobe Commerce和Magento Open Source版本2.4.7及更高版本中，CSP ​默认配置为restrict-mode，适用于店面和管理区域中的付款页面，以及所有其他页面的report-only模式。
在付款页的script-src指令中，相应的​ CSP ​标题不包含unsafe-inline关键字。 此外，只允许使用whitelisted内联脚本。

解决方案

由于某些脚本因​ CSP ​而被阻止，用户可能会看到浏览器错误：

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src

要解决此问题，您必须：

  1. Whitelist使用SecureHtmlRenderer类阻止的脚本。

  2. 使用CSPNonceProvider类允许执行脚本。
    Adobe Commerce和Magento Open Source 2.4.7及更高版本包含一个​ Content Security Policy (CSP) nonce提供程序，以便为每个请求生成唯一的nonce字符串。 然后将这些nonce字符串附加到CSP标头。

    在Magento\Csp\Helper\CspNonceProvider中使用generateNonce函数获取nonce字符串。

    code language-php 
    use Magento\Csp\Helper\CspNonceProvider;

class MyClass
{

    /**
     * @var CspNonceProvider
     */
    private $cspNonceProvider;

    /**
     * @param CspNonceProvider $cspNonceProvider
     */
    public function __construct(CspNonceProvider $cspNonceProvider)
    {
        $this->cspNonceProvider = $cspNonceProvider
    }

    /**
     * Get CSP Nonce
     *
     * @return String
     */
    public function getNonce(): string
    {
        return $this->cspNonceProvider->generateNonce();
    }
}

  3. 将 hash添加到模块的csp_whitelist.xml文件。

recommendation-more-help
8bd06ef0-b3d5-4137-b74e-d7b00485808a