설명서

Adobe Commerce: CSP(콘텐츠 보안 정책) 제한 모드의 체크아웃 페이지에서 인라인 JavaScript 문제

Last update: Mon Sep 30 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

이 문서에서는 CSP 제한 모드 를 사용할 때 체크아웃 중에 Adobe Commerce 2.4.7에서 Adobe Commerce 관리자 및 Google 태그 관리자를 통해 추가된 사용자 지정 JavaScript에서 발생하는 문제에 대한 자세한 설명과 해결 방법을 제공합니다. 특히 브라우저 콘솔 로그에 표시되는 다음 콘텐츠 보안 정책 지침을 위반하기 때문에 인라인 스크립트 실행이 거부됨 ​오류 메시지를 해결합니다. 이 오류는 허가되지 않은 스크립트 실행을 방지하여 보안을 강화하도록 설계된 엄격한 CSP 설정으로 인해 인라인 스크립트가 차단되었음을 나타냅니다.

Adobe Commerce 2.4.7부터 CSP는 상점 및 관리 영역의 결제 페이지에 대해 기본적으로 제한 모드 에서 작동하도록 구성되었습니다. 다른 모든 페이지의 경우 보고서 전용 모드에서 작동합니다. 이 개선 사항을 위해서는 서드파티 서비스 또는 확장과의 사용자 정의 통합을 포함하여 모든 JavaScript을 화이트리스트에 추가해야 합니다. 사용자 지정 JavaScript을 화이트리스트에 추가하지 않으면 브라우저가 관리자 및 상점 전면 영역의 체크아웃 및 결제 페이지에서 이러한 스크립트의 실행을 차단합니다.

이 문서에 제공된 솔루션은 Commerce 관리자의 디자인 구성을 통해 추가된 Google Tag Manager(GTM) 인라인 JavaScript 또는 JavaScript 관련 문제 해결로 제한되지 않습니다. 인라인 JavaScript이 Commerce 코드에 추가된 다른 시나리오에도 적용할 수 있습니다. 여기에는 템플릿, 모듈 또는 Adobe Commerce 생태계의 다른 부분에 직접 포함된 사용자 지정 스크립트가 포함됩니다. 요약된 단계에 따라 모든 인라인 스크립트를 올바르게 허용 목록에 추가하고 실행할 수 있도록 하여 CSP 제한을 준수하면서 사용자 지정 코드의 기능을 유지할 수 있습니다.

참고: 콘텐츠 보안 정책 Adobe Commerce 설명서에 설명된 방법을 통해 새 JavaScript을 도입하는 것이 좋습니다. 이러한 방법을 사용하면 스크립트가 CSP 지침을 준수하여 Commerce 사이트의 보안을 강화할 수 있습니다. 적절한 임시 또는 해시 속성과 함께 외부 스크립트를 사용하는 것과 같은 스크립트 포함에 대한 모범 사례를 준수하면 보안 취약점의 위험을 최소화하고 보다 원활하고 안전한 사용자 경험을 보장할 수 있습니다.

설명 description

환경 및 재현 단계에 대한 자세한 내용을 검토하십시오.

환경

Adobe Commerce on cloud infrastructure 및 Adobe Commerce 온프레미스:

  • 2.4.7 이상
  • 2.4.6-pX
  • 2.4.5-pX
  • 2.4.4-pX

문제/증상

다음은 CSP 제한으로 인해 체크아웃 및 결제 페이지에서 스크립트 실행이 차단되는 경우의 일반적인 문제 및 해결 방법 목록입니다.

  • 인라인 JavaScript이 있는 GTM HTML 태그
  • 테마 구성의 인라인 JS

인라인 JavaScript이 있는 GTM HTML 태그

Google Tag Manager에 구성된 사용자 지정 HTML 태그의 JavaScript이 상점 첫 체크아웃 또는 결제 페이지에서 제대로 실행되지 않습니다.

재현 단계

  1. 인라인 Google이 포함된 사용자 지정 HTML 태그로 JavaScript 태그 관리자를 구성합니다.
  2. Google Tag Manager와 Adobe Commerce 통합. 단계는 Adobe Commerce 머천다이징 및 프로모션 안내서의 Google Analytics 계정 구성을 참조하십시오.
  3. 장바구니에 제품을 추가하고 체크아웃을 진행합니다.
  4. 지원되는 모든 브라우저에서 Developer Console을 엽니다.

예상 결과

사용자 지정 JavaScript과 관련된 오류가 콘솔에 표시되지 않고 스크립트가 성공적으로 실행됩니다.

실제 결과

오류 해당 해시, 임시 항목 또는 'unsafe-inline'이 콘텐츠 보안 정책의 script-src 지시문에 표시되지 않기 때문에 스크립트 실행을 거부했습니다. 가 콘솔에 있고 스크립트가 실행되지 않습니다.

