binchoo
commented
2 years ago 과제 식별
User → Browser
- [x] 로그인 페이지 작성
- [ ] 드래그 & 드롭 사용성을 지원하기 위한 JS 스니펫 참고: https://gist.github.com/rcorreia/2362544
Browser → Web Server
- [x] 스프링 시큐리티 폼 로그인 설정
- [x] 스프링 시큐리티 CSRF 설정
- [x] 스프링 MVC 멀티파트 업로드 사용
연관 이슈
| 제목 | 내용 |
|---|---|
| Cookies.get('XSRF-TOKEN') returns undefined | 쿠키로 토큰을 내려줄 때, HttpOnly 쿠키라서 읽지 못 하는 현상. |
Web Server → S3
- [x] AWS SDK
- 혹은 RestTemplate으로 직접 작성
- 혹은 Retrofit으로 선언적으로 작성
(SDK 설정 예)
@Configuration
public class AmazonS3Config {
@Bean
AmazonS3 amazonS3() throws IOException {
AmazonS3ClientBuilder clientBuilder = AmazonS3ClientBuilder.standard();
clientBuilder.setCredentials(credentialsProvider());
clientBuilder.setRegion("ap-northeast-1");
return clientBuilder.build();
}
@Bean
AWSCredentialsProvider credentialsProvider() throws IOException {
return new PropertiesFileCredentialsProvider(
new ClassPathResource("aws.properties").getFile().getAbsolutePath());
}
}연관 이슈
| 제목 | 내용 |
|---|---|
| Authenticating Requests: Using the Authorization Header | AWS에 인가된 AWS 요청 보내기 |
| sig-v4-header-based-auth | AWS 요청에 도장을 찍기위한 계산 과정 |
S3
https://awspolicygen.s3.amazonaws.com/policygen.html
- [x] 모든 Principal에 대해, 버킷의 모든 s3 오브젝트에 대한 GetObject 연산을 허용한다.
- [x] 특정 AWS User에 대해, 버킷의 모든 s3 오브젝트에 대해, x-amz-server-side-encryption 헤더가 있고 이 값이 AES256인 경우 PutObject 연산을 허용한다.
- [x] CORS를 모든 Origin에 대해 허용한다.
[ { "AllowedHeaders": [ "Authorization" ], "AllowedMethods": [ "GET" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [], "MaxAgeSeconds": 3000 } ]
개요
깃허브 이슈 작성 화면에서 이미지 파일을 드래그 & 드롭으로 업로드 하는 사용성을 흉내내 보자.
설계
User 사용성
https://127.0.0.1:8888로 도달한다.Web Browser 관점
https://127.0.0.1:8888/s3_upload에 멀티파트 업로드 요청을 보낸다.xsrf-token헤더에 토큰을 동봉한다.Web Server 관점
https://127.0.0.1:8888/s3_upload요청을 핸들링한다.@Part로 업로드된 파일을 획득한다. 확장자를 취득한다. 파일에 대응하는uuid를 만든다.s3://dragndrop-s3-upload/{user_id}/{uuid}.{ext}에 파일을 업로드한다.https://dragndrop-s3-upload.s3.ap-northeast-1.amazonaws.com/{user_id}/{uuid}.{ext}를 클라이언트로 내려 보낸다.Bucket 관점
x-amz-server-side-encryption헤더가 있고 이 값이AES256인 경우 PutObject 연산을 허용한다.