네이버 지도와 다음주소 활용 시 CORS, COEP, CORP 문제

네이버 지도와 다음 주소 활용 CORS문제

개요 : 네이버 지도와 다음 주소를 활용해서 화면에 띄우고자 할 때

Because your site has the Cross-Origin Embedder Policy (COEP) enabled, each resource must specify a suitable Cross-Origin Resource Policy (CORP). This behavior prevents a document from loading cross-origin resources which don’t explicitly grant permission to be loaded.
To solve this, add the following to the resource’ response header:
Cross-Origin-Resource-Policy: same-site if the resource and your site are served from the same site.
Cross-Origin-Resource-Policy: cross-origin if the resource is served from another location than your website. ⚠️If you set this header, any website can embed this resource.
Alternatively, the document can use the variant: Cross-Origin-Embedder-Policy: credentialless instead of require-corp. It allows loading the resource, despite the missing CORP header, at the cost of requesting it without credentials like Cookies.

이러한 문제가 발생했다. 주로 발생하는 CORS와는 다른 문제인데 해결방법은 비슷하다.

1. CORS란?

• Cross-Origin Resource Sharing 즉 다른 출처의 리소스 공유에 대한 허용/비허용 정책이다.

• same origin은 동일한 동일한 출처에 대한 정책을 말한다. 그리고 이 SOP 정책은 '동일한 출처에서만 리소스를 공유할 수 있다'라는 정책이다.

• Origin이란? URL에서 프로토콜, 호스트, 포트번호를 합한 것이다

즉 동일한 출처에서 사용되는 것은 가능하나 외부 api를 사용한다던가 출처가 다른 리소스 사용을 제한하는 것이 CORS의 핵심이다.

예를 들어 단순하게 한 서비스에서 프로토콜과 host는 https://testorigin 으로 동일하나 port번호가 react는 3000번 spring boot는 8000번으로 다르다. 그래서 다른 출처의 리소스라 사용하는 것에 문제가 되는 것이다.

이러한 CORS가 탄생한 이유는 해커가 CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting) 등의 방법을 이용해서 우리가 만든 어플리케이션에서 해커가 심어놓은 코드가 실행하여 개인 정보를 가로채는 경우가 있었기 때문이다.

[출처]
https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

그래서 주로 CORS문제를 해결하기 위해 spring security에서 cors설정을 한다. 또한 다른 외부 api를 사용하게 될때 COEP나 CORP라는 에러가 뜰 수 있다.

2. COEP란?

Cross-Origin-Embedder-Policy 즉 COEP는 웹사이트가 자신을 포함하는 다른 웹사이트의 리소스를 사용할 수 있는지를 정의한다.

3. CORP란?

Cross-Origin Resource Policy 즉 CORP는 다른 출처의 리소스가 어떤 방식으로 로드될 수 있는지를 결정하는 정책입니다. 이를 통해 리소스가 제대로 보호되고, 웹 사이트의 보안이 강화된다

#원인

이것은 다른 웹사이트 리소스를 사용할 수 있는지 없는지 설정을 해주지 않았기 때문이다. COEP라는 다른 웹사이트 리소스 사용에 대한 정의가 되어 있지 않기 때문에 발생한다.

#해결방법

대부분 CORS, COEP와 관련된 문제는 nginx와 관련되어 있다고 볼 수 있다. nginx에서 CORS를 허용한 부분과 마찬가지로 COEP에서 사용하는 API 리소스를 허용시켜주면 문제가 해결된다. "*"을 넣어서 모든 다른 웹사이트 리소스를 허용시켜줄 수도 있으나 보안을 위해서 만든 것이기 때문에 "*"보다는 해당 리소스를 넣어서 하나만 해결해주자.