참고: 정확한 오류 메시지는 브라우저에 따라 다를 수 있지만, 일반적으로 스크립트가 CSP에 의해 차단되었음을 나타냅니다. 이러한 메시지는 현재 CSP 설정으로 인해 스크립트를 실행할 수 없음을 강조 표시합니다.

원인

Google Tag Manager 사용자 지정 HTML 태그의 JavaScript은 Google Tag Manager 자체에서 상점 앞에 삽입됩니다. 따라서 이 스크립트는 CSP 설정에 사전 허용 목록에 추가되지 않으며 이후 브라우저에서 실행되지 않습니다. 이는 CSP가 명시적으로 허용되지 않는 인라인 스크립트의 실행을 제한하여 보안을 강화하지만 사용자 지정 스크립트에 대한 추가 구성이 필요하기 때문에 발생합니다.

솔루션

  • JavaScript 해시를 허용 목록에 추가합니다. 자세한 내용은 이 문서의 해결 방법 섹션을 참조하십시오.
  • Nonce로 Google Tag Manager 사용자 지정 HTML JavaScript에 서명합니다. 자세한 내용은 이 문서의 해결 방법 섹션을 참조하십시오.

테마 구성의 인라인 JS

이 문제는 인라인 JavaScript 문제가 있는 사용자 지정 HTML 태그와 매우 유사합니다. 차이점은 Google Tag Manager 관리자의 JavaScript을 추가하는 대신 사용 가능한 범위 중 하나에 대한 디자인 구성 페이지의 Adobe Commerce 관리자에 스크립트가 추가된다는 것입니다. 이 방법을 사용하면 인라인 HTML 코드 조각, JavaScript 또는 스타일시트를 테마의 머리글이나 바닥글에 추가할 수 있습니다. 다른 인라인 JavaScript과 마찬가지로 체크아웃 페이지에서 화이트리스트를 실행해야 합니다.

재현 단계

  1. 인라인 JavaScript을 포함하도록 디자인 구성에서 HTML 헤드 또는 바닥글을 구성하십시오.
  2. 장바구니에 제품을 추가하고 체크아웃을 진행합니다.
  3. 지원되는 모든 브라우저에서 Developer Console을 엽니다.

예상 결과

사용자 지정 JavaScript과 관련된 오류가 콘솔에 표시되지 않고 스크립트가 성공적으로 실행됩니다.

실제 결과

오류 해당 해시, 임시 항목 또는 'unsafe-inline'이 콘텐츠 보안 정책의 script-src 지시문에 표시되지 않기 때문에 스크립트 실행을 거부했습니다. 가 콘솔에 있고 스크립트가 실행되지 않습니다.

참고: 정확한 오류 메시지는 브라우저에 따라 다를 수 있지만, 일반적으로 스크립트가 CSP에 의해 차단되고 있음을 나타냅니다. 이러한 메시지는 현재 CSP 설정으로 인해 스크립트를 실행할 수 없음을 강조 표시합니다.

원인

디자인 구성의 HTML 헤드에 있는 스크립트와 스타일 시트 및 바닥글 섹션에 있는 기타 HTML은 혼합 입력 필드입니다. 이러한 필드에는 HTML, 스타일 시트 또는 JavaScript이 포함될 수 있습니다. 이러한 다이내믹 콘텐츠로 인해 해당 필드의 콘텐츠를 자동으로 해시하고 허용 목록에 추가하는 것은 불가능합니다. 따라서 JavaScript이 이러한 필드 중 하나에 추가되면 체크 아웃 페이지에서 실행하려면 수동으로 화이트리스트에 추가해야 합니다. CSP가 명시적으로 허용되지 않는 인라인 스크립트의 실행을 제한하므로 이 작업이 필요합니다. 이렇게 하면 보안이 강화되지만 사용자 지정 스크립트를 허용하려면 추가 구성이 필요합니다.

솔루션

JavaScript 해시를 허용 목록에 추가합니다. 자세한 내용은 이 문서의 해결 방법 섹션을 참조하십시오.

해결 방법 resolution

제공된 각 솔루션은 독립적으로 작동합니다. 특정 요구 사항을 가장 잘 충족하는 항목을 신중하게 평가하고 선택합니다. 구현 컨텍스트, 관련 스크립트의 특성 및 Adobe Commerce 사이트의 보안 요구 사항을 고려하여 적절한 솔루션을 결정하십시오.

JavaScript 해시를 허용 목록에 추가

이 문제를 해결하려면 CSP 설정에서 사용자 지정 인라인 JavaScripts를 허용 목록에 추가해야 합니다. 이렇게 하면 기본 보안 제한을 무시하고 스크립트를 실행할 수 있습니다.

