[Vue] Chrome에서 파일 다운로드 시 "위험한 파일 차단" 우회하기

개요

시스템 운영 중 zip 파일을 다운로드하는 기능이 계속 차단된다는 이슈가 보고되었다.

확인해 보니 다운로드를 시도할 때 위험한 파일로 분류되어 다운로드가 차단되었다.

해당 이슈를 비교적 간단하게 우회할 수 있는 방법이 떠올라 해당 방법으로 적용했고,

해당 이슈뿐만 아니라 각종 파일 다운로드 시 공통으로 사용할 수 있는 방식이기도 하여 정리 겸 포스팅하게 되었다.

 

문제상황

파일을 다운로드하는 경우 보통 해당 파일의 경로를 a 태그의 href에 기입하는 방식으로 다운로드를 구현하곤 하는데,

이때 크롬에서 zip 파일을 다운로드하려고 할 때 아래와 같이 다운로드 파일이 차단되었다.

크롬에서 zip 파일 다운로드가 실패한 모습

 

확인해 보니 크롬 환경에서 zip 파일 등 일부 다운로드를 차단하는 경우가 존재했다.

https://support.google.com/chrome/answer/6261569

Chrome에서 일부 다운로드를 차단함 - Google Chrome 고객센터

 

필자가 테스트했을 때는 다른 브라우저에서는 정상적으로 다운로드되었고,

크롬에서도 매번 발생하지 않고 간헐적으로 발생했다.

 

크롬 브라우저는 거의 표준 브라우저로 취급되기 때문에 보통 다른 브라우저를 권장할 수는 없을 것이고,

그렇다고 많은 사용자들에게 해당 이슈가 발생하면 직접 브라우저 설정을 건드려서 다운로드 차단을 해제하도록 안내하는 것도 무리가 있다.

(필자의 경우 시스템 사용자 대부분이 연령대가 높아서 더더욱..)

 

해결방안

프론트에서 해당 파일의 경로에 get요청을 보내어 blob 파일의 형태로 응답을 받고,

이 blob 파일을 다운로드하는 방식으로 해결할 수 있다.

 

아래 예시는 Vue.js 및 axios로 작성되었다.

  methods: {
    download(href) {
      const fileName = href.substring(href.lastIndexOf('/') + 1);

      axios.get(href, { responseType: 'blob' }).then(res => {
        this.fileDownload(res.data, fileName);
      });
    },
    fileDownload(blob, fileName) {
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement('a');
      link.href = url;
      link.download = fileName;
      link.click();
    };
  },

download 메소드에 파일의 경로를 전달하여 동작시키면,

파일의 경로를 통해 해당 파일명을 구하고,

blob 파일을 다운로드할 수 있다.

 

이때 파일명에는 "/" 문자가 들어갈 수 없어 파일명이 깨지는 오류는 발생하지 않는다.

 

다만 해당 방식은 프론트 환경에서 직접 파일을 읽어 들이는 과정을 거치기 때문에 용량이 큰 파일의 경우 Out of Memory가 발생할 수 있다.

이런 경우 직접 다운로드하는 것은 부담이 될 수 있기 때문에 가능한 용량을 작게 분할하는 등으로 다운로드 정책을 구성하는 것이 좋지 않을까.