ASP.NET Core Blazor에 콘텐츠 보안 정책 적용

• base-uri: 페이지의 <base> 태그에 대한 URL을 제한합니다. 체계 및 포트 번호를 포함하여 앱의 원본이 유효한 원본임을 나타내려면 self를 지정합니다.
• default-src: 정책에 의해 명시적으로 지정되지 않은 원본 지시문의 대체를 나타냅니다. 체계 및 포트 번호를 포함하여 앱의 원본이 유효한 원본임을 나타내려면 self를 지정합니다.
• img-src: 이미지에 대한 유효한 원본을 나타냅니다.
  • data: URL에서 이미지가 로드되는 것을 허용하려면 data:를 지정합니다.
  • HTTPS 엔드포인트에서 이미지가 로드되는 것을 허용하려면 https:를 지정합니다.
• object-src: <object>, <embed>및 <applet> 태그에 대한 유효한 원본을 나타냅니다. 모든 URL 원본을 차단하려면 none을 지정합니다.
• script-src: 스크립트에 대한 유효한 원본을 나타냅니다.
  • 체계 및 포트 번호를 포함하여 앱의 원본이 유효한 원본임을 나타내려면 self를 지정합니다.
  • 클라이언트 쪽 Blazor 앱에서:
    • 클라이언트 측 wasm-unsafe-eval Mono 런타임이 작동하도록 허용하려면 Blazor을(를) 지정합니다.
    • 필요한 비 프레임워크 스크립트를 로드할 수 있도록 추가 해시를 지정합니다. 예를 들어, unsafe-hashes에 대한 해시를 sha256-qnHnQs7NjQNHHNYv/I9cW+I62HzDJjbnyS/OFzqlix0=으로 지정하여 NavMenu 구성 요소에서 탐색 토글러의 인라인 JavaScript를 허용합니다.
  • 서버 쪽 Blazor 앱에서 필요한 스크립트를 로드할 수 있도록 해시를 지정합니다.
• style-src: 스타일시트에 유효한 원본을 나타냅니다.
  • 체계 및 포트 번호를 포함하여 앱의 원본이 유효한 원본임을 나타내려면 self를 지정합니다.
  • 앱이 인라인 스타일을 사용하는 경우, unsafe-inline을 지정하여 인라인 스타일을 사용할 수 있도록 합니다.
• connect-src: 스크립트 인터페이스를 사용하여 로드할 수 있는 URL을 제한합니다. 스키마 원본 http:, ws: (WebSocket 프로토콜) 및 wss: (WebSocket Secure 프로토콜)가 지정됩니다.
• upgrade-insecure-requests: 안전하지 않은(HTTP) 원본의 콘텐츠 URL을 HTTPS를 통해 안전하게 획득해야 함을 나타냅니다.

• base-uri: 페이지의 <base> 태그에 대한 URL을 제한합니다. 체계 및 포트 번호를 포함하여 앱의 원본이 유효한 원본임을 나타내려면 self를 지정합니다.
• default-src: 정책에 의해 명시적으로 지정되지 않은 원본 지시문의 대체를 나타냅니다. 체계 및 포트 번호를 포함하여 앱의 원본이 유효한 원본임을 나타내려면 self를 지정합니다.
• img-src: 이미지에 대한 유효한 원본을 나타냅니다.
  • data: URL에서 이미지가 로드되는 것을 허용하려면 data:를 지정합니다.
  • HTTPS 엔드포인트에서 이미지가 로드되는 것을 허용하려면 https:를 지정합니다.
• object-src: <object>, <embed>및 <applet> 태그에 대한 유효한 원본을 나타냅니다. 모든 URL 원본을 차단하려면 none을 지정합니다.
• script-src: 스크립트에 대한 유효한 원본을 나타냅니다.
  • 체계 및 포트 번호를 포함하여 앱의 원본이 유효한 원본임을 나타내려면 self를 지정합니다.
  • 클라이언트 쪽 Blazor 앱에서:
    • 클라이언트 측 unsafe-eval Mono 런타임이 작동하도록 허용하려면 Blazor을(를) 지정합니다.
    • 필요한 비 프레임워크 스크립트를 로드할 수 있도록 추가 해시를 지정합니다.
  • 서버 쪽 Blazor 앱에서 필요한 스크립트를 로드할 수 있도록 해시를 지정합니다.
• style-src: 스타일시트에 유효한 원본을 나타냅니다.
  • 체계 및 포트 번호를 포함하여 앱의 원본이 유효한 원본임을 나타내려면 self를 지정합니다.
  • 앱이 인라인 스타일을 사용하는 경우, unsafe-inline을 지정하여 인라인 스타일을 사용할 수 있도록 합니다.
