2023. 3. 15. 16:38ㆍ컴퓨터지식/웹
💢발생 상황
서버에서 제공하는 리소스를 자바스크립트 fetch로 받아와서 화면에 동적으로 보여주는 연습을 하던 중
해당 코드를 를 깃 블로그에 커밋해서 올리고 깃 페이지로 확인하니 에러가 발생함.
💡원인
깃을 포함한 대부분의 사이트와 브라우저는 xss 위험때문에 보안상 https프토로콜을 지원한다.
리소스를 받아오는 주소는 http 프로토콜을 사용하고 있어서
로컬에서 테스트할때는 문제가 없었으나 깃페이지로 확인하려니
mixed content 에러가 발생하였음.
🔧해결 방법
보안상 깃에서 제공하는 https 프로토콜을 변경할 수는 없었으며
w3c에서 지정한 표준 헤더인 Content-Security-Policy를 사용해서 해결해야 했다.
html 메타태그에 아래의 내용을 추가하여 해당 리소스를 https로 변경하거나 받지않거나 결정하여야 한다.
혼합된 https, http 프로토콜을 통한 호출을 모두 https을 통한 호출로 변경
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">http 프로토콜을 통한 호출은 막는 정책
<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">📖참고
https://webstone.tistory.com/98
CSP(Content-Security Policy)
콘텐츠 보안 정책(Content-Security policy)은 신뢰할 수있는 웹 페이지 컨텍스트에서 악의적 인 콘텐츠 실행으로 인한 크로스 사이트 스크립팅, 클릭 재킹 및 기타 코드 삽입 공격을 방지하기 위해 도
webstone.tistory.com
https://jdh5202.tistory.com/820
CSP(Content-Security-Policy)
CSP 개요 Mozilla가 개발한 표준으로 XSS, Data Injection, Click Jacking 등의 공격을 방지하기 위한 컨텐츠 기반 보안 정책 SOP(Same Origin Policy)와 비슷하지만 CSP는 웹 사이트 관리자가 규칙 적용 웹 서버는 웹
jdh5202.tistory.com
How to fix "insecure content was loaded over HTTPS, but requested an insecure resource"
This URL: https://slowapi.com I can't find the insecure content and the Chrome keeps complaining, Any ideas?
stackoverflow.com
📝느낀점
웹개발을 할때에 있어서 프로토콜과 같은 미들웨어 지식은 필수라고 생각한다.