[javascript] 자바스크립트로 파일 업로드 및 다운로드 중 보안 토큰 사용하기

보안 토큰은 파일의 무결성을 보호하고 권한을 관리하는 데 사용됩니다. 여기에는 자바스크립트의 fetch API를 사용하여 파일을 업로드하고, 서명된 URL 또는 토큰을 사용하여 파일을 다운로드하는 방법에 대해 설명하겠습니다.

파일 업로드 시 보안 토큰 사용하기

파일을 업로드할 때, 서버 측에서 발급한 보안 토큰을 함께 전송하여 파일의 신원을 확인합니다. 예를 들어, AWS S3의 경우 서버 측에서 업로드하는 사용자에게 업로드 토큰을 부여합니다.

다음은 자바스크립트로 파일을 업로드하는 예시입니다.

const fileInput = document.getElementById('fileInput');
const formData = new FormData();
formData.append('file', fileInput.files[0]);

fetch('https://example.com/upload', {
  method: 'POST',
  body: formData,
  headers: {
    'Authorization': 'Bearer YOUR_UPLOAD_TOKEN',
  },
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Upload failed', error));

YOUR_UPLOAD_TOKEN을 실제로 발급받은 업로드 토큰으로 대체해야 합니다.

파일 다운로드 시 보안 토큰 사용하기

파일을 다운로드할 때에도 보안 토큰 또는 서명된 URL을 사용하여 권한을 관리할 수 있습니다. 서명된 URL을 사용하면 해당 URL을 통해서만 파일에 접근할 수 있도록 설정할 수 있습니다.

다음은 자바스크립트로 보안 토큰을 사용하여 파일을 다운로드하는 예시입니다.

fetch('https://example.com/download?fileId=FILE_ID', {
  headers: {
    'Authorization': 'Bearer YOUR_DOWNLOAD_TOKEN',
  },
})
  .then(response => response.blob())
  .then(data => {
    const url = window.URL.createObjectURL(new Blob([data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'file.pdf');
    document.body.appendChild(link);
    link.click();
  })
  .catch(error => console.error('Download failed', error));

위 코드에서 FILE_ID는 실제 파일의 고유 식별자이고, YOUR_DOWNLOAD_TOKEN은 다운로드 토큰으로 대체되어야 합니다.

이렇게 함으로써 파일을 안전하게 업로드하고 다운로드할 수 있습니다. 이와 더불어, 귀하의 웹 애플리케이션이 사용자의 파일을 안전하게 관리하고 보호하는 데 도움이 될 것입니다.