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

이 문서에서는 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 …" 오류 메시지가 표시됩니다.

재현 단계:

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

예상 결과:

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

실제 결과:

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

원인

Adobe Commerce 및 Magento Open Source 버전 2.4.7 이상에서는 기본적으로 상점 및 관리 영역의 결제 페이지에 대해 restrict-modeCSP ​이(가) 구성되어 있고 다른 모든 페이지에 대해서는 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

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

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

  2. 스크립트를 실행하려면 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
    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. 모듈의 csp_whitelist.xml 파일에 hash을(를) 추가합니다.

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

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

재현 단계:

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

예상 결과:

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

실제 결과:

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

원인

Adobe Commerce 및 Magento Open Source 버전 2.4.7 이상에서는 기본적으로 상점 및 관리 영역의 결제 페이지에 대해 restrict-modeCSP ​이(가) 구성되어 있고 다른 모든 페이지에 대해서는 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

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

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

  2. 스크립트를 실행하려면 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
    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. 모듈의 csp_whitelist.xml 파일에 hash을(를) 추가합니다.

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

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

재현 단계:

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

예상 결과:

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

실제 결과:

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

원인

Adobe Commerce 및 Magento Open Source 버전 2.4.7 이상에서는 기본적으로 상점 및 관리 영역의 결제 페이지에 대해 restrict-modeCSP ​이(가) 구성되어 있고 다른 모든 페이지에 대해서는 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

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

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

  2. 스크립트를 실행하려면 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
    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. 모듈의 csp_whitelist.xml 파일에 hash을(를) 추가합니다.

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