GTM에서 DOM(Document Object Model)에 JavaScript을 삽입하기 전에 줄바꿈 및 주석 제거를 포함하여 해당 주석을 수정할 수 있으므로 GTM 사용자 지정 HTML 스크립트를 화이트리스트에 추가하는 것은 어렵습니다. 또한 Google의 알고리즘은 시간이 지남에 따라 예고 없이 변경될 수 있으며, 이로 인해 해시가 무효화될 수 있습니다. C단계에서 설명한 대로 Google Chrome에서 생성된 해시를 사용하고 화이트리스트에서 해시를 정기적으로 업데이트할 준비가 되어 있어야 합니다. 또는 보다 강력한 솔루션을 위해 Google Tag Manager 사용자 지정 HTML JavaScript에 Nonce를 사용하여 서명하는 것이 좋습니다.

  1. JavaScript 본문에 대한 해시를 생성합니다.

    참고: 해시를 성공적으로 생성하려면 스크립트를 해시 생성기에 제공해야 합니다. 대본을 주의 깊게 복사하는 것이 중요하다. 모든 줄 바꿈과 표시되지 않는 문자를 복사하는 동안 JavaScript의 열기 및 닫기 스크립트 태그를 제외합니다. 여기에는 여는 script 또는 다른 태그 뒤에 줄 바꿈이 있습니다(있는 경우). 해시가 스크립트와 정확히 일치하지 않으면 실행이 거부됩니다.

    1. Mac에서는 script 태그를 연 후 줄 바꿈을 포함하여 전체 스크립트 본문을 클립보드에 복사하고 터미널에서 다음 명령을 실행할 수 있습니다.

      php -r "echo base64_encode(hash('sha256', shell_exec('pbpaste'), true)) . PHP_EOL;"

      이 PHP 명령은 클립보드 내용을 가져와서 SHA-256 해시를 계산하고 해시를 바이너리로 변환한 다음 base64 형식으로 인코딩하여 최종적으로 결과를 출력합니다.

    2. 다양한 온라인 해시 생성기를 사용하여 스크립트에 필요한 해시를 생성할 수 있습니다.

      경고: 서드파티 온라인 서비스를 사용하여 CSP에 대한 해시를 생성하려는 경우 개인 정보 보호 문제를 고려해야 함을 이해하는 것이 중요합니다. 일부 서비스는 스크립트를 서버에 업로드하여 스크립트에 포함된 민감한 데이터를 해싱할 수 있습니다. 이러한 위험을 완화하려면 신뢰할 수 있는 도구 또는 스크립트를 사용하여 로컬로 해시를 생성하여 데이터를 안전하게 보호하고 보안을 유지하는 것이 좋습니다.

    3. Google Chrome 브라우저를 사용하여 Developer Console의 체크아웃 페이지에서 실행이 거부된 JavaScript에 대해 이미 생성된 해시를 획득할 수 있습니다.

      1. 차단된 JavaScript이 추가된 Google Chrome 브라우저를 사용하여 체크아웃 페이지로 이동합니다.

      2. Cmd+Option+J(macOS의 경우) 또는 Ctrl+Shift+J(Windows/Linux의 경우)을 눌러 Developer Console을 엽니다.

      3. 콘솔에서 CSP 오류 메시지를 찾습니다.

      4. 오류 메시지의 마지막 문장에서 차단된 스크립트에 대해 생성된 해시 코드를 찾습니다.

      5. 따옴표를 생략하고 sha256- 뒤에 코드를 복사합니다.

        참고: 차단된 JavaScript 파일이 여러 개 있으면 콘솔에 오류 메시지가 여러 개 표시됩니다. 화이트리스트에 추가해야 하는 정확한 JavaScript을 식별해야 합니다. 잘못된 스크립트를 실수로 화이트리스트에 추가하지 않도록 각 JavaScript 파일을 하나씩 추가하고 테스트하는 것이 좋습니다.

        인라인 JavaScript에 대한 해시를 생성하는 방법에 대한 자세한 내용은 Adobe Commerce 개발자 콘텐츠 보안 정책 안내서의 고급 CSP 구성을 참조하십시오.

  2. 스크립트 해시를 허용 목록에 추가합니다. 먼저 해시를 모듈의 csp_whitelist.xml 파일에 추가합니다.

    <개 값>

    < 값 id="my-script" type="hash" algorithm="sha256"> YOUR-HASH-1< /value>

    < /values>

    여기서 YOUR-HASH-1은 이전 단계에서 획득한 해시로 대체해야 합니다.
    여러 스크립트를 화이트리스트에 추가하려면 각 스크립트에 대해 < 값> < /value> 태그를 추가하십시오. 예:

    <개 값>

    < 값 id="my-script" type="hash" algorithm="sha256"> YOUR-HASH-1< /value>

    < 값 id="my-new-script" type="hash" algorithm="sha256"> YOUR-HASH-2< /value>

    <개 값>

    파일이 없는 경우 다음 내용으로 만듭니다.

    < ?xml version="1.0" encoding="UTF-8"?>

    < csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">

    <개 정책>

    < 정책 id="script-src">

    <개 값>

    < 값 id="my-script" type="hash" algorithm="sha256"> YOUR-HASH-1< /value>

    < 값 id="my-new-script" type="hash" algorithm="sha256"> YOUR-HASH-2< /value>

    < /values>

    < /policy>

    < /policies>

    < /csp_whitelist>

  3. 캐시 초기화: 해시를 csp_whitelist.xml 파일에 추가한 후 변경 내용이 적용되도록 하려면 캐시를 초기화해야 합니다. 캐시를 플러시하면 저장된 데이터가 지워지므로 업데이트된 CSP 설정을 즉시 적용할 수 있습니다. 시스템(으)로 이동하여 캐시를 플러시할 수 있습니다 > 도구 Commerce 관리 패널에서 > 캐시 관리 를 선택하고 Magento 캐시 초기화 단추를 선택합니다.  또는 다음 명령줄을 사용합니다.

    bin/magento cache:flush

    이 명령은 새 CSP 설정을 시스템에서 인식하도록 모든 캐시 유형을 지웁니다.

