크롬,엣지 에서 실행일 안되는 우편검색

[yang-gun]

안녕하세요. 일반적인 카카오api 우편검색 을 이용하고 있는데요.

익스플로어 11 에서는 우편검색이 되는데요.

크롬, 엣지 에서는 우편번호 주소 화면안에 아래와 같이 오류 문구가 나오고 있습니다.

이 콘텐츠는 차단되어 있습니다. 문제를 해결하려면 사이트 소유자에게 문의하세요.

이부분을 어떻게 해결을 하면 좋을까요???

https 주소이고,

이용중입니다. 주소검색 버튼클릭시 F12 모드에서 Some messages have been moved to the Issues panel. 문구가 나오고 Content Security Policy of your site blocks some resources because their origin is not included in the content security policy header The Content Security Policy (CSP) improves the security of your site by defining a list of trusted sources and instructs the browser to only execute or render resources from this list. Some resources on your site can’t be accessed because their origin is not listed in the CSP. To solve this, carefully check that all of the blocked resources listed below are trustworthy; if they are, include their sources in the content security policy of your site. You can set a policy as a HTTP header (recommended), or via an HTML tag. ⚠️ Never add a source you don’t trust to your site’s Content Security Policy. If you don’t trust the source, consider hosting resources on your own site instead. Resource | Status | Directive | Source Location https://postcode.map.daum.net/ | blocked | frame-src |   Learn more: Content Security Policy - Source Allowlists 이렇게 나옵니다.

[daumPostcode]

@yang-gun 안녕하세요~

우선 제가 IE11, Chrome, Edge 에서 실행해 봤을때 모두 정상적으로 동작이 됨이 확인됩니다. 이슈 패널은 뜨지만 실행을 멈출만한 그런 오류는 뜨지 않습니다.

혹시 실행은 되는데, 크롬에서 뜨는 경고메세지 때문에 그러한 것인지 아예 실행 자체가 안되는 것일지요. 또는 제가 확인할 수 있는 사이트 도메인을 알려주시면 제가 직접 해당 사이트에 들어가서 확인해 보도록 하겠습니다.

CSP에 대해서 알아보는중에, 혹시 이용하시는 사이트에서 CSP설정이 되어 있는지 확인 부탁드립니다. https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP 이 문서를 보시고 한번 확인 부탁드려요.

추가로 질문과는 관계 없지만, 스크립트를 //t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js

이걸로 변경해 주시면 감사하겠습니다. 현재 사용하고 있는 스크립트는 추후에 종료될 수 있거든요.

[yang-gun]

안녕하세요 답변 감사드립니다. 소스는 ie11 에서 잘 됩니다. chrome, edge 에서 CSP 관련 하여 우편번호 주소리스트가 안떠서 그런거구요. 웹사이트는 CSP설정을 해 놓은거 같구요. [IIS > HTTP 응답 헤더] Content-security-plicy = child_src 'self' X-Frame-Optopns = SAMEORIGIN X-XSS-Protection = 1;mode=block

header script-src 이것저것 해 봐도 안보이고 있습니다.

https://www.flylucky.co.kr/addr.php

*스크립트 주소는 바꿨습니다.

[daumPostcode]

@yang-gun 네. https://github.com/daumPostcode/QnA/issues/637

해당 이슈는 이전에도 들어온 것인데, IE11은 CSP설정을 무시하기 때문에 동작하는 것이고, 나머지 브라우저는 해당 헤더설정에 맞게 동작하기 때문에 블락을 하는 것입니다. 그렇기에 해당 헤더 설정에 저희쪽 도메인을 추가하셔야 합니다. 위 링크는 이전에 저희한테 들어온 CS로 저희쪽 도메인을 추가하고 나서 정상동작을 한다고 합니다. 한번 확인 부탁드립니다. self로 되어 있으면 자기 자신의 도메인과 동일한 도메인의 리소스만 받는 다는 것으로, 당연히 저희쪽 도메인의 리소스는 못가져올거에요. CSP설정법과, 저희쪽 도메인 정보를 참고하여 확인 부탁드립니다.

