AWS this XML file does not appear to have any style information associated with it

문제

Node.js + Express 앱에서 특정 회원이 로그인하는 경우 프로필 이미지가 보이지 않음.
이미지가 저장된 곳은 AWS S3이다. 링크를 복사하여 별도 탭에서 열어보면, This XML file does not (후략) 및 Access Denied라고 뜬다.
(깃허브에서 해당 커밋 보기)

환경

Node.js 16.14.0
NPM 8.3.1

원인

AWS S3 해당 이미지 객체 ACL에서, 퍼블릭 액세스 객체 읽기 권한이 해제되어 있었다.
2021년에 이미지를 업로드했을 땐 분명 잘 보였으니, S3 콘솔에서 권한을 변경하고 원래대로 되돌리는 걸 깜박한 듯하다.

해결

• AWS 계정과 해당 버킷의 퍼블릭 액세스 차단을 해제

  • S3 > 이 계정의 퍼블릭 액세스 차단 설정 > 네 항목 모두 해제
  • S3 > 해당 버킷 > 권한 > 퍼블릭 액세스 차단(버킷 설정) > 네 항목 모두 해제
    • ACL 관련 두 항목만 해제해도 됨.

• 객체 ACL에서, 퍼블릭 액세스 시 읽기 권한 부여

  • S3 > 해당 버킷 > 해당 이미지 객체 > 권한 > ACL > 모든 사람(퍼블릭 액세스)에게 객체 읽기 권한 부여

보충

위의 이슈를 해결하며 추가로 조사한 내용이다.
주로 AWS의 근간 서비스인 IAM의 기본 개념과, S3에 업로드/다운로드하는 방법들에 대해 정리하였다.

1. AWS의 근간 서비스

• IAM
  • 정의
    • AWS 리소스에 대한 액세스를 제어할 수 있다.
    • e.g. 사용자 abcd에 S3FullAccess 정책을 붙이고, Access Key/Secret Key 설정해주면, 이 Key 세트로 S3를 호출해 쓸 수 있다.
  • 기본 개념
    • User
      • 설명 생략
    • Group
      • 설명 생략
    • Role
      • 설명 생략
    • Policy
      • 속성에 따라, Role에 조건을 붙인 것이다.
      • User/Group/Role 어디에나 붙일 수 있다. (주로 Role에 붙여 쓴다)
      • e.g. 탄약관리(Role)를 7내무반(Group)에 부여하되, 그것이 사용자 계급 or 간부 계급(속성)에 따라 달라짐.
  • 권장
    • AWS 계정 Root User는, AWS 계정을 처음 생성할 때 외에는 쓰지 않는 것이 바람직.
• VPC
  • (추후 정리)
• EC2
  • (추후 정리)

2. S3에 파일 업로드/다운로드하는 법

• 권한 결정 요소

  • Overview (직접 만든 요약도라 정확하지 않을 수 있음)
    

  • Access Key/Secret Key

    • 보안 자격 증명 중 하나. Root User뿐 아니라 일반 User도 가질 수 있다.

  • Policy (User, Bucket)

    • IAM에서 상술함.

  • ACL (Bucket, 파일 객체)

    • Bucket/객체의 액세스 관리
    • S3에서 버킷/객체 생성 시, 리소스에의 모든 권한을 리소스 소유자에 부여하는 기본 ACL 생성
    • 미리 제공된 ACL라는, 사전 정의된 권한 부여 집합을 지원한다. 이걸로 multer 객체에 acl 지정 가능
      • e.g. public-read
    • 최근엔 ACL 대신 Policy를 쓰는 추세

  • 퍼블릭 액세스 설정

    • 계정 단위(S3), 버킷 단위로 설정할 수 있다.
    • ACL을 이용하는 경우에는 관련 항목 두 개만 차단 해제해도 public-read가 된다.