임시 계정으로 Google Tag Manager 사용자 지정 HTML JavaScript에 서명

GTM에서 JavaScript을 실행할 수 있는 또 다른 방법은 스크립트의 열기 태그에 임시 항목을 추가하는 것입니다. nonce 속성은 특정 인라인 스크립트를 동적으로 허용 목록에 추가하여 실행할 수 있도록 하는 방법을 제공합니다. 자세한 내용은 CSP 임시 공급자를 사용하여 인라인 스크립트 허용 설명서를 참조하십시오.

경고: GTM 계정이 손상된 경우 공격자가 악성 JavaScript을 상점 앞에 삽입하고 임시 계정으로 서명하여 실행을 허용할 수 있습니다. 이로 인해 체크아웃 과정에서 민감한 데이터가 도용될 가능성이 있다.

Adobe Commerce 개발 파트

참고: CSP 임시 변수 삽입은 Adobe Commerce 2.4.8 이상 버전에서 즉시 사용할 수 있습니다. 이전 버전의 Adobe Commerce에서 이 사용자 지정 삽입을 구현하는 경우 Adobe Commerce 2.4.8 이상으로 업그레이드하기 전에 이러한 사용자 지정 내용을 롤백하십시오. Adobe Commerce 2.4.8 이상을 실행 중인 경우 GTM 구성 섹션으로 진행하십시오.

  1. 사용자 지정 모듈에서 CSP 임시 공급자를 사용하고 임시 항목을 JavaScript에 전달합니다. 자세한 내용은 Adobe Commerce 개발자 설명서에서 기본 템플릿 개념을 참조하세요.

  2. JavaScript을 사용하여 임시 항목을 사용하여 전역 변수를 삽입합니다.

    < 스크립트>

    window.cspNonce = config.cspNonce;

    < /script>

  3. 이 스크립트는 현재 임시 값을 사용하여 전역 변수 cspNonce을(를) 설정합니다. 이 값은 Google Tag Manager 변수에서 캡처하고 CSP에서 실행할 수 있도록 사용자 지정 HTML 스크립트를 서명하는 데 사용할 수 있습니다. 모든 페이지에 삽입되어야 합니다.

GTM 구성 부분

  1. GTM에서 이 변수의 값을 캡처합니다.

    1. Google 변수 유형의 JavaScript 태그 관리자 변수를 만듭니다. 나중에 참조되므로 변수에 명확한 이름을 지정합니다. 이 예제에서는 gtmNonce입니다.

    2. 전역 변수 이름 을(를) 이전 단계에서 삽입한 JavaScript 전역 변수의 이름으로 설정합니다. 이 예제에서는 cspNonce입니다.

  2. nonce 속성을 포함하도록 체크아웃 시 실행해야 하는 JavaScript이 포함된 사용자 지정 HTML 블록을 수정하고, 이전에 만든 GTM 변수를 참조합니다.

< 스크립트 nonce="{{gtmNonce}}">
                     console.log("테스트임");
              < /script>

참고: 지원 document.write 확인란을 선택해야 스크립트가 올바르게 작동합니다.

nonce 특성을 추가하면 제공된 nonce로 스크립트가 서명되므로 CSP(콘텐츠 보안 정책)에서 안전하게 실행할 수 있습니다.

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f