추가로 도메인 정보는 위 링크에 적혀있는 도메인리스트에서 현재는 변경이 되었습니다.

• http(s)://suggest-bar.daum.net
• http(s)://t1.daumcdn.net
• http(s)://postcode.map.daum.net
• http(s)://stlog1-local.kakao.com

참고 부탁드립니다.

[yang-gun]

네 그런데요. <-- meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' https://suggest-bar.daum.net http://postcode.map.daum.net https://stlog1-local.kakao.com https://code.jquery.com/jquery-latest.js https://t1.daumcdn.net https://i1.daumcdn.net" -->

<-- meta http-equiv="Content-Security-Policy" content="frame-src 'unsafe-inline' https://suggest-bar.daum.net http://postcode.map.daum.net https://stlog1-local.kakao.com https://code.jquery.com/jquery-latest.js https://t1.daumcdn.net https://i1.daumcdn.net" -->

이렇게 추가 했는데요.

---

1 Content Security Policy of your site blocks some resources because their origin is not included in the content security policy header

The Content Security Policy (CSP) improves the security of your site by defining a list of trusted sources and instructs the browser to only execute or render resources from this list. Some resources on your site can’t be accessed because their origin is not listed in the CSP. To solve this, carefully check that all of the blocked resources listed below are trustworthy; if they are, include their sources in the content security policy of your site. You can set a policy as a HTTP header (recommended), or via an HTML tag.

AFFECTED RESOURCES 1 directive Resource Status Directive Source Location https://postcode.map.daum.net/ blocked frame-src

이렇게 보이고
이 콘텐츠는 차단되어 있습니다. 문제를 해결하려면 사이트 소유자에게 문의하세요. 라고 하네요?

[daumPostcode]

@yang-gun

네 위에서 설명에 있는 것처럼, 해당 사이트(postcode.map.daum.net)의 리소스를 부를려면 CSP설정에서 풀어줘야 하는데, 이 컨텐츠가 안전한가에 대한 보장은 제가 해드릴 수 있으나, 이를 CSP설정에서 푸는 것은 제가 아니라 해당 사이트(yang-gun님 사이트)에서 해야한다는 것 같습니다. 저희쪽 도메인을 막느냐 안막느냐는 브라우저가 해당 사이트의 CSP설정값을 통해 처리하는 것이기에, 여기서 풀어주면 되죠. frame-src를 건들어 보시죠. 안내에 계속 나오니까요.

아 meta태그 부분을 올려주셨는데, 깃헙 댓글이 텍스트가 아니라 태그로 인식해서 없애버렸군요; http://postcode.map.daum.net <-- 이거 대신에 https://postcode.map.daum.net 이걸로 넣어보시면 어떠실까요

[yang-gun]

<-- meta http-equiv=\"Content-Security-Policy\" content=\"default-src 'unsafe-inline' https://suggest-bar.daum.net https://postcode.map.daum.net https://stlog1-local.kakao.com https://code.jquery.com/jquery-latest.js https://t1.daumcdn.net https://i1.daumcdn.net\" -->      <-- meta http-equiv=\"Content-Security-Policy\" content=\"frame-src 'unsafe-inline' https://suggest-bar.daum.net https://postcode.map.daum.net https://stlog1-local.kakao.com https://code.jquery.com/jquery-latest.js https://t1.daumcdn.net https://i1.daumcdn.net\" -->  

이렇게 해도 안되네요.
흠 https://postcode.map.daum.net 추가했는데요. 안되는 이유가 뭘까요?

1 directive Resource | Status | Directive | Source Location https://postcode.map.daum.net/ | blocked | frame-src

[daumPostcode]

@yang-gun

<-- meta http-equiv="Content-Security-Policy" content="child-src 'unsafe-inline' https://suggest-bar.daum.net https://postcode.map.daum.net https://stlog1-local.kakao.com https://t1.daumcdn.net" -->