• connect-src: 스크립트 인터페이스를 사용하여 로드할 수 있는 URL을 제한합니다. 스키마 원본 http:, ws: (WebSocket 프로토콜) 및 wss: (WebSocket Secure 프로토콜)가 지정됩니다.
• upgrade-insecure-requests: 안전하지 않은(HTTP) 원본의 콘텐츠 URL을 HTTPS를 통해 안전하게 획득해야 함을 나타냅니다.

• base-uri: 페이지의 <base> 태그에 대한 URL을 제한합니다. 체계 및 포트 번호를 포함하여 앱의 원본이 유효한 원본임을 나타내려면 self를 지정합니다.
• default-src: 정책에 의해 명시적으로 지정되지 않은 원본 지시문의 대체를 나타냅니다. 체계 및 포트 번호를 포함하여 앱의 원본이 유효한 원본임을 나타내려면 self를 지정합니다.
• img-src: 이미지에 대한 유효한 원본을 나타냅니다.
  • data: URL에서 이미지가 로드되는 것을 허용하려면 data:를 지정합니다.
  • HTTPS 엔드포인트에서 이미지가 로드되는 것을 허용하려면 https:를 지정합니다.
• object-src: <object>, <embed>및 <applet> 태그에 대한 유효한 원본을 나타냅니다. 모든 URL 원본을 차단하려면 none을 지정합니다.
• script-src: 스크립트에 대한 유효한 원본을 나타냅니다.
  • 부트스트랩 스크립트의 경우 https://stackpath.bootstrapcdn.com/ 호스트 원본을 지정합니다.
  • 체계 및 포트 번호를 포함하여 앱의 원본이 유효한 원본임을 나타내려면 self를 지정합니다.
  • 클라이언트 쪽 Blazor 앱에서:
    • 클라이언트 측 unsafe-eval Mono 런타임이 작동하도록 허용하려면 Blazor을(를) 지정합니다.
    • 필요한 비 프레임워크 스크립트를 로드할 수 있도록 추가 해시를 지정합니다.
  • 서버 쪽 Blazor 앱에서 필요한 스크립트를 로드할 수 있도록 해시를 지정합니다.
• style-src: 스타일시트에 유효한 원본을 나타냅니다.
  • 부트스트랩 스타일시트의 경우 https://stackpath.bootstrapcdn.com/ 호스트 원본을 지정합니다.
  • 체계 및 포트 번호를 포함하여 앱의 원본이 유효한 원본임을 나타내려면 self를 지정합니다.
  • 인라인 스타일의 사용을 허용하려면 unsafe-inline을 지정합니다.
• connect-src: 스크립트 인터페이스를 사용하여 로드할 수 있는 URL을 제한합니다. 스키마 원본 http:, ws: (WebSocket 프로토콜) 및 wss: (WebSocket Secure 프로토콜)가 지정됩니다.
• upgrade-insecure-requests: 안전하지 않은(HTTP) 원본의 콘텐츠 URL을 HTTPS를 통해 안전하게 획득해야 함을 나타냅니다.

• base-uri: 페이지의 <base> 태그에 대한 URL을 제한합니다. 체계 및 포트 번호를 포함하여 앱의 원본이 유효한 원본임을 나타내려면 self를 지정합니다.
• default-src: 정책에 의해 명시적으로 지정되지 않은 원본 지시문의 대체를 나타냅니다. 체계 및 포트 번호를 포함하여 앱의 원본이 유효한 원본임을 나타내려면 self를 지정합니다.
• img-src: 이미지에 대한 유효한 원본을 나타냅니다.
  • data: URL에서 이미지가 로드되는 것을 허용하려면 data:를 지정합니다.
  • HTTPS 엔드포인트에서 이미지가 로드되는 것을 허용하려면 https:를 지정합니다.
• object-src: <object>, <embed>및 <applet> 태그에 대한 유효한 원본을 나타냅니다. 모든 URL 원본을 차단하려면 none을 지정합니다.
• script-src: 스크립트에 대한 유효한 원본을 나타냅니다.
  • 부트스트랩 스크립트의 경우 https://stackpath.bootstrapcdn.com/ 호스트 원본을 지정합니다.
  • 체계 및 포트 번호를 포함하여 앱의 원본이 유효한 원본임을 나타내려면 self를 지정합니다.
  • 클라이언트 쪽 Blazor 앱에서:
    • 필요한 스크립트의 로드를 허용하는 해시를 지정합니다.
    • 문자열로부터 코드를 만들기 위해 unsafe-eval 및 메서드를 사용하려면 eval()을 지정합니다.
  • 서버 쪽 Blazor 앱에서 필요한 스크립트를 로드할 수 있도록 해시를 지정합니다.
