215. (TWOK/WORK) [업무 이슈] 자바스크립트 AWS S3 텍스트 파일 브라우저 열기 시 텍스트 인코딩 깨짐 이슈 - ContentType charset=utf-8 설정

---

[제 목]

​

주제 : 투케이2K 업무 정리

​

타이틀 : 투케이 / 2k / 업무 정리

​

제목 : [업무 이슈] 자바스크립트 AWS S3 텍스트 파일 브라우저 열기 시 텍스트 인코딩 깨짐 이슈 - ContentType charset=utf-8 설정

​

 

---

[내 용]

​

------------------------------------------------------------------------------
[개발 및 테스트 환경]
------------------------------------------------------------------------------

- 제 목 : [업무 이슈] 자바스크립트 AWS S3 텍스트 파일 브라우저 열기 시 텍스트 인코딩 깨짐 이슈 - ContentType charset=utf-8 설정


- 테스트 환경 : Chrome / AWS / S3 / File


- 사전) 👉 AWS S3 간략 설명 : 

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

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


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

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

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

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


- 사전) 👉 HTTP 응답 헤더 Content-Disposition 간략 설명 (ResponseContentDisposition) : 

  >> Content-Disposition 는 HTTP 표준 헤더 Content-Disposition을 설정하여 파일을 브라우저에서 열지(inline) 또는 다운로드 강제(attachment)할지 지정할 수 있습니다

  >> Content-Disposition 는 파일 다운로드 시 사용할 파일명을 지정할 수 있습니다

  >> Content-Disposition 'inline' 옵션 : 브라우저에서 바로 열기 (PDF, 이미지 등) / Content-Disposition: inline; filename="report.pdf"

  >> Content-Disposition 'attachment' 옵션 : 다운로드 강제 / Content-Disposition: attachment; filename="report.pdf"

------------------------------------------------------------------------------





------------------------------------------------------------------------------
[이슈 사항]
------------------------------------------------------------------------------

1. 🟥 자바스크립트에서 AWS SDK 를 사용해 S3 특정 버킷에 저장된 텍스트 파일을 GetPreSignedUrl 로 브라우저 표시 수행 시 한글 문자 인코딩 깨짐 문제 발생


2. 🟥 현재 GetPreSignedUrl 생성 요청 시 별도로 ResponseContentType 을 지정하지 않는 상태 확인

------------------------------------------------------------------------------





------------------------------------------------------------------------------
[원인 파악 및 증상 재현]
------------------------------------------------------------------------------

1. ✔️ 코드 확인 - AWS.config 지정 : 1차 IAM 계정


2. ✔️ 코드 확인 - AWS.STS 객체 생성


3. ✔️ 코드 확인 - STS getSessionToken 호출 수행


4. ✔️ 코드 확인 - AWS.config 지정 : 2차 내려 받은 STS 임시 접근 계정


5. ✔️ 코드 확인 - AWS.S3 객체 생성


6. ✔️ 코드 확인 - GET 확인 용도 : Pre-Signed URL 생성 요청


7. ✔️ 코드 확인 - 응답 받은 getSignedUrl 주소 window open 으로 브라우저 새창 열기 수행


8. 🟥 결과 확인 - 브라우저에 표시 된 텍스트 파일에서 한글 문자는 인코딩이 깨져서 출력 되는 것 확인

------------------------------------------------------------------------------






------------------------------------------------------------------------------
[조치 내용]
------------------------------------------------------------------------------

1. 🟦 코드 수정 - GET 확인 용도 : Pre-Signed URL 생성 요청 단계에서 ResponseContentType 지정 및 charset=utf-8 설정 추가


2. 🟦 수정 된 s3.getSignedUrl 생성 코드 요약 첨부 : 

  // -----------------------------------------
  // ✅ [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]
  });


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

  const bucket = 'service'; // 👉 [S3 버킷 이름]
  const key = 'log/history/20251215_TEST.txt'; // 👉 [S3 폴더 및 파일 경로]


  // -----------------------------------------
  // [GET 확인 용도 : Pre-Signed URL 생성 요청]
  // -----------------------------------------
  const getExpiresInSeconds = 36000; // 파일 다운로드 만료 시간 : 36000 (10시간)
  var getParams = {
    Bucket: bucket, // [버킷 이름]
    Key: key, // [폴더 및 파일 경로]
    Expires: getExpiresInSeconds // [URL 유효 시간 (초)]                      
  }; 

  // -----------------------------------------
  // ✅ 특정 파일 확장자 체크 후 inline 브라우저 표시 설정 수행
  // -----------------------------------------
  if (key.endsWith(".txt")){
      getParams.ResponseContentDisposition = 'inline'; // 👉 브라우저 내에 표시 설정
      getParams.ResponseContentType = 'text/plain; charset=utf-8';   // 👉 같이 쓰는게 중요 : charset=utf-8 한글 인코딩 깨짐 방지

      console.warn('[txt] S3 프리사인 URL 주소 생성 특정 파일 확장자 포함 확인 : ', JSON.stringify(getParams));
  }

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

  console.log("✅ [Get - PreSignedUrl] : [Success] : ", getUrl);

------------------------------------------------------------------------------





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

▶️ [간단 소스] 자바스크립트 AWS S3 텍스트 파일 프리사인 Url 생성 및 콘텐츠 inline 브라우저 표시 설정 - utf8 인코딩 적용

https://kkh0977.tistory.com/8842

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


▶️ [Web/JavaScript] 자바스크립트 AWS S3 GetPreSignedUrl 프리사인 URL 생성 시 inline 브라우저 표시 설정 방법

https://kkh0977.tistory.com/8838

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


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

https://kkh0977.tistory.com/8506

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


▶️ [자바스크립트 AWS STS 임시 자격 증명 사용해 S3 Get PreSignedUrl 프리 사인 URL 주소 생성]

https://kkh0977.tistory.com/8151

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

------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8842

536. (javaScript) [간단 소스] 자바스크립트 AWS S3 텍스트 파일 프리사인 Url 생성 및 콘텐츠 inline 브라

---