대화 내용
재현
https://jojoldu.tistory.com/582
모니터링 툴에서 Script error가 쌓이는 상황에 대한 설명과 해결책이 자세히 나와있어 공유드립니다.
renew의 메인 페이지 컨트롤러, 사이드 페이지 컨트롤러에서 s3에서 vue 리소스를 받아오는 script 태그에 crossorigin="anonymous" 를 심고,
s3에서 Access-Controll-Allow-Origin을 운영 도메인만 열어두면, 보안 상 이슈 없이 상세 에러 로그를 확인할 수 있을 것 같습니다.
s3에서 불러오는 vue 리소스 파일에서 에러 발생 시에 renew를 구동하는 WAS와 출처가 달라 Script Error로 표시되는 것으로 예상됩니다.(renew 프로젝트 내부 코드에러면 에러로그가 정상적으로 찍힐 것 같습니다.)
고로, 현재 RUM에서 찍히는 Script Error 로그는 jsp가 아닌 CDN을 통해 가져온 리소스에서의 에러로 보이는데, vue에서의 에러가 대부분일 것 같아서 빨리 확인해보는게 좋을 것 같다고 생각됩니다!
재현
안녕하세요ㅎㅎ
rum script 에러 관련해서 의견 여쭤보고 싶은게 있습니다!
script error 상세로그를 모니터링 결과에 담으려면 crossorigin="anonymous" 옵션을 추가해서 script를 호출해야합니다.
해당 옵션을 추가하게 되면 자격증명(HTTP토큰, 쿠키)을 보내지 않고, Origin만 보내게 되는데, 현재 s3에서 해당 리소스 응답 조건에 자격증명을 사용하지 않는 것으로 보여서, 오히려 민감한 자격증명 정보를 보내지 않아 보안적으로 더 유리해보입니다.
현재 s3에서 Access Control Allow Origin이 *로 되어있어서 layoutSpaMainPage.jsp layoutSpaPage.jsp 에서만 crossorigin="anonymous" 옵션을 추가하면 정상동작할 것 같습니다.
추가적인 보안처리가 필요하다면 s3에서 운영 도메인 origin만 허용하게끔 변경하는 것도 괜찮을 것 같습니다.
정리
- Script Error 발생
- crossorigin="anonymous" 추가
- S3 ACAO 설정
- 상세 에러 로그 확인
AS-IS
장점
- 보안상 크로스오리진 에러 메시지 숨김
고려할 점
- RUM에서 "Script Error"만 표시되어 디버깅 불가
TO-BE
장점
- crossorigin="anonymous"로 상세 에러 로그 확인 가능
- 자격증명 미전송으로 오히려 보안 유리
고려할 점
- S3 Access-Control-Allow-Origin 설정 필요
프론트 모니터링에서 'Script error' 문제를 해결하기 위해, s3에서 vue 리소스를 받아오는 script 태그에 'crossorigin="anonymous"'를 추가하고, s3의 'Access-Controll-Allow-Origin'을 운영 도메인만 허용하도록 설정하면, 보안 문제 없이 상세 에러 로그를 확인할 수 있습니다. 이렇게 하면, CDN을 통해 가져온 리소스에서 발생하는 에러를 확인하고, 빠르게 대응할 수 있습니다.