166. (TWOK/LOGIC) [Aws] 자바스크립트 S3 GetPresignedUrl 생성 시 ResponseContentDisposition 추가해 Long 형식 주소 생성

---

[로직 정리]

​

정리 로직 : Aws / Web / JavaScript / S3

​

상태 : [Aws] 자바스크립트 S3 GetPresignedUrl 생성 시 ResponseContentDisposition 추가해 Long 형식 주소 생성

 

---

[설 명]

 

// --------------------------------------------------------------------------------------
[사전) 설정 및 정보 확인 사항]
// --------------------------------------------------------------------------------------

1. 제 목 : [Aws] 자바스크립트 S3 GetPresignedUrl 생성 시 ResponseContentDisposition 추가해 Long 형식 주소 생성


2. 테스트 환경 : JavaScript (자바스크립트) / AWS / STS / S3 / Pre-SignedUrl


3. 사전) AWS S3 간략 설명 : 

  >> Aws S3 버킷 이란 데이터 (사진, 동영상, 문서 등) 객체 를 업로드할 수 있는 컨테이너 (디렉토리) 입니다

  >> Aws S3 버킷은 온라인 스토리지 서비스로 HTTP/HTTPS 를 통한 API 를 사용해 파일 업로드 및 다운로드 처리를 할 수 있습니다


4. 사전) STS 임시 보안 자격 증명 설명 정리 : 

  >> AWS STS 는 AWS 리소스에 대한 액세스를 제어할 수 있는 임시 보안 자격 증명입니다 (신뢰받는 사용자에게 제공)

  >> AWS STS 는 단기적 임시 보안 자격 증명이며, 몇 분에서 몇 시간 동안 해당 자격 증명을 사용해 AWS 리소스를 액세스할 수 있습니다

  >> AWS STS 임시 보안 자격 증명이 만료 된 경우 AWS는 더는 그 자격 증명을 인식하지 못하거나 그 자격 증명을 사용한 API 요청으로부터 이루어지는 어떤 종류의 액세스도 허용하지 않습니다 


5. 사전) 자바스크립트에서 CDN 의존성 설정 코드 : 

  <script src="https://code.jquery.com/jquery-latest.min.js"></script>
  <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1416.0.min.js"></script>

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[로직 설명]
// --------------------------------------------------------------------------------------

