메타 정보 관련 태그
이 문서는 메타 정보와 관련된 태그에 대해 설명합니다.
SEO, 반응형 디자인 및 Content-Security-Policy와 관련된 사항들을 포함하여 <meta> 태그에 대해 설명합니다.
YouTube Video
메타 정보 관련 태그
<meta> 태그
1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta>태그는 HTML 문서에 대한 메타데이터를 제공합니다. 메타데이터는 페이지에 표시되지 않지만 검색 엔진과 브라우저에서 사용됩니다.<meta>태그는 페이지 설명, 키워드, 작성자 정보, 반응형 디자인 설정에 사용됩니다.
<meta name="viewport"> 태그
1<meta name="viewport" content="width=device-width, initial-scale=1">- 태그는 다양한 장치에서 웹 페이지의 레이아웃과 스케일링을 제어합니다. 모바일 장치에서 적절한 디스플레이를 보장하기 위해 반응형 디자인에 일반적으로 사용됩니다.
<meta name="description"> 태그
1<meta name="description" content="An example webpage">- 태그는 웹 페이지의 내용을 간략하게 설명하는 데 사용됩니다. 검색 엔진은 이 설명을 사용하여 검색 결과에서 페이지의 요약을 표시합니다.
<meta name="keywords"> 태그
1<meta name="keywords" content="HTML, CSS, JavaScript">- 태그는 페이지 내용과 관련된 키워드 목록을 제공합니다. 검색 엔진은 이러한 키워드를 사용하여 페이지 내용을 보다 잘 이해합니다.
<meta name="author"> 태그
1<meta name="author" content="John Doe">- 태그는 웹 페이지의 저자를 지정합니다. 이 정보는 주로 검색 엔진과 도구에서 페이지의 저자를 정확하게 식별하는 데 사용됩니다.
<meta http-equiv="refresh"> 태그
1<meta http-equiv="refresh" content="5; url=https://example.com">- 태그는 일정 시간이 지난 후 페이지를 자동으로 새로 고치거나 다른 URL로 리디렉션하는 데 사용됩니다. 페이지를 다시 로드하거나 사용자를 리디렉션하는 데 유용합니다.
<meta http-equiv="cache-control"> 태그
1<meta http-equiv="cache-control" content="no-cache">- 태그는 웹 페이지의 캐싱 동작을 제어하는 데 사용됩니다. 페이지를 캐시할지 여부 또는 후속 접속 시 재검증할지를 지정할 수 있습니다.
<meta http-equiv="expires"> 태그
1<meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT">- 태그는 페이지 콘텐츠의 만료 날짜를 설정합니다. 지정된 날짜가 지나면 콘텐츠가 만료되며, 브라우저는 새 버전을 가져오도록 요청됩니다.
<meta http-equiv="X-UA-Compatible"> 태그
1<meta http-equiv="X-UA-Compatible" content="IE=edge">- 태그는 인터넷 익스플로러의 호환성 모드를 지정하는 데 사용됩니다. 이 태그는 브라우저가 페이지를 표시하는 데 적합한 버전의 렌더링 엔진을 사용하도록 합니다.
<meta http-equiv="content-security-policy"> 태그
HTML meta 태그의 http-equiv="content-security-policy" 속성은 브라우저에서 특정 보안 규칙을 적용하여 웹 페이지 보안을 강화하는 기능입니다. 이 속성을 사용하여 웹사이트 개발자는 XSS(크로스 사이트 스크립팅) 및 데이터 삽입과 같은 공격을 방지하기 위해 리소스 로딩 및 스크립트 실행과 관련된 정책을 설정할 수 있습니다.
Content-Security-Policy란 무엇입니까?
Content-Security-Policy (CSP)는 웹 페이지가 로드할 수 있는 외부 리소스(이미지, 스크립트, 스타일시트 등)와 실행할 수 있는 코드의 유형을 제어하는 데 사용되는 HTTP 헤더입니다. 이는 일반적으로 HTTP 헤더로 전송되지만 HTML에서 meta 태그를 사용하여 정의할 수도 있습니다. 이 방법을 사용하면 서버 측에서 헤더를 설정하는 대신 클라이언트 측에서 CSP를 지정할 수 있습니다.
예를 들어, HTML meta 태그에서 다음과 같이 CSP를 설정할 수 있습니다:.
1<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://example.com; script-src 'self' https://apis.google.com">이 예에서 설정된 정책은 다음과 같습니다.
default-src 'self': 기본적으로 모든 리소스는 동일한 출처(자신)에서만 로드됩니다.img-src https://example.com: 이미지는https://example.com에서만 로드됩니다.script-src 'self' https://apis.google.com: 스크립트는 동일한 출처 또는https://apis.google.com에서만 실행될 수 있습니다.
http-equiv와 HTTP 헤더 간의 차이점
일반적으로 Content-Security-Policy는 서버에서 클라이언트로 HTTP 헤더 형식으로 전송됩니다. 그러나 meta 태그를 사용하여 클라이언트 측에서 설정하는 경우 HTML에 직접 작성할 수 있습니다.
그러나 HTTP 헤더로 설정하는 것과 meta 태그로 지정하는 것 사이에는 몇 가지 중요한 차이점이 있습니다:
-
우선순위: HTTP 헤더를 통해 전송된 CSP는
meta태그에 지정된 CSP보다 우선 적용됩니다. 즉, 서버 측에서 CSP가 설정된 경우 클라이언트 측의meta태그로 덮어쓰지 않습니다. -
적용 시점: HTTP 헤더를 통해 지정된 CSP는 페이지가 로드되기 전에 적용됩니다. 반면,
meta태그를 통해 지정된 CSP는 HTML이 파싱될 때 적용되므로 리소스가 이미 로드되었을 수 있습니다.
CSP에서 사용할 수 있는 지시문
CSP에서는 특정 유형의 리소스 로드 및 실행 허용 여부를 지정하는 다양한 지시어를 사용합니다. 일반적인 지시문에는 다음과 같은 것들이 있습니다:.
- default-src: 모든 리소스에 대한 기본 소스 정책을 지정합니다. 다른 지시어로 지정되지 않은 리소스에 적용됩니다.
- script-src: JavaScript의 소스를 지정합니다. XSS 공격을 방지하기 위해 외부 사이트에서 스크립트를 로드하는 것을 제한할 수 있습니다.
- style-src: CSS의 소스를 지정합니다. 외부 소스에서 스타일시트를 로드하는 것을 제한함으로써 사이트의 스타일에 대한 공격을 방지할 수 있습니다.
- img-src: 이미지의 소스를 지정합니다. 외부 소스에서 이미지를 로드하는 것을 제한할 수 있습니다.
- connect-src: XMLHttpRequest 및 WebSocket 연결을 허용하는 URL을 지정합니다. 이는 외부 API 및 WebSocket 통신의 보안을 보장합니다.
이 지시문들을 조합하면 웹 페이지의 리소스에 대한 상세한 정책을 수립할 수 있습니다.
보안을 강화하기 위한 실용적인 CSP 설정
아래는 웹사이트 보안을 강화하기 위한 CSP 설정 예제입니다. 이는 XSS 공격 및 데이터 유출 위험을 줄일 수 있습니다.
1<meta http-equiv="Content-Security-Policy"
2 content="default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none'; style-src 'self'; base-uri 'self'; form-action 'self';">이 설정으로 적용된 정책은 다음과 같습니다:
default-src 'self': 모든 리소스는 동일 출처에서만 로드됩니다.script-src 'self' https://trusted-cdn.com: 스크립트는 동일 출처 또는 신뢰할 수 있는 CDN에서만 로드됩니다.object-src 'none':object태그는 사용되지 않습니다. 이는 Flash 또는 플러그인 기반 공격을 방지하기 위한 것입니다.style-src 'self': 스타일 시트는 출처 자체에서만 로드됩니다.base-uri 'self':<base>태그로 설정된 URL 기반은 출처 자체로 제한됩니다.form-action 'self': 폼 제출 대상은 출처 자체로 제한됩니다. 이렇게 하면 폼 데이터가 외부 사이트로 전송되는 위험이 줄어듭니다.
결론
http-equiv="content-security-policy"를 사용하여 HTML에서 CSP를 정의하면 웹 페이지의 보안을 강화할 수 있습니다. 적절하게 구성된 CSP는 XSS 공격 및 데이터 유출 위험을 줄이고 웹사이트를 보호하는 강력한 도구입니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.