Rumah > Artikel > hujung hadapan web > Menguasai Dasar Keselamatan Kandungan (CSP) untuk Aplikasi JavaScript: Panduan Praktikal

Menguasai Dasar Keselamatan Kandungan (CSP) untuk Aplikasi JavaScript: Panduan Praktikal

WBOYasal: 2024-07-18 10:15:41473semak imbas

Mastering Content Security Policy (CSP) for JavaScript Applications: A Practical Guide

Dalam landskap keselamatan web yang sentiasa berkembang, Dasar Keselamatan Kandungan (CSP) telah muncul sebagai alat yang berkuasa untuk membantu pembangun melindungi aplikasi mereka daripada pelbagai bentuk serangan, terutamanya Cross-Site Skrip (XSS). Blog ini akan membawa anda melalui asas-asas CSP, cara melaksanakannya dan memberikan contoh dunia sebenar untuk membantu anda menguasai penggunaannya.

Apakah Dasar Keselamatan Kandungan (CSP)?

Dasar Keselamatan Kandungan (CSP) ialah ciri keselamatan yang membantu menghalang pelbagai serangan dengan mengawal sumber yang dibenarkan untuk dimuatkan dan dilaksanakan oleh tapak web. Dengan mentakrifkan CSP, anda boleh menentukan skrip, gaya dan sumber lain yang boleh dimuatkan, sekali gus mengurangkan risiko serangan XSS dan suntikan data dengan ketara.

Mengapa Menggunakan CSP?

1. Kurangkan Serangan XSS: Dengan mengehadkan sumber dari mana skrip boleh dimuatkan, CSP membantu menghalang penyerang daripada menyuntik skrip berniat jahat.

2. Kawalan Pemuatan Sumber: CSP membolehkan anda mengawal dari mana tapak anda memuatkan sumber seperti imej, skrip, helaian gaya dan banyak lagi.

3. Cegah Suntikan Data: CSP boleh membantu menghalang serangan yang bertujuan untuk menyuntik data yang tidak diingini ke dalam tapak anda.

Struktur Asas CSP

CSP ditakrifkan menggunakan pengepala HTTP Content-Security-Policy. Berikut ialah contoh mudah tentang rupa pengepala CSP:

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline'

Dalam dasar ini:

default-src 'self': Secara lalai, hanya benarkan sumber dari asal yang sama.
script-src 'self' https://trusted.cdn.com: Benarkan skrip dari asal yang sama dan CDN yang dipercayai.
style-src 'self' 'unsafe-inline': Benarkan gaya daripada asal dan gaya sebaris yang sama.

Melaksanakan CSP dalam Aplikasi JavaScript Anda

Langkah 1: Tentukan Dasar Anda

Mulakan dengan menentukan sumber mana yang perlu dimuatkan oleh aplikasi anda. Ini termasuk skrip, gaya, imej, fon, dsb.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">

Langkah 2: Tambahkan Pengepala CSP pada Pelayan Anda

Jika anda menggunakan pelayan Express.js, anda boleh menetapkan pengepala CSP seperti berikut:

const express = require('express');
const helmet = require('helmet');
const app = express();

app.use(helmet.contentSecurityPolicy({
    directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "https://trusted.cdn.com"],
        styleSrc: ["'self'", "'unsafe-inline'"],
        imgSrc: ["'self'", "data:"],
    }
}));

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

Langkah 3: Uji CSP Anda

Setelah CSP anda tersedia, ujinya dengan teliti. Gunakan alat pembangun penyemak imbas untuk menyemak sama ada sebarang sumber disekat. Laraskan dasar mengikut keperluan untuk memastikan aplikasi anda berfungsi dengan betul sambil kekal selamat.

Contoh: Melaksanakan CSP dalam Projek Contoh

Mari kita pertimbangkan halaman HTML ringkas yang memuatkan skrip dan gaya daripada CDN yang dipercayai.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline';">
    <title>Secure CSP Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
</head>
<body>
    <h1>Content Security Policy Example</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            console.log('jQuery is working!');
        });
    </script>
</body>
</html>

Dalam contoh ini:

Hanya sumber dari asal yang sama ('diri') dibenarkan secara lalai.
Skrip dibenarkan dari asal yang sama dan dari CDN cdnjs.cloudflare.com.
Gaya sebaris dibenarkan ('sebaris tidak selamat'), tetapi ini harus dielakkan jika boleh untuk keselamatan yang lebih baik.

Petua untuk CSP yang Kuat

1. Elakkan 'unsafe-inline' dan 'unsafe-eval': Ini membenarkan skrip dan gaya sebaris, yang boleh dieksploitasi. Gunakan dasar bukan berasaskan atau berasaskan cincang sebaliknya.

2. Gunakan Mod Laporan Sahaja: Mulakan dengan Content-Security-Policy-Report-Only untuk merekod pelanggaran tanpa menguatkuasakan dasar, membolehkan anda memperhalusi dasar.

3. Kemas Kini CSP secara kerap: Semasa aplikasi anda berkembang, pastikan CSP anda dikemas kini untuk mencerminkan keperluan sumber baharu dan amalan terbaik keselamatan.

Kesimpulan

Melaksanakan Dasar Keselamatan Kandungan yang mantap ialah langkah kritikal dalam melindungi aplikasi JavaScript anda daripada pelbagai serangan. Dengan memahami asas-asas CSP dan mengikuti amalan terbaik, anda boleh meningkatkan postur keselamatan aplikasi web anda dengan ketara. Mulakan dengan dasar asas, uji dengan teliti dan ulangi untuk mencapai keseimbangan sempurna antara fungsi dan keselamatan.

Atas ialah kandungan terperinci Menguasai Dasar Keselamatan Kandungan (CSP) untuk Aplikasi JavaScript: Panduan Praktikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html xss express Resource define if for while using JS default this http https

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Kaedah Tatasusunan Javascript yang biasa digunakan.Artikel seterusnya：Kaedah Tatasusunan Javascript yang biasa digunakan.

Artikel berkaitan

Lihat lagi