CSP 제한 모드에서 storefront 체크아웃 페이지 문제 해결

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

주제:

작성 대상:

개발자

이 문서에서는 CSP restricted mode 에서 체크아웃 페이지를 보는 동안 브라우저 콘솔 로그에 있는 "script-src …" 오류 메시지를 위반하기 때문에 " 인라인 스크립트 실행을 거부함" 오류 메시지와 함께 Adobe Commerce 2.4.7 문제에 대한 설명 및 수정 사항을 제공합니다.

영향을 받는 제품 및 버전

Adobe Commerce on cloud infrastructure, Adobe Commerce 온프레미스 및 Magento Open Source:

2.4.7
2.4.6-pX
2.4.5-pX
2.4.4-pX

문제 - Storefront 체크아웃 페이지가 손상되었거나 로드할 수 없음

Storefront 체크아웃 페이지가 손상되었거나 로드할 수 없습니다. "다음 콘텐츠 보안 정책 지시문을 위반하므로 인라인 스크립트 실행이 거부됨: 브라우저 콘솔 로그에 "script-src …" 오류 메시지가 표시됩니다.

재현 단계:

가게 앞쪽으로 가보세요
장바구니에 제품을 추가하고 체크아웃을 진행합니다.

예상 결과:

체크아웃 페이지가 정상적으로 완전히 로드됩니다.

실제 결과:

체크아웃 페이지가 비어 있거나 구성 요소가 없습니다. 다음 JS 오류가 브라우저 콘솔 로그에 표시됩니다. "다음 콘텐츠 보안 정책 지시문 "script-src …"을 위반하므로 인라인 스크립트 실행을 거부했습니다."

원인

Adobe Commerce 및 Magento Open Source 버전 2.4.7 이상에서는 기본적으로 상점 및 관리 영역의 결제 페이지에 대해 restrict-mode에 CSP 이(가) 구성되어 있고 다른 모든 페이지에 대해서는 report-only 모드에 이(가) 구성되어 있습니다.
해당 CSP 헤더에 결제 페이지의 script-src 지시문 내에 unsafe-inline 키워드가 없습니다. 또한 whitelisted개의 인라인 스크립트만 허용됩니다.

솔루션

CSP(으)로 인해 특정 스크립트가 차단되어 사용자에게 브라우저 오류가 표시될 수 있습니다.

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

이 문제를 해결하려면 다음 중 하나를 수행해야 합니다:

SecureHtmlRenderer 클래스를 사용하여 차단된 스크립트를 Whitelist합니다.

스크립트를 실행하려면 CSPNonceProvider 클래스를 사용합니다.
Adobe Commerce 및 Magento Open Source 2.4.7 이상에는 각 요청에 대해 고유한 nonce 문자열을 쉽게 생성할 수 있도록 Content Security Policy (CSP) nonce 공급자가 포함됩니다. 그런 다음 이 nonce 문자열이 CSP 헤더에 연결됩니다.

Magento\Csp\Helper\CspNonceProvider에서 generateNonce 함수를 사용하여 nonce 문자열을 가져옵니다.

code language-php

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(); } }`

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();
    }
}

모듈의 csp_whitelist.xml 파일에 hash을(를) 추가합니다.

문제 - 결제 방법이 없거나 작동하지 않음

결제 방법이 없거나 storefront 체크아웃 페이지에서 작동하지 않습니다. "다음 콘텐츠 보안 정책 지시문 "script-src …" 오류 메시지를 위반하므로 인라인 스크립트 실행이 거부됨.

재현 단계:

가게 앞쪽으로 가보세요
장바구니에 제품을 추가하고 체크아웃을 진행합니다.
결제 방법을 선택합니다.

예상 결과:

결제 방법을 선택하고 주문을 진행할 수 있습니다.

실제 결과:

결제 방법이 없거나 작동하지 않습니다. 다음 JS 오류가 브라우저 콘솔 로그에 표시됩니다. "다음 콘텐츠 보안 정책 지시문 "script-src …"을 위반하므로 인라인 스크립트 실행을 거부했습니다."

원인

솔루션

CSP(으)로 인해 특정 스크립트가 차단되어 사용자에게 브라우저 오류가 표시될 수 있습니다.

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

이 문제를 해결하려면 다음 중 하나를 수행해야 합니다:

SecureHtmlRenderer 클래스를 사용하여 차단된 스크립트를 Whitelist합니다.

Magento\Csp\Helper\CspNonceProvider에서 generateNonce 함수를 사용하여 nonce 문자열을 가져옵니다.

code language-php

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(); } }`

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();
    }
}

모듈의 csp_whitelist.xml 파일에 hash을(를) 추가합니다.

문제 - 고객이 주문할 수 없음

고객은 브라우저 콘솔 로그에 "script-src …" 오류 메시지를 위반하기 때문에 " 인라인 스크립트 실행을 거부함"을 사용하여 주문을 할 수 없습니다.

재현 단계:

가게 앞쪽으로 가보세요
장바구니에 제품을 추가하고 체크아웃을 진행합니다.
결제 방법을 선택합니다.
주문 을 클릭하세요.

예상 결과:

정상적으로 주문할 수 있습니다.

실제 결과:

주문을 할 수 없습니다. 다음 JS 오류가 브라우저 콘솔 로그에 표시됩니다. "다음 콘텐츠 보안 정책 지시문 "script-src …"을 위반하므로 인라인 스크립트 실행을 거부했습니다."

원인

솔루션

CSP(으)로 인해 특정 스크립트가 차단되어 사용자에게 브라우저 오류가 표시될 수 있습니다.

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

이 문제를 해결하려면 다음 중 하나를 수행해야 합니다:

SecureHtmlRenderer 클래스를 사용하여 차단된 스크립트를 Whitelist합니다.

Magento\Csp\Helper\CspNonceProvider에서 generateNonce 함수를 사용하여 nonce 문자열을 가져옵니다.

code language-php

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(); } }`

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();
    }
}

모듈의 csp_whitelist.xml 파일에 hash을(를) 추가합니다.

recommendation-more-help

8bd06ef0-b3d5-4137-b74e-d7b00485808a