CSP(Content Security Policy)

개인 포트폴리오 사이트를 만들던 중 iframe을 통해 modal을 구현하였다.

해당 iframe에서 GitHub 링크를 클릭하였더니 아래와 같은 에러가 출력된다.

해당 에러를 이해하기 위해서는 먼저 CSP에 대해 알아야 한다

CSP(Content Security Policy)

위 이미지는 XSS attack으로 SQL Injection과 함께 많이 사용되는 기초적인 웹 공격 방법이다.
사용자는 악성 url을 통해 서버 요청을 보내고 악성 스크립트를 응답받아 공격을 당하게 된다.
이러한 공격을 막기 위해 브라우저에서는 CSP 정책을 실행한다.

CSP를 통해 사용자는 서버에 요청을 보낼 때 응답으로 CSP 헤더를 반환하게 한다 해당 이후 브라우저는 해당 CSP 헤더에 있는 자원들만 로드하여 페이지를 구성한다.

에러 원인

내 에러의 원인은 CSP의 frame-ancestors 속성이 none으로 설정되어 iframe 안에서 GitHub를 열지 못하는것이였다. frame-ancestors의 각 속성들은 아래와 같다.

none: iframe 태그를 사용하여 로드할 수 있는 페이지가 없습니다.
self: 현재 페이지만 iframe 태그를 사용하여 로드할 수 있습니다.
unsafe-inline: CSP 정책을 무시하고 iframe 태그를 사용하여 로드할 수 있습니다.
https://example.com: https://example.com 페이지만 iframe 태그를 사용하여 로드할 수 있습니다.
https://example.com https://example.net: https://example.com과 https://example.net 페이지만 iframe 태그를 사용하여 로드할 수 있습니다.

해결 방법

iframe 안에서 GitHub를 열려고하였기 때문에 발생한 에러였다 나는 GitHub를 새탭으로 띄우는것이 목표기에 href 태그로 여는것을 아래와 같이 수정하였다.

document.getElementById("pjt_gitHub").addEventListener("click", () => {
		window.open("https://github.com/Function3333/SSTV", "_blank");
	});

이 방법 외에도 html의 meta 태그에 CSP를 허용 할 리소스들을 명시하거나 백엔드 서버 설정을 통해 CSP를 허용 할 리소스들을 설정 할 수 있다.