html2canvas CORS 우회하기

 

화면과 같이 드래그해서 이미지들을 캡쳐해서 서버에 다운로드 시키는 기능이 있었다.

문제는 이미지들이 다른 서버에서 가져온 이미지여서 html2canvas로 canvas로 

변환할때 CORS오류가 나는 것이였다.
원본데이터가 오염 및 안전하지 않다고 판단하여 js에서 오류가 발생한 것이다.

 

https://developer.mozilla.org/ko/docs/Web/HTML/CORS_enabled_image

교차 출처 이미지와 캔버스 허용하기 - HTML: Hypertext Markup Language | MDN

 

이러한 문제를 피하기 위해 url이 노출된 데이터를 인코딩 처리해야한다.

 

const getBase64FromUrl = async (url) => {
  const data = await fetch(url);
  const blob = await data.blob();
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(blob); 
    reader.onloadend = function() {
      const base64data = reader.result;   
      resolve(base64data);
    }
  });
}

 

위처럼 인코딩 된 base64 data 데이터를 가져와서 

const dataURLtoFile = (dataUrl, fileName) => {
    let arr = dataUrl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);

    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }

    return new File([u8arr], fileName, { type: mime });
};

const formData = new FormData();
formData.append('file', getFile);

파일 객체로 변환해주고 formData에 넣어서 파일로 내려받을 수 있게 처리했다