• style-src: 스타일시트에 유효한 원본을 나타냅니다.
  • 부트스트랩 스타일시트의 경우 https://stackpath.bootstrapcdn.com/ 호스트 원본을 지정합니다.
  • 체계 및 포트 번호를 포함하여 앱의 원본이 유효한 원본임을 나타내려면 self를 지정합니다.
  • 인라인 스타일의 사용을 허용하려면 unsafe-inline을 지정합니다. 초기 요청 후 클라이언트와 서버를 다시 연결하려면 UI에 인라인 선언이 필요합니다. 이후 릴리스에서는 unsafe-inline이 더 이상 필요하지 않도록 인라인 스타일이 제거될 수 있습니다.
• connect-src: 스크립트 인터페이스를 사용하여 로드할 수 있는 URL을 제한합니다. 스키마 원본 http:, ws: (WebSocket 프로토콜) 및 wss: (WebSocket Secure 프로토콜)가 지정됩니다.
• upgrade-insecure-requests: 안전하지 않은(HTTP) 원본의 콘텐츠 URL을 HTTPS를 통해 안전하게 획득해야 함을 나타냅니다.

Blazor Web App 또는 Blazor Server 앱의 경우:

<meta http-equiv="Content-Security-Policy" content="
    base-uri 'self';
    default-src 'self';
    img-src data: https:;
    object-src 'none';
    script-src 'self' 'wasm-unsafe-eval' 'unsafe-hashes' 
        'sha256-qnHnQs7NjQNHHNYv/I9cW+I62HzDJjbnyS/OFzqlix0=';
    style-src https:;
    connect-src 'self' http: ws: wss:;
    upgrade-insecure-requests;" />

Blazor Web Apps는 다음 변경 사항 중 하나가 필요한 onclick 구성 요소에 인라인 NavMenu JavaScript 이벤트 처리기를 포함합니다.

• script-src 키워드를 사용하여 unsafe-hashes 지시문에 해시를 추가합니다.

  'unsafe-hashes' 'sha256-qnHnQs7NjQNHHNYv/I9cW+I62HzDJjbnyS/OFzqlix0='
  

  자세한 내용은 CSP: script-src: 안전하지 않은 인라인 스크립트(MDN 설명서)를 참조하세요.

• 인라인 JavaScript 이벤트 처리기를 정책에서 로드할 수 있는 JavaScript 파일 또는 모듈로 이동합니다.

Blazor Web Apps에는 ImportMap 콘텐츠에 <head> 구성 요소가 있으며, 이는 인라인 가져오기 맵 <script> 태그를 렌더링합니다. 정책을 수정하여 가져오기 맵을 로드할 수 있도록 하려면 SRI(하위 리소스 무결성) 또는 암호화된 nonce를 사용하여 CSP 위반 문제 해결 섹션을 참조하세요.

앱의 경우 Blazor Server :

<meta http-equiv="Content-Security-Policy" content="
    base-uri 'self';
    default-src 'self';
    img-src data: https:;
    object-src 'none';
    script-src 'self';
    style-src 'self';
    connect-src 'self' http: ws: wss:;
    upgrade-insecure-requests">

앱의 경우 Blazor Server :

<meta http-equiv="Content-Security-Policy" content="
    base-uri 'self';
    default-src 'self';
    img-src data: https:;
    object-src 'none';
    script-src 'self' https://stackpath.bootstrapcdn.com/;
    style-src 'self' 'unsafe-inline' https://stackpath.bootstrapcdn.com/;
    connect-src 'self' http: ws: wss:;
    upgrade-insecure-requests">

앱의 경우 Blazor Server :

<meta http-equiv="Content-Security-Policy" content="
    base-uri 'self';
    default-src 'self';
    img-src data: https:;
    object-src 'none';
    script-src 'self' https://stackpath.bootstrapcdn.com/ 
        'sha256-34WLX60Tw3aG6hylk0plKbZZFXCuepeQ6Hu7OqRf8PI=';
    style-src 'unsafe-inline' https://stackpath.bootstrapcdn.com/;
    connect-src 'self' http: ws: wss:;
    upgrade-insecure-requests">

<meta http-equiv="Content-Security-Policy" content="
    base-uri 'self';
    default-src 'self';
    img-src data: https:;
    object-src 'none';
    script-src 'self' 'wasm-unsafe-eval';
    style-src 'self';
    connect-src 'none';
    upgrade-insecure-requests">