• 크게 ACL 방식과 policy 방식으로 나뉜다.

  • ACL 방식

    • 유튜브 클론 코딩 수업에서 사용된 방식.
    • 사이트 방문자는, S3 업로드 권한을 가진(Policy) 유저의 Access Key/Secret Key로 S3에 접근하여, public-read(ACL) 설정한 이미지를 업로드.
      
      (커밋 603cf89 편집본)

  • policy 방식

    • AWS에서 추천하는 방식
    • (상세 추후 정리)

  • 비교
    

    • 공통
      • User의 Access Key/Secret Key 사용
      • User의 policy 사용
    • 차이
      • 유튜브 클론코딩 수업 방식 → 객체 ACL을 변경
      • AWS 추천 방식 → 버킷 Policy 사용

요약

• S3에 Public 공개로 업로드한 이미지가 깨져 있으면, 계정(S3)/버킷/객체별로 관련 설정이 빠짐없이 돼 있나 체크

  • 계정(S3)/버킷 퍼블릭 액세스 차단 해제
  • 객체 ACL: Public-Read
    

• IAM은 AWS 근간 서비스 중 하나로, AWS 리소스에 대한 액세스 제어를 할 수 있음.
  

• S3 업로드에는 ACL 방식보다 Policy 방식이 권장됨.

참고

• IAM
  AWS 공식 매뉴얼 > IAM이란 무엇입니까?
  AWS 공식 매뉴얼 > IAM의 보안 모범 사례
  AWS IAM: IAM Policy 알아보기 (이론편)
  AWS IAM 역할(Role)은 정확히 무엇인가요? 어떻게 써야 할까요
  IAM Role을 이용해서 EC2에 권한 주기

• 보안자격증명
  AWS 공식 매뉴얼 > AWS 보안 자격 증명
  AWS 공식 매뉴얼 > AWS 계정루트 사용자 자격 증명 및 IAM 사용자 자격 증명
  AWS 공식 매뉴얼 > AWS 자격 증명
  AWS 공식 매뉴얼 > AWS 액세스 키 관리를 위한 모범 사례
  AWS 공식 매뉴얼 > IAM 사용자의 액세스 키 관리
• 퍼블릭 액세스 설정
  AWS 공식 매뉴얼 > Amazon S3 콘솔을 사용하여 버킷의 ACL에 대한 퍼블릭 액세스를 활성화했습니다. 버킷이 모든 사용자에게 공개되나요?
  혼란스러운 AWS 접근 제어, 데이터 노출의 원인…라이트스핀
  AWS S3 버킷 생성/파일 업로드/삭제 (퍼블릭 액세스, 퍼블릭 객체, S3 URL 확인)
  [AWS Security] 인도 혼다차 민감정보 유출로 보는 S3의 접근제어 [2018.08]
  AWS 공식 매뉴얼 > Amazon S3 기능
  AWS 공식 매뉴얼 > Amazon S3 퍼블릭 액세스 차단
  AWS 공식 매뉴얼 > Amazon S3 스토리지에 대한 퍼블릭 액세스 차단
  아마존 S3 예제 (Amazon S3, Simple Storage Service)
  AWS S3 생활코딩 요약
• multer에서 AWS 관련 설정 하기
  NPM > multer-s3
  AWS 버킷 권한과의 씨름...
  Express AWS S3를 사용한 파일 업로드 예제
  AWS S3-multer
  [node.js] multer와 S3를 이용한 이미지 업로드 (multer 설치 부터 S3이미지 업로드 까지) - 2. S3
  [Node.js API 개발] AWS S3 이미지 업로드, multer-s3 사용
  D-63 AWS S3 버킷 생성 - 삽질의 시작
• ACL
  AWS 공식 매뉴얼 > ACL(액세스 제어 목록) 개요
  AWS 공식 매뉴얼 > ACL 구성
  AWS 공식 매뉴얼 > ACL을 사용한 액세스 관리
• ACL 사용 중지 권장
  AWS 공식 매뉴얼 > 객체 소유권 제어 및 버킷에 대해 ACL 사용 중지
  AWS 공식 매뉴얼 > Amazon S3의 Identity and Access Management

How do you fix this XML file does not appear to have any style information?

What does this XML file does not appear to have any style information associated with it the document tree is shown below?

How do I import a CSV file into AWS?

How do I enable CORS Cloudfront?