Web CSP 설정 시 Kakao Style 오류 문제질문드립니다.

Question

Back : Spring bootFront: Vue 사용중입니다.서버에서 Content-Security-Policy 설정은default-src ‘self’ 'unsafe-inline’img-src ‘self’ 'unsafe-inline’style-src ‘self’ 'unsafe-inline’script-src ‘self’ 'nonce-{kakaomap script에 넣은 값}'입니다. 이렇게 실행할 경우 오류가 뜨지않습니다.하지만 style-src에 unsafe-inline 옵션을 지워야 하는 상황이 생겨 지우니 오류가 발생하고 UI가 깨집니다.Chrome 개발자도구 오류에서 알려주는 Hash값인 'sha256-{num}' 값을 style-src에 넣어봤지만 여전히 오류가 발생합니다.style-src가 self 옵션이라 kakao map처럼 외부 라이브러리의 경우 어떻게 처리해야할까요.script의 경우 nonce값을 주어 해결하였지만 style의 경우는 어떻게 해결해야하는지 궁금합니다.검색해보니 hash값을 넣으면 된다고하는데 hash를 넣어도 똑같은 오류가 계속해서 뜹니다.마찬가지로 kakao map관련 도메인을 설정해놓아도 오류가 뜹니다.도와주세요

Dierslair · Answer

https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP신뢰할 수 있는 도메인을 추가하면 된다고 나와 있네요.hash는 넣더라도 라인 피드를 사용하면 안되는 등의 제약이 있어 template resolver에서 한 줄 띄우기를 모두 지우는 minifier 옵션을 넣어야 정상동작합니다.

sky9381 · Answer

도메인의 경우 style-src 'self' *.kakao.com *.daumcdn.net *.t1.daumcdn.net 로 설정하였지만 그대로 오류가 뜹니다..혹시 몰라 오류에서 뜨는 Full domain.js까지 입력해도 안됩니다. 2번째 방법에 대해선 좀 더 구체적인 방법이 필요할거같습니다 ....JS 및 CSS에 minifier 옵션을 주는거라면 kakao 외부 js나 css를 불러오는거라 불가능하지않을까싶고같은 오류가 ApexChart 라이브러리 사용에도 뜨지만 해당 오류는 Hash를 추가하여 해결하였습니다.Apexchart는 hash추가로 해결되지만 kakao map쪽만 문제가 되는 상황입니다..

Web CSP 설정 시 Kakao Style 오류 문제질문드립니다.

2개의 답변

#csp 목록