CSP란?

CSP는 웹사이트에 대한 공격을 방지하기 위해 도입된 표준입니다. 공격은 XSS, 클릭재킹 또는 악성 코드 삽입을 의미합니다. CSP는 모든 최신 웹 브라우저에서 광범위하게 지원되며 브라우저가 해당 웹 사이트에서 로드할 수 있도록 허용해야 하는 콘텐츠의 출처를 승인할 수 있는 권한을 웹 사이트 소유자에게 부여합니다.

웹 사이트에 대한 CSP를 구성하는 데 사용할 수 있는 두 가지 방법이 있습니다. 첫 번째는 웹 서버(헤더를 설정하기 위해 Apache 또는 nGinx)를 구성하거나 웹사이트에 <메타 값을 설정하는 다른 방법입니다. 웹 서버 구성은 이 블로그 게시물의 범위를 벗어납니다. Magento가 CSP를 구성하는 방법을 살펴보겠습니다.

마젠토와 CSP

CSP는 웹사이트에 악성 스크립트가 로드되는 것을 방지하기 위해 Magento 버전 2.3.5에 도입되었습니다. 웹사이트의 클릭재킹, XSS(교차 사이트 스크립팅) 및 세션 하이재킹 및 이와 유사한 기타 공격을 방지하는 데 도움이 됩니다. Magento에는 다양한 사용 사례를 수용할 수 있도록 adminhtml 및 프런트엔드 영역에 대한 정책 규칙을 별도로 설정하는 데 도움이 되는 Magento_Csp 모듈이 있습니다. CSP에는 두 가지 모드가 있습니다. 첫 번째는 보고만 하는 것이고 다른 하나는 제한 모드입니다.

CSP 모드

보고 전용 모드: 이 모드에서 Magento는 콘솔 로그에 CSP 정책 위반 오류만 보고하지만 해당 오류에 대해서는 조치를 취하지 않습니다. 개발자 모드에 있고 기능을 디버그해야 할 때마다 도움이 됩니다.
제한 모드: 이 모드에서 Magento는 정책 위반에 대해 조치를 취합니다. Magento는 CSP 정책을 위반하는 CSS, JS 및 인라인 스크립트의 로드를 제한합니다.
Magento 애플리케이션에서 보고 전용 모드 또는 제한 모드를 구성하려면 etc/config.xml 파일에서 값을 설정해야 합니다.

제한 모드를 활성화하려면 속성 값 report_only를 1로 설정합니다. 그렇지 않으면 보고서 전용 모델을 설정해야 하는 경우 report_only 속성 값을 0으로 설정합니다.

보고 전용 모드: report_only = 0

제한 모드: report_only = 1

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
    <default>
        <csp>
            <mode>
                <storefront>
                    <report_only>0</report_only>
                </storefront>
                <admin>
                    <report_only>0</report_only>
                </admin>
            </mode>
        </csp>
    </default>
</config>

사용자 지정 모듈에 대해 CSP를 구성하는 방법

csp_whitelist.xml 파일에 허용된 스타일, 스크립트, 해시 도메인을 추가할 수 있습니다.

<?xml version="1.0"?>
<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">
    <policies>
        <policy id="script-src">
            <values>
                <value id="<your_unique_id>" type="host">*.domain.com</value>
                <value id="<your_unique_id>" type="host">https://my-custom-domain.com</value>
            </values>
        </policy>
        <policy id="connect-src">
            <values>
                <value id="<your_unique_id>" type="host">https://my-custom-domain-2.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

다른 유형의 CSP도 있습니다. 위의 예에서 connect-src 및 script-src 아래에 화이트리스트 도메인을 선언했습니다. 다른 유형은 다음과 같습니다.

POLICY NAME DESCRIPTION
default-src The default policy.
base-uri    Defines which URLs can appear in a page’s <base> element.
child-src   Defines the sources for workers and embedded frame contents.
connect-src Defines the sources that can be loaded using script interfaces.
font-src    Defines which sources can serve fonts.
form-action Defines valid endpoints for submission from <form> tags.
frame-ancestors Defines the sources that can embed the current page.
frame-src   Defines the sources for elements such as <frame> and <iframe>.
img-src Defines the sources from which images can be loaded.
manifest-src    Defines the allowable contents of web app manifests.
media-src   Defines the sources from which images can be loaded.
object-src  Defines the sources for the <object>, <embed>, and <applet> elements.
script-src  Defines the sources for JavaScript <script> elements.
style-src   Defines the sources for stylesheets.

도메인이 스크립트 및 스타일에 대해 허용 목록에 없으면 개발자 콘솔에 "[Report Only] Refused to load to load '' 스크립트가 다음 콘텐츠 보안 정책 지침을 위반했기 때문에'와 같은 오류가 표시될 수 있습니다. 이 문제를 해결하려면 csp_whilelist.xml 파일을 사용하여 허용된 도메인 아래에 해당 도메인을 추가해야 합니다.

인라인 스크립트 유효성 검사

인라인 스크립트, 스타일 또는 해시를 검증하기 위해 Magento\Framework\View\Helper의 SecureHtmlRenderer 클래스를 사용할 수 있습니다. 이 클래스의 개체를 만들고 renderTag 메서드를 사용하여 인라인 스크립트를 화이트리스트에 추가할 수 있습니다.

/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer */
private $secureRenderer;
function someMethod() {
   ....
   $html .= $this->secureRenderer->renderTag('style', [], "#element { color: blue } ", false);
   ....
}

그러나 그것은 블록 클래스의 구현입니다. phtml 파일에서 동일한 구현을 사용해야 하는 경우 사용자 정의 블록 클래스에서 함수를 만들고 공용 메서드를 통해 SecureHtmlRenderer 개체를 전달해야 한다고 가정해 보겠습니다.

<div id="alert-div">Some text value</div>
<?= $secureRenderer->renderEventListenerAsTag('onclick', 'alert("Whitelist me!");', '#alert-div'); ?>

이것은 Magento 2의 CSP에 대한 모든 것입니다. 댓글 섹션을 통해 이 게시물에 대해 어떻게 생각하는지 알려주거나 내 이메일 ID(예: [email protected])로 이메일을 작성할 수 있습니다. 즐거운 코딩 :). 감사!