이렇게 한번 해보세요. 프로토콜과 도메인이 정확히 맞아야 됩니다. default-src는 제거하고 저것만 한번 해보시기 바랍니다.

그리고 자세한 사항은 https://developers.google.com/web/fundamentals/security/csp?hl=ko 여길 한번 참고해 보세요.

[yang-gun]

답변 감사드립니다.

<-- meta http-equiv="Content-Security-Policy" content="child-src 'unsafe-inline' https://suggest-bar.daum.net https://postcode.map.daum.net https://stlog1-local.kakao.com https://t1.daumcdn.net" -->

만 넣었는데도요. 안되네요 . 저도 보내주신 페이지며 facebook 적용사례면 봤는데요. 이상하게 안되네요 ㅜㅜ

Content Security Policy of your site blocks some resources because their origin is not included in the content security policy header The Content Security Policy (CSP) improves the security of your site by defining a list of trusted sources and instructs the browser to only execute or render resources from this list. Some resources on your site can’t be accessed because their origin is not listed in the CSP. To solve this, carefully check that all of the blocked resources listed below are trustworthy; if they are, include their sources in the content security policy of your site. You can set a policy as a HTTP header (recommended), or via an HTML tag. ⚠️ Never add a source you don’t trust to your site’s Content Security Policy. If you don’t trust the source, consider hosting resources on your own site instead.

1 directive Resource | Status | Directive | Source Location https://postcode.map.daum.net/ | blocked | frame-src

[daumPostcode]

@yang-gun 음 이상하군요; 제가 테스트 해볼때는 현재 정상적으로 동작되긴 한데; 혹시 서버에서 header에 들어가는 CSP설정하고, metatag로 적용하는 CSP랑 모두 적용되어 있을까요? 어떤게 우선순위가 높은지는 현재 확인해보진 않았으나, 두군데서 모두 설정중이라면 브라우저가 우선적으로 확인하는게 있을 것 같습니다.

제가 테스트 할때는 메타태그만 이용했습니다. 한번 확인 부탁드립니다.

[yang-gun]

제가 소스를 실행해서 F12 로 header 를 보니 응답 헤더에 아래와 같이 보이네요. 근데 CONTENT-SECURITY-POLICY: 것이 2개가 보입니다. 서버것과 소스에 설정한 것 으로요? 이래서 안된듯 한데요. 서버에만 직접 도메인을 추가하면 잘 되구요.

Content-Encoding: gzip Content-Length: 2670 CONTENT-SECURITY-POLICY: child-src 'unsafe-inline' https://suggest-bar.daum.net https://postcode.map.daum.net https://stlog1-local.kakao.com https://t1.daumcdn.net https://*.jquery.com ; CONTENT-SECURITY-POLICY: child-src 'self' Content-Type: text/html; charset=EUC-KR Date: Tue, 30 Mar 2021 01:45:39 GMT Server: Microsoft-IIS/8.5 Strict-Transport-Security: max-age=31536000; includeSubDomains; preload Vary: Accept-Encoding X-Content-Type-Options: nosniff X-Frame-Options: SAMEORIGIN X-Powered-By: ASP.NET X-XSS-Protection: 1; mode=block

[daumPostcode]

@yang-gun 네 CSP설정이 헤더로 하는 거랑 메타태그로 하는거랑 있는데, 알려주신 사이트를 보니 헤더에서 설정하고 있고, 메타태그로도 설정하고 있는데, 브라우저가 헤더값을 우선적으로 해적한다면 메타태그에서 설정하는건 인식이 안될 수 있거든요. 그래서 바로 위 댓글에서 헤더에 들어간 CSP설정을 확인해 보시라고 한것이죠.

두개 모두 설정할 필요 없고, 둘중에 하나만 이용하면 될것 같습니다. 저같은 경우엔 서버에서 헤더값 넣는게 손이 상대적으로 많이가서 메타태그로 설정해서 테스트 해본것이구욤.

아무튼 해결되신 것 같은데 맞으실까요?