<meta http-equiv="Content-Security-Policy" content="
    base-uri 'self';
    default-src 'self';
    img-src data: https:;
    object-src 'none';
    script-src 'self' 'unsafe-eval';
    style-src 'self';
    connect-src 'none';
    upgrade-insecure-requests">

<meta http-equiv="Content-Security-Policy" content="
    base-uri 'self';
    default-src 'self';
    img-src data: https:;
    object-src 'none';
    script-src 'self' 'unsafe-eval' 
        'sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA=';
    style-src 'self';
    connect-src 'none';
    upgrade-insecure-requests">

<meta http-equiv="Content-Security-Policy" content="
    base-uri 'self';
    default-src 'self';
    img-src data: https:;
    object-src 'none';
    script-src 'self' 'unsafe-eval' https://stackpath.bootstrapcdn.com/ 
        'sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA=';
    style-src 'self' 'unsafe-inline' https://stackpath.bootstrapcdn.com/;
    upgrade-insecure-requests">

<meta http-equiv="Content-Security-Policy" content="
    base-uri 'self';
    default-src 'self';
    img-src data: https:;
    object-src 'none';
    script-src 'self' 'unsafe-eval' https://stackpath.bootstrapcdn.com/ 
        'sha256-v8ZC9OgMhcnEQ/Me77/R9TlJfzOBqrMTW8e1KuqLaqc=' 
        'sha256-If//FtbPc03afjLezvWHnC3Nbu4fDM04IIzkPaf3pH0=' 
        'sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA=';
    style-src 'self' 'unsafe-inline' https://stackpath.bootstrapcdn.com/;
    upgrade-insecure-requests">

비Development 환경에서 CSP 적용

CSP가 Blazor 앱의 <head> 콘텐츠에 적용될 때 Development 환경에서 로컬 테스트에 방해가 됩니다. 예를 들어 브라우저 링크 및 브라우저 새로 고침 스크립트가 로드되지 않습니다. 다음 예제에서는 비<meta> 환경에서 CSP의 Development 태그를 적용하는 방법을 보여 줍니다.

세 가지 일반적인 방법을 사용할 수 있습니다.

• 구성 요소를 통해 CSP를 App 적용합니다. 이 구성 요소는 앱의 모든 레이아웃에 CSP를 적용합니다.
• 앱의 여러 영역에 CSP를 적용해야 하는 경우, 예를 들어 관리자 페이지에만 사용자 지정 CSP를 적용해야 한다면, <HeadContent> 태그를 사용하여 레이아웃 단위로 CSP를 적용합니다. 완전한 효율성을 위해 모든 앱 레이아웃 파일은 접근 방식을 채택해야 합니다.
• 호스팅 서비스 또는 서버는 앱의 나가는 응답에 추가된 헤더를 통해 CSP를 제공할 수 있습니다. 이 방법은 서비스 또는 서버를 호스팅하는 방법에 따라 다르므로 다음 예제에서는 다루지 않습니다. 이 방법을 채택하려면 호스팅 서비스 공급자 또는 서버에 대한 설명서를 참조하세요.

Blazor Web App 접근

App 구성 요소(Components/App.razor)에서 IHostEnvironment를 삽입합니다.

@inject IHostEnvironment Env

App 구성 요소의 <head> 콘텐츠에서 Development 환경이 아닌 경우, CSP를 적용합니다.

@if (!Env.IsDevelopment())
{
    <meta ...>
}

또는 다음 예제와 같이 폴더의 Components/Layout 레이아웃별로 CSP를 적용합니다. 모든 레이아웃이 CSP를 지정하는지 확인합니다.

@inject IHostEnvironment Env

@if (!Env.IsDevelopment())
{
    <HeadContent>
        <meta ...>
    </HeadContent>
}

Blazor WebAssembly 앱 접근 방식

App 구성 요소(App.razor)에서 IWebAssemblyHostEnvironment를 삽입합니다.

@using Microsoft.AspNetCore.Components.WebAssembly.Hosting
@inject IWebAssemblyHostEnvironment Env

App 구성 요소의 <head> 콘텐츠에서 Development 환경이 아닌 경우, CSP를 적용합니다.

@if (!Env.IsDevelopment())
{
    <HeadContent>
        <meta ...>
    </HeadContent>
}

또는 이전 코드를 사용하되, Layout 폴더에서 레이아웃별로 CSP를 적용합니다. 모든 레이아웃이 CSP를 지정하는지 확인합니다.