카카오 공유하기 초기 script 불러올때 cors 에러 발생

JavaScript
1

문의 시, 사용하시는 SDK 버전 정보와 디벨로퍼스 앱ID를 알려주세요.

사용하는 SDK : kakao_js_sdk/2.7.4
앱 ID : 1169809
환경 : Nextjs

카카오 공유하기 API 사용하기 위해 아래와 같이 sdk를 호출하였습니다.

  <Script
        src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.4/kakao.min.js"
        integrity="sha384-DKYJZ8NLiK8MN4/C5P2dtSmLQ4KwPaoqAfyA/DfmEc1VDxu4yyC7wy6K1Hs90nka"
        onLoad={() => {
          setKakaoLoaded(true);
        }}
        onError={(e) => {
          console.log(e);
        }}
      />

그런데 페이지를 로드하니까 아래와 같은 에러가 발생합니다.

Subresource Integrity: The resource 'https://t1.kakaocdn.net/kakao_js_sdk/2.7.4/kakao.min.js' has an integrity attribute, but the resource requires the request to be CORS enabled to check the integrity, and it is not. The resource has been blocked because the integrity cannot be enforced.

웹 플랫폼에 http://localhost:3000를 도메인으로 설정하였는데, 혹시 이것 때문에 위와 같은 에러가 발생하는 걸까요?

원인과 해결방법 답변 주시면 감사하겠습니다.

2

Hello. @김경한0184

This CORS error is related to the integrity check of the Cocoa SDK. I can suggest several methods to solve it:

  1. Simplest Solution - remove the integrity property:
<Script
src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.4/kakao.min.js"
onLoad={() => {
setKakaoLoaded(true);
}}
onError={(e) => {
console.log(e);
}}
/>
  1. Add crossOrigin property:
<Script
 src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.4/kakao.min.js"
 integrity="sha384-DKYJZ8NLiK8MN4/C5P2dtSmLQ4KwPaoqAfyA/DfmEc1VDxu4yyC7wy6K1Hs90nka"
 crossOrigin="anonymous"
 onLoad={() => {
 setKakaoLoaded(true);
 }}
 onError={(e) => {
 console.log(e);
 }}
/>
  1. What you need to do in Kakao Developers Console:
  • Go to web platform settings
  • Add localhost:3000 with the full URL format: http://localhost:3000
  • If you are using HTTPS: https://localhost:3000
  • Add your production domain
  1. CORS setting in your Next.js config file:
// next.config.js
module.exports = {
async headers() {
return [
{
source: '/:path*',
headers: [
{
key: 'Access-Control-Allow-Origin',
value: '*'
}
]
}
]
}
}

I recommend you to try the first of these solutions (removing the integrity property). If this does not work, you can follow the other steps in order.

If the error persists, check the following:

  1. Is the correct domain registered in the Kakao Developers Console?
  2. Is your JavaScript SDK key correct?
  3. Does your Next.js project have CORS middleware?
3

@ Emre_A
it works well by removing the integrity property. ( i don’t know if it’s okay to use it without integrity props though )
Thank you so much for your detail helping. :+1: I appreciate it

1개의 좋아요
4

cors 에러는 crossOrigin="anonymous"를 누락하셔서 그런것 같고

integrity는 DNS하이재킹, BGP하이재킹 공격 방어를 위해 필요합니다.

1개의 좋아요
5

@tim.l
기존에 작업할때 integrity와 crossOrigin 설정을 했는데 cors에러가 발생하여 제외 했었습니다.
그런데 지금은 또 되네요.
도메인을 http://localhost 에서 http://localhost:3000으로 변경하여서 지금은 되는건가 추측됩니다.

현재는 integrity와 crossOrigin 설정하고도 잘 동작합니다. 답변 감사합니다.

6

@김경한0184 I’m so glad the problem was solved :blush:

1개의 좋아요