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

이 문서는에서 체크아웃 페이지를 보는 동안 Adobe Commerce 2.4.7 문제에 대한 설명 및 수정 사항을 제공합니다 CSP restricted mode, " 사용​ 다음 콘텐츠 보안 정책 지시문을 위반하므로 인라인 스크립트 실행을 거부했습니다. "script-src …" 브라우저 콘솔 로그에 오류 메시지가 표시됩니다.

영향을 받는 제품 및 버전

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 이상에서는 CSP 다음에서 구성됨: restrict-mode, 기본적으로 상점 및 관리 영역, 의 결제 페이지에 대해 report-only 다른 모든 페이지의 모드.
해당 CSP 헤더에 다음 항목이 포함되지 않음 unsafe-inline 키워드 내부 script-src 지급 페이지에 대한 지시문입니다. 또한, 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 머리글입니다.

    사용 generateNonce 의 함수 Magento\Csp\Helper\CspNonceProvider 을(를) 가져오려면 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 체크아웃 페이지, "다음 콘텐츠 보안 정책 지시문을 위반하므로 인라인 스크립트 실행을 거부했습니다. "script-src …" 브라우저 콘솔 로그에 오류 메시지가 표시됩니다.

재현 단계:

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

예상 결과:

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

실제 결과:

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

원인

Adobe Commerce 및 Magento Open Source 버전 2.4.7 이상에서는 CSP 다음에서 구성됨: restrict-mode, 기본적으로 상점 및 관리 영역, 의 결제 페이지에 대해 report-only 다른 모든 페이지의 모드.
해당 CSP 헤더에 다음 항목이 포함되지 않음 unsafe-inline 키워드 내부 script-src 지급 페이지에 대한 지시문입니다. 또한, 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 머리글입니다.

    사용 generateNonce 의 함수 Magento\Csp\Helper\CspNonceProvider 을(를) 가져오려면 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 파일.

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

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

재현 단계:

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

예상 결과:

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

실제 결과:

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

원인

Adobe Commerce 및 Magento Open Source 버전 2.4.7 이상에서는 CSP 다음에서 구성됨: restrict-mode, 기본적으로 상점 및 관리 영역, 의 결제 페이지에 대해 report-only 다른 모든 페이지의 모드.
해당 CSP 헤더에 다음 항목이 포함되지 않음 unsafe-inline 키워드 내부 script-src 지급 페이지에 대한 지시문입니다. 또한, 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 머리글입니다.

    사용 generateNonce 의 함수 Magento\Csp\Helper\CspNonceProvider 을(를) 가져오려면 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