1. 자바스크립트 <script> 코드 내에 AWS 연결 및 S3 접근 정보, 동적 랜덤 문자열 생성 함수 정의

  // ✅ [지정 된 횟수 만큼 랜덤 문자열 만들기]        
  function getRandomString(length) {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let result = '';
    for (let i = 0; i < length; i++) {
        result += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    return result;
  }

  // [전역 변수 선언]
  const region = 'ap-northeast-2'; // [AWS 리전]
  const accessKeyId = 'AK..7Q'; // [IAM 액세스 키]
  const secretAccessKey = 'Zz..xj'; // [IAM 시크릿 키]

  const fileName = "20251215_CAMERA_FRM";
  
  const bucket = 'service'; // [S3 버킷 이름]
  const key = 'camera/Firmware/'+fileName; // [S3 폴더 및 파일 경로]
  const expiredTime = 36000; // [STS 임시 자격 증명 및 파일 다운 로드 유효 시간 : 36000 (10시간)]

  //const responseContentDisposition = 'attachment; filename="20251215_CAMERA_FRM"';
  //const responseContentDisposition = 'attachment; filename="' + 'a'.repeat(500) + '.txt"';

  const responseContentDisposition = 'attachment; filename="' + fileName + '-' + getRandomString(500) + '"'; // ✅ Long URL 만들기 위해 파일 다운로드 처리 옵션 지정 (inline브라우저에서 열기 (PDF, 이미지 등) / attachment : 파일 다운로드 강제)


2. 자바스크립트 window.onload 부분에서 AWS STS 임시 자격 증명 정보 획득 수행

  // -----------------------------------------
  // ✅ [AWS.config 지정] : 1차 IAM 계정
  // -----------------------------------------
  AWS.config.update({
    region: region,
    accessKeyId: accessKeyId,
    secretAccessKey: secretAccessKey
  });



  // -----------------------------------------
  // [AWS.STS 객체 생성]
  // -----------------------------------------
  const sts = new AWS.STS();


  // -----------------------------------------
  // [STS getSessionToken 호출 수행]
  // -----------------------------------------
  // DurationSeconds : Expiration 시간 3600 은 (1시간) / 세션 지속 시간 (최대 129600초 = 36시간)
  // -----------------------------------------          
  sts.getSessionToken({ DurationSeconds: expiredTime }, function(err, data) {
    if (err) {
      console.error("[getSessionToken] : [Error] : ", err);
    }
    else {
      console.log("[getSessionToken] : [Result] : ", JSON.stringify(data));
    }
  });


3. STS 임시 자격 증명 정보를 정상적으로 확인 한 경우 > 해당 정보를 사용해 AWS.config 지정 수행

  // -----------------------------------------
  // ✅ [AWS.config 지정] : 2차 내려 받은 STS 임시 접근 계정
  // -----------------------------------------
  AWS.config.update({
    region: region,
    accessKeyId: data.Credentials.AccessKeyId,
    secretAccessKey: data.Credentials.SecretAccessKey,
    sessionToken: data.Credentials.SessionToken,
    signatureVersion: "v4", // [API 요청용 AWS Signature Version 4]
  });


4. AWS S3 객체 생성 및 ResponseContentDisposition 옵션 지정 후 getSignedUrl API 생성 요청 수행

  // -----------------------------------------
  // [AWS.S3 객체 생성]
  // -----------------------------------------
  const s3 = new AWS.S3();


  // -----------------------------------------
  // [GET 확인 용도 : Pre-Signed URL 생성 요청]
  // -----------------------------------------
  const getExpiresInSeconds = expiredTime; // 파일 다운로드 만료 시간
  const getParams = {
    Bucket: bucket, // [버킷 이름]
    Key: key, // [폴더 및 파일 경로]
    Expires: getExpiresInSeconds, // [URL 유효 시간 (초)]
    ResponseContentDisposition: responseContentDisposition // ✅ 응답 오버라이드로 길이 증가 설정 (파일 다운로드 명칭 지정)
  }; 

  const getUrl = await s3.getSignedUrl('getObject', getParams);


5. 생성 된 getUrl 주소 확인 및 주소에 STS 임시자격 증명 정보, ResponseContentDisposition (파일 다운로드 명칭) 가 포함 된 것 확인


6. ✅ 브라우저 실행 후 전달 받은 URL 로 접속 시도 후 > 정상적으로 파일이 다운로드 되는 것 확인

  >> 파일이 다운로드 되는 명칭은 ResponseContentDisposition 에서 지정한 파일 명칭으로 다운로드 되어야함

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------

[자바스크립트 AWS STS 임시 자격 증명 사용 및 Long 형식 S3 파일 다운로드 GetPreSignedUrl 프리 사인 URL 주소 생성]

https://kkh0977.tistory.com/8506

https://blog.naver.com/kkh0977/224113302155


[업무 이슈] 디바이스 Aws Job OTA 펌웨어 업데이트 시 STS 임시 자격 증명 S3 Presigned URL 프리 사인 주소 파싱 문제 발생

https://blog.naver.com/kkh0977/223951554000?trackingCode=blog_bloghome_searchlist


[Aws S3 Storage] S3 (Amazon Simple Storage Service) 버킷 저장소 개념 및 설명 정리

https://blog.naver.com/kkh0977/223733087281?trackingCode=blog_bloghome_searchlist


[[간단 소스] Aws S3 버킷 저장소 리스트 목록 확인 - AmazonS3 listBuckets]

https://blog.naver.com/kkh0977/223797258160?trackingCode=blog_bloghome_searchlist


[자바스크립트 AWS S3 Get 요청 및 Put 업로드 PreSignedUrl 프리 사인 URL 주소 생성 수행 - getSignedUrl]

https://blog.naver.com/kkh0977/223903767776

// --------------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8506

472. (javaScript) 자바스크립트 AWS STS 임시 자격 증명 사용 및 Long 형식 S3 파일 다운로드 GetPreSignedUrl

---