문제

그림일기 수정시 canvas 요소에 서버에서 전달해준 S3 버킷 url을 새로운 image 객체를 만들어 저장해준 뒤, 그 이미지를 그대로 canvas에 그려주는 작업을 하는데,

tainted canvas 에러가 발생하였음. ⇒ CORS Error

canvas 요소에서는 same-origin이 아닌 이미지를 그려주게 되면 tainted canvas라고 취급하여 수정 및 저장이 불가능해짐.

tainted canvas 오류

프론트 측 콘솔 에러

<aside> 🚫 Access to image at 'https://${버킷이름}.s3.ap-northeast-2.amazonaws.com/${파일이름}' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

</aside>

useEffect(() => {
  const canvas = canvasRef?.current;
  const ctx = canvas?.getContext("2d");
  const image = new Image();
  image.src = `${targetItem?.imgUrl}`; // S3 버킷 이미지 URL
  image.onload = () => {
    // 이미지가 로드되었을 때 캔버스에 그리기
    ctx?.drawImage(image, 0, 0); // 이미지 그리기
  };
}, []);

원인

<aside> 🚫 "tainted canvas" 오류는 보안 상의 이유로 웹 브라우저에서 발생하는 보호 메커니즘 중 하나로, 캔버스에 로드된 외부 이미지가 보안 정책에 위배되는 경우에 발생할 수 있다.

보통 브라우저의 "동일 출처 정책" (Same-Origin Policy)에 의해, 웹 페이지의 JavaScript 코드가 로드된 문서와 동일한 출처(origin)에 있는 리소스(이미지, 스크립트, 스타일 등)에만 접근할 수 있는데, 만약 외부 출처의 이미지를 캔버스에 그려야 하는 경우, 해당 이미지가 "tainted"(직역:더럽혀진) 상태가 된다. 그리고 tainted 상태의 캔버스는 보안 상의 이유로 더 이상 그려지거나 캡처되지 않는다. 이는 개인 정보 유출을 방지하고 보안을 강화하기 위한 웹 브라우저의 보호 기능 중 하나이다.

따라서, HTML 캔버스에 외부 출처의 이미지를 그리는 경우에는 CORS (Cross-Origin Resource Sharing) 정책을 준수하고, 이미지가 로드된 동일한 출처(origin)에서 외부 이미지에 대한 접근 권한을 확인하는 등의 보안 조치를 취해야 한다. 그렇지 않으면 "tainted canvas" 오류가 발생할 수 있다.

</aside>

시도

image 객체에 crossOrigin 설정을 해주어야겠다고 판단.

useEffect(() => {
  const canvas = canvasRef?.current;
  const ctx = canvas?.getContext("2d");
  const image = new Image();
  image.src = `${targetItem?.imgUrl}`; // S3 버킷 이미지 URL
  image.crossOrigin = "anonymous";
  image.onload = () => {
    // 이미지가 로드되었을 때 캔버스에 그리기
    ctx?.drawImage(image, 0, 0); // 이미지 그리기
  };
}, []);