Menerapkan Kebijakan Keamanan Konten untuk ASP.NET Core Blazor

Artikel ini menjelaskan cara menggunakan Kebijakan Keamanan Konten (CSP) dengan aplikasi ASP.NET Core Blazor untuk membantu melindungi dari serangan Scripting Lintas Situs (XSS ).

Cross-Site Scripting (XSS) adalah kerentanan keamanan di mana penyerang menempatkan satu atau beberapa skrip sisi klien berbahaya ke dalam konten yang dirender aplikasi. CSP membantu melindungi dari serangan XSS dengan menginformasikan browser yang valid:

• Sumber untuk konten yang dimuat, termasuk skrip, lembar gaya, gambar, dan plugin.
• Tindakan yang diambil oleh halaman, menentukan target URL formulir yang diizinkan.

Untuk menerapkan CSP ke aplikasi, pengembang menentukan beberapa arahan keamanan konten CSP di satu atau beberapa Content-Security-Policy header atau <meta> tag. Untuk panduan tentang menerapkan CSP ke aplikasi dalam kode C# saat startup, lihat startup ASP.NET CoreBlazor.

Kebijakan dievaluasi oleh browser saat halaman dimuat. Browser memeriksa sumber halaman dan menentukan apakah mereka memenuhi persyaratan arahan keamanan konten. Saat arahan kebijakan tidak terpenuhi untuk sumber daya, browser tidak memuat sumber daya. Misalnya, pertimbangkan kebijakan yang tidak mengizinkan skrip pihak ketiga. Saat halaman berisi <script> tag dengan asal pihak ketiga di src atribut , browser mencegah skrip dimuat.

CSP didukung di sebagian besar browser desktop dan seluler modern, termasuk Chrome, Edge, Firefox, Opera, dan Safari. CSP direkomendasikan untuk Blazor aplikasi.

Arahan kebijakan

Minimal, tentukan arahan dan sumber berikut untuk Blazor aplikasi. Tambahkan direktif dan sumber tambahan sesuai kebutuhan. Arahan berikut digunakan di bagian Terapkan kebijakan di artikel ini, di mana contoh kebijakan keamanan untuk Blazor aplikasi disediakan:

• base-uri: Membatasi URL untuk tag halaman <base> . Tentukan self untuk menunjukkan bahwa asal aplikasi, termasuk skema dan nomor port, adalah sumber yang valid.
• default-src: Menunjukkan fallback untuk arahan sumber yang tidak ditentukan secara eksplisit oleh kebijakan. Tentukan self untuk menunjukkan bahwa asal aplikasi, termasuk skema dan nomor port, adalah sumber yang valid.
• img-src: Menunjukkan sumber yang valid untuk gambar.
  • Tentukan data: untuk mengizinkan pemuatan gambar dari data: URL.
  • Tentukan https: untuk mengizinkan pemuatan gambar dari titik akhir HTTPS.
• object-src: Menunjukkan sumber yang valid untuk <object>tag , , <embed>dan <applet> . Tentukan none untuk mencegah semua sumber URL.
• script-src: Menunjukkan sumber yang valid untuk skrip.
  • Tentukan self untuk menunjukkan bahwa asal aplikasi, termasuk skema dan nomor port, adalah sumber yang valid.
  • Di aplikasi sisi Blazor klien:
    • Tentukan wasm-unsafe-eval untuk mengizinkan runtime Mono sisi Blazor klien berfungsi.
    • Tentukan hash tambahan untuk mengizinkan skrip non-kerangka kerja yang diperlukan untuk dimuat.
  • Di aplikasi sisi Blazor server, tentukan hash untuk mengizinkan skrip yang diperlukan untuk dimuat.
• style-src: Menunjukkan sumber yang valid untuk lembar gaya.
  • Tentukan self untuk menunjukkan bahwa asal aplikasi, termasuk skema dan nomor port, adalah sumber yang valid.
  • Jika aplikasi menggunakan gaya sebaris, tentukan unsafe-inline untuk mengizinkan penggunaan gaya sebaris Anda.
• upgrade-insecure-requests: Menunjukkan bahwa URL konten dari sumber yang tidak aman (HTTP) harus diperoleh dengan aman melalui HTTPS.

Arahan sebelumnya didukung oleh semua browser kecuali Microsoft Internet Explorer.

Untuk mendapatkan hash SHA untuk skrip sebaris tambahan:

• Terapkan CSP yang diperlihatkan di bagian Terapkan kebijakan .
• Akses konsol alat pengembang browser saat menjalankan aplikasi secara lokal. Browser menghitung dan menampilkan hash untuk skrip yang diblokir saat header atau meta tag CSP ada.
• Salin hash yang disediakan oleh browser ke script-src sumber. Gunakan tanda kutip tunggal di sekitar setiap hash.

Untuk matriks dukungan browser Kebijakan Keamanan Konten Tingkat 2, lihat Dapatkah saya menggunakan: Kebijakan Keamanan Konten Tingkat 2.

Menerapkan kebijakan

<meta> Gunakan tag untuk menerapkan kebijakan:

• Atur nilai atribut ke http-equivContent-Security-Policy.
• Tempatkan arahan dalam content nilai atribut. Pisahkan arahan dengan titik koma (;).
• Selalu tempatkan meta tag dalam <head> konten.

Bagian berikut menunjukkan contoh kebijakan. Contoh ini diberi versi dengan artikel ini untuk setiap rilis Blazor. Untuk menggunakan versi yang sesuai untuk rilis Anda, pilih versi dokumen dengan pemilih dropdown Versi di halaman web ini.

Aplikasi sisi Blazor server

<head> Dalam konten, terapkan arahan yang dijelaskan di bagian Arahan kebijakan:

<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';
               upgrade-insecure-requests;">

Tambahkan hash tambahan script-src seperti style-src yang diperlukan oleh aplikasi. Selama pengembangan, gunakan alat online atau alat pengembang browser untuk menghitung hash untuk Anda. Misalnya, kesalahan konsol alat browser berikut melaporkan hash untuk skrip yang diperlukan yang tidak dicakup oleh kebijakan:

Menolak untuk menjalankan skrip sebaris karena melanggar arahan Kebijakan Keamanan Konten berikut: " ... ". Baik kata kunci 'unsafe-inline', hash ('sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA='), atau nonce ('nonce-...') diperlukan untuk mengaktifkan eksekusi sebaris.

Skrip tertentu yang terkait dengan kesalahan ditampilkan di konsol di samping kesalahan.

Aplikasi sisi Blazor klien

<head> Dalam konten, terapkan arahan yang dijelaskan di bagian Arahan kebijakan:

<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';
               upgrade-insecure-requests;">

Tambahkan hash tambahan script-src seperti style-src yang diperlukan oleh aplikasi. Selama pengembangan, gunakan alat online atau alat pengembang browser untuk menghitung hash untuk Anda. Misalnya, kesalahan konsol alat browser berikut melaporkan hash untuk skrip yang diperlukan yang tidak dicakup oleh kebijakan:

Menolak untuk menjalankan skrip sebaris karena melanggar arahan Kebijakan Keamanan Konten berikut: " ... ". Baik kata kunci 'unsafe-inline', hash ('sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA='), atau nonce ('nonce-...') diperlukan untuk mengaktifkan eksekusi sebaris.

Skrip tertentu yang terkait dengan kesalahan ditampilkan di konsol di samping kesalahan.

Menerapkan CSP di non-lingkunganDevelopment

Saat CSP diterapkan ke Blazor konten aplikasi <head> , CSP mengganggu pengujian lokal di Development lingkungan. Misalnya, Tautan Browser dan skrip refresh browser gagal dimuat. Contoh berikut menunjukkan cara menerapkan tag CSP <meta> di non-lingkunganDevelopment .

Catatan

Contoh di bagian ini tidak menampilkan tag lengkap <meta> untuk CSP. Tag lengkap <meta> ditemukan di subbagian bagian Terapkan kebijakan sebelumnya di artikel ini.

Tiga pendekatan umum tersedia:

• Terapkan CSP melalui App komponen, yang menerapkan CSP ke semua tata letak aplikasi.
• Jika Anda perlu menerapkan CSP ke area aplikasi yang berbeda, misalnya CSP kustom hanya untuk halaman admin, terapkan CSP berdasarkan per tata letak menggunakan <HeadContent> tag. Untuk efektivitas lengkap, setiap file tata letak aplikasi harus mengadopsi pendekatan.
• Layanan atau server hosting dapat menyediakan CSP melalui header yang Content-Security-Policy menambahkan respons keluar aplikasi. Karena pendekatan ini bervariasi menurut layanan hosting atau server, pendekatan tersebut tidak dibahas dalam contoh berikut. Jika Anda ingin mengadopsi pendekatan ini, lihat dokumentasi untuk penyedia layanan hosting atau server Anda.

Blazor Pendekatan Aplikasi Web

App Dalam komponen (Components/App.razor), injeksi IHostEnvironment:

@inject IHostEnvironment Env

App Dalam konten komponen<head>, terapkan CSP saat tidak berada di Development lingkungan:

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

Atau, terapkan CSP berdasarkan per tata letak di Components/Layout folder, seperti yang ditunjukkan contoh berikut. Pastikan bahwa setiap tata letak menentukan CSP.

@inject IHostEnvironment Env

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

Blazor WebAssembly pendekatan aplikasi

App Dalam komponen (App.razor), injeksi IWebAssemblyHostEnvironment:

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

App Dalam konten komponen<head>, terapkan CSP saat tidak berada di Development lingkungan:

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

Atau, gunakan kode sebelumnya tetapi terapkan CSP berdasarkan per tata letak di Layout folder. Pastikan bahwa setiap tata letak menentukan CSP.

Batasan tag meta

Kebijakan <meta> tag tidak mendukung arahan berikut:

• frame-ancestors
• laporan ke
• report-uri
• Sandbox

Untuk mendukung arahan sebelumnya, gunakan header bernama Content-Security-Policy. String direktif adalah nilai header.

Menguji kebijakan dan menerima laporan pelanggaran

Pengujian membantu mengonfirmasi bahwa skrip pihak ketiga tidak diblokir secara tidak sengaja saat membangun kebijakan awal.

Untuk menguji kebijakan selama jangka waktu tertentu tanpa memberlakukan arahan kebijakan, atur <meta> atribut tag http-equiv atau nama header kebijakan berbasis header ke Content-Security-Policy-Report-Only. Laporan kegagalan dikirim sebagai JSdokumen ON ke URL tertentu. Untuk informasi selengkapnya, lihat dokumen web MDN: Content-Security-Policy-Report-Only.

Untuk pelaporan pelanggaran saat kebijakan aktif, lihat artikel berikut ini:

• laporan ke
• report-uri

Meskipun report-uri tidak lagi direkomendasikan untuk digunakan, kedua arahan harus digunakan sampai report-to didukung oleh semua browser utama. Jangan gunakan report-uri secara eksklusif karena dukungan untuk report-uri dapat dihilangkan kapan saja dari browser. Hapus dukungan untuk report-uri dalam kebijakan Anda saat report-to didukung sepenuhnya. Untuk melacak adopsi report-to, lihat Dapatkah saya menggunakan: report-to.

Uji dan perbarui kebijakan aplikasi setiap rilis.

Pecahkan masalah

• Kesalahan muncul di konsol alat pengembang browser. Browser menyediakan informasi tentang:
  • Elemen yang tidak mematuhi kebijakan.
  • Cara mengubah kebijakan untuk memungkinkan item yang diblokir.
• Kebijakan hanya sepenuhnya efektif ketika browser klien mendukung semua arahan yang disertakan. Untuk matriks dukungan browser saat ini, lihat Dapatkah saya menggunakan: Content-Security-Policy.

Sumber Daya Tambahan:

• Menerapkan CSP dalam kode C# saat startup
• Dokumen web MDN: Kebijakan Keamanan Konten (CSP)
• Dokumen web MDN: Header respons Content-Security-Policy
• Kebijakan Keamanan Konten Tingkat 2
• Google CSP Evaluator