📝 오늘 한 것

1. Credentialed Request 에러 해결

📚 배운 것

1. 배포

1) Heroku에 배포

(1) Credentialed Request 에러 해결 🔥

앞서 SharedArrayBuffer 사용과 관련해 에러가 발생했을 때 아래 코드를 추가하여 해결했었다.

app.use((req, res, next) => {
  res.header("Cross-Origin-Embedder-Policy", "require-corp");
  res.header("Cross-Origin-Opener-Policy", "same-origin");
  next();
});

이로 인해 github 프로필 이미지가 뜨지 않았던 문제는 img 태그에 crossorigin 속성을 추가하여 해결했다.

그런데 AWS를 이용하려고 설정하는 과정에서 위 코드로 인해 또 다시 이미지가 제대로 나오지 않으면서 ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200 에러가 발생했다.

SharedArrayBuffer를 사용하면서도 다른 출처로부터 리소스를 가져오기 위해, 처음에는 아래와 같이 cross-origin-resource-Policy를 cross-origin으로 지정했지만, 에러는 해결되지 않았다.

app.use((req, res, next) => {
  res.header("Cross-Origin-Embedder-Policy", "require-corp");
  res.header("Cross-Origin-Opener-Policy", "same-origin");
  res.header("cross-origin-resource-Policy", "cross-origin");
  next();
});

그러던 중 이 글을 발견했다.
CORS는 왜 이렇게 우리를 힘들게 하는걸까? 제목 너무 잘지으셨

내가 보내고 있는 요청이 Credentialed Request라는 것을 알게 됐다.
그러나, 설명을 참고해 응답 헤더에 Access-Control-Allow-Credentials: true를 넣어주었지만, 여전히 해결은 되지 않았다.

app.use((req, res, next) => {
  res.header("Cross-Origin-Embedder-Policy", "require-corp");
  res.header("Cross-Origin-Opener-Policy", "same-origin");
  res.header("cross-origin-resource-Policy", "cross-origin");
  res.header("Access-Control-Allow-Credentials", "true");
  next();
});

개발자 도구 네트워크 탭의 응답 헤더에서 문제 탭에 들어가니까 아래와 같은 안내가 떴다.
마지막 문단이 해결 방법이 될 수도 있을 거 같아 시도해보려고 했지만, 이름이 너무 무턱대고 적용하면 안될 것 같이 생겨서 검색해봤다.

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.

그리고 이 글을 발견했다.
Cross-Origin-Embedder-Policy: credentialless

In this new COEP variant, cross-origin no-cors subresource requests would be sent without credentials.
Specific requests which require credentials can opt-into including them, at the cost of shifting the request’s mode to require a CORS check on the response.
This bifurcation between credentiallessness and CORS means either that servers don’t have browser-provided identifiers which could be used to personalize a response (see the isolation section below), or that they explicitly opt-in to exposing the response’s content to the requesting origin.

As an example, consider a developer who wishes to load an image into a context isolated in the way described above. The < img > element has a crossorigin attribute which allows developers to alter the outgoing request’s state. In this new mode, the following table describes the outgoing request’s properties in Fetch’s terms for various values:

Resource	Request’s Mode	Request’s Credentials Mode includeCredentials	COEP:unsafe-none	includeCredentials COEP:credentialless
< img src="https://same-origin/" >	same-origin	include	true	true
< img src="https://same-origin/" >	same-origin	include	true	true
< img src="https://cross-origin/" >	no-cors	include	true	false
< img src="https://cross-origin/" crossorigin="anonymous" >	no-cors	omit	false	false
< img src="https://cross-origin/" crossorigin="use-credentials" >	cors	include	true	true

이를 참고해 일단 Cross-Origin-Embedder-Policy를 credentialless로 설정했다.
그리고 이로 인해 문제가 될 수 있는 부분들, 즉 가져오는데 자격 증명을 필요로 하는 img(github 로그인 user의 프로필 사진)에는 crossorigin="use-credentials" 속성을 부여했다.

// server.js
app.use((req, res, next) => {
  res.header("Cross-Origin-Embedder-Policy", "credentialless");
  res.header("Cross-Origin-Opener-Policy", "same-origin");
  next();
});

//- header.pug & profile.pug
img(src=loggedInUser.avatarUrl, crossorigin="use-credentials").profile-img

드디어 이미지가 정상적으로 뜨는 것을 확인했다.

이제 파일은 서버가 아니라 AWS에 저장되기 때문에 git push를 통해 서버를 새로 빌드해도 파일은 지워지지 않는다. 그러나...

✨ 내일 할 것

1. 에러는 계속된다