크롬 inspected target crashed

 

 

 

inspected target crashed 오류가 발생하였다.

 

정확히는 크롬이 아니라 크로미움에서 발생한 오류였다.

 

평소에는 엑셀을 잘 다운받는데, 엑셀의 데이터가 많아지면 오류가 생겼다.

 

엑셀을 내려받을 때, a태그의 href 속성에 base64로 만들어서 내려받았는데, 그 길이가 긴 경우 생기는 문제였다.

 

크로미움의 버그로 알려졌다고 한다.

크로미움 버그(긴 url인 경우 죽어버리는 현상) : https://bugs.chromium.org/p/chromium/issues/detail?id=69227

 

결론은 base64 사용시 클라이언트 브라우저의 한계였다.

 

base64를 다른 형식으로 변환해야했고, 나의 경우에는 base64를 blob으로 변경했다.

 

 

 

 

해결책 : Blob과 URL.createObjectURL()를 이용해서 해결할 수 있다.

 

 

/* 함수 생성 */
function b64toBlob(b64Data, contentType, sliceSize) {
  contentType = contentType || '';
  sliceSize = sliceSize || 512;

  var byteCharacters = atob(b64Data);
  var byteArrays = [];

  for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);

    var byteNumbers = new Array(slice.length);
    for (var i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    var byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }

  var blob = new Blob(byteArrays, {type: contentType});
  return blob;
}

/* 함수 사용 예제 */
var blob = b64toBlob(b64Data, contentType);
var blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

 

출처 : https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript

 

 

contentType에 대해서는 참조 링크를 남깁니다.

엑셀은 'application/vnd.ms-excel'

참조 : https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types