TL;DR: Pastikan apl web anda selamat dengan 5 teknik penting ini: sahkan dan bersihkan input, laksanakan dasar keselamatan kandungan, gunakan integriti subsumber, ikut selamat Amalan JavaScript, dan menjalankan audit keselamatan secara tetap. Lindungi apl web daripada pelaksanaan JavaScript yang tidak dibenarkan dan lindungi pengguna anda.
Pada awal tahun 2024, satu siri serangan siber mengeksploitasi kelemahan skrip merentas tapak (XSS) yang disimpan dalam pemalam WordPress popular seperti WP Statistics, WP Meta SEO dan LiteSpeed Cache. Serangan ini membenarkan penyerang menyuntik JavaScript berniat jahat, menjejaskan lebih 5 juta pemasangan aktif.
Seperti yang anda lihat, serangan ini merupakan ancaman besar kepada aplikasi web pada masa kini. Ia boleh mengakibatkan kebocoran data, kecurian identiti dan, akhirnya, kehilangan keyakinan pelanggan. Menurut Penyelidikan HackerOne, serangan XSS merangkumi 23% daripada semua ancaman keselamatan yang dilaporkan pada tahun 2020, menjadikannya yang paling kerap berlaku.
Artikel ini akan menerangkan lima teknik untuk melindungi apl anda daripada pelaksanaan JavaScript yang tidak dibenarkan.
Ini terutamanya melibatkan pengesahan sama ada input pengguna berada dalam format yang dijangkakan. Contohnya, data dalam medan teks e-mel hendaklah alamat e-mel yang sah dan data dalam medan teks nama pengguna hendaklah mengikut struktur nama pengguna yang dijangkakan.
Sanitasi membersihkan input ini dengan melucutkan sebarang data hasad yang boleh digunakan dalam serangan seperti suntikan XSS dan SQL. Kedua-dua ini adalah langkah keselamatan kritikal untuk mana-mana apl web dan ia berfungsi sebagai barisan pertahanan pertama terhadap data berniat jahat yang mungkin dimasukkan oleh pengguna.
Pengesahan borang sebelah pelanggan ialah semakan awal proses pengesahan data. Walau bagaimanapun, ini tidak boleh dipercayai semata-mata untuk tujuan keselamatan kerana JavaScript boleh dilumpuhkan atau dimanipulasi, dengan mudah memintas semakan pihak pelanggan.
Rujuk contoh kod berikut pengesahan asas sisi klien menggunakan HTML 5.
<form> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <input type="submit" value="Submit"> </form>
Untuk melihat dengan lebih komprehensif tentang pengesahan borang pihak pelanggan, terokai panduan terperinci ini.
Pengesahan bahagian pelayan memastikan semua input disahkan, tanpa mengira status pengesahan pihak klien. Ia meningkatkan keselamatan dengan memastikan bahawa data berniat jahat tidak pernah mencapai logik apl teras anda atau pengesahan pangkalan data pada pelayan. Ia juga kurang terdedah kepada gangguan.
Rujuk contoh kod berikut bagi pengesahan bahagian pelayan asas menggunakan Node.js dengan Express.
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/submit', (req, res) => {
const email = req.body.email;
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
return res.status(400).send('Invalid email format.');
}
// Process the valid email.
res.send('Email is valid!');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
Sanitasi memastikan bahawa sebarang data yang berpotensi berbahaya dialih keluar atau diubah kepada format yang selamat. Contoh kod berikut membersihkan input menggunakan pustaka pengesah dalam Node.js.
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const validator = require('validator');
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/submit', (req, res) => {
let email = req.body.email;
if (!validator.isEmail(email)) {
return res.status(400).send('Invalid email format.');
}
email = validator.normalizeEmail(email);
// Process the sanitized email
res.send('Email is valid and sanitized!');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
Ini ialah penyelesaian keselamatan yang kukuh untuk melindungi apl web daripada ancaman seperti XSS dan suntikan data. Melaksanakan CSP memastikan bahawa hanya skrip daripada sumber khusus yang diluluskan boleh dijalankan pada halaman web anda. Ini mengurangkan dengan ketara kemungkinan pelaksanaan kod berniat jahat.
Dalam istilah yang lebih mudah, anggap CSP sebagai bouncer untuk apl web anda. Ia menyemak dari mana skrip itu datang dan hanya membenarkan skrip daripada sumber yang dipercayai, mengelakkan skrip yang tidak baik.
Melaksanakan CSP melibatkan penambahan arahan CSP pada pengepala respons HTTP pelayan web anda. Arahan CSP ialah arahan yang memberitahu pelayar sumber mana yang dibenarkan untuk memuatkan dan melaksanakan kandungan pada halaman web. Arahan ini menyediakan kawalan terperinci ke atas pelbagai jenis sumber.
Arahan utama termasuk:
Anda boleh menambah CSP pada pengepala respons HTTP melalui konfigurasi pelayan web anda. Rujuk contoh kod berikut untuk menyediakan CSP dalam pelayan Apache.
Header set Content-Security-Policy "default-src 'self'; img-src *"
Untuk Nginx, anda boleh mengkonfigurasi CSP seperti berikut.
add_header Content-Security-Policy "default-src 'self'; img-src *"
Jika anda tidak boleh mengakses konfigurasi pelayan web, anda boleh memasukkan CSP terus dalam fail HTML anda menggunakan teg . Tetapi ini bukan cara yang disyorkan.
<head> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src *""> </head>
This security feature helps browsers check if the resources obtained from a third party (for instance, a CDN) have been modified. It allows you to provide a cryptographic hash for these resources.
When the browser gets the resource, it compares its hash to the given hash. If the hash does not match, the resources will not be loaded, thereby protecting your app from malicious modifications.
Implementing SRI involves adding a cryptographic hash to the integrity attribute of your or tags. Here’s a step-by-step guide to setting up SRI:
You must generate a hash for the resource you want to include in your webpage. This can be done using a tool or online service like the Subresource Integrity Generator tool.
Once you have the hash, add it to the integrity attribute of the or < link> tag.
Refer to the following code example.
<script src="https://example.com/script.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxqAtD6x48V2aB1xzA7e2h53sF2aAuM" crossorigin="anonymous"></script>
In this example, the integrity attribute contains the hash, and the crossorigin=”anonymous” attribute ensures the resource is fetched with CORS (cross-origin resource sharing).
You can use SRI for stylesheets, as well.
<link rel="stylesheet" href="https://example.com/styles.css" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxqAtD6x48V2aB1xzA7e2h53sF2aAuM" crossorigin="anonymous">
Secure JavaScript coding practices are crucial for developing web apps robust against various attacks, XSS, and other malicious exploits. By following these best practices, developers can ensure their code is secure, maintainable, and less vulnerable to unauthorized execution.
The eval() function is a significant security risk, as it executes a string of code, potentially allowing attackers to inject malicious scripts. Always avoid using eval() and similar functions like setTimeout(string) and setInterval(string).
Why these functions are dangerous:
Enabling strict mode in JavaScript helps catch common coding mistakes and unsafe actions, such as assigning values to undeclared variables. This improves the security and stability of your code. To enable strict mode, add “use strict”; at the beginning of a script or a function.
"use strict";
function safeFunction() {
// Code in strict mode.
let secureVariable = "Secure";
console.log(secureVariable);
}
safeFunction();
Refer to the following code example.
"use strict";
// Eliminates this coercion.
function showThis() {
console.log(this); // In non-strict mode, this would be the global object; in strict mode, it's undefined.
}
showThis();
// Disallows duplicate property names or parameter values.
// This will throw an error in strict mode.
const obj = {
prop: 1,
prop: 2
};
// Prevents the use of with statement.
// This will throw an error in strict mode.
with (Math) {
let x = cos(3.14);
}
Inline JavaScript can be significantly vulnerable to XSS attacks because it allows attackers to inject malicious scripts directly into your HTML. Instead, use external scripts to ensure all JavaScript is properly vetted and sanitized.
Avoid inline JavaScript because of:
Refer to the following code example.
<!-- Insecure Inline JavaScript -->
<!-- <button onclick="alert('Clicked!')">Click Me</button> -->
<!-- Secure External JavaScript -->
<button id="secureButton">Click Me</button>
<script>
document.getElementById('secureButton').addEventListener('click', function() {
alert('Clicked!');
});
</script>
Regular audits are essential for maintaining the integrity and security of web apps. By continuously assessing your app’s security, you can identify and fix vulnerabilities that could be exploited to execute unauthorized JavaScript or other malicious actions.
Gunakan alatan seperti OWASP ZAP atau Burp Suite untuk mengimbas kelemahan yang diketahui. Imbasan automatik menyediakan cara cepat untuk mengenal pasti isu keselamatan biasa.
Semak semula pangkalan kod anda secara manual untuk mengetahui isu yang mungkin terlepas oleh alatan automatik. Adalah lebih baik untuk menggunakan pembangun berpengalaman dan pakar keselamatan untuk ini.
Upah penguji penembusan untuk mensimulasikan serangan pada apl anda, mendedahkan kelemahan yang mungkin tidak dapat dikesan oleh kaedah lain.
Pastikan kebergantungan anda dikemas kini untuk membetulkan kelemahan yang diketahui dalam perpustakaan dan rangka kerja. Gunakan pengurus pakej seperti NPM atau pip untuk mengurus kemas kini.
Latih pasukan pembangunan anda secara berterusan tentang amalan keselamatan terkini dan kelemahan biasa. Ini akan memastikan pasukan anda dilengkapi untuk menulis kod selamat.
Terima kasih kerana membaca artikel ini. Kami berharap 5 teknik ini meningkatkan pertahanan apl anda terhadap pelaksanaan JavaScript yang tidak dibenarkan. Dengan melaksanakan strategi ini, anda boleh mengurangkan risiko serangan dan memastikan apl web yang lebih selamat dan selamat untuk pengguna anda. Ingat, kekal proaktif dan berwaspada dalam langkah keselamatan anda adalah kunci untuk melindungi aset digital anda.
Pustaka kawalan UI JavaScript Syncfusion ialah satu-satunya suite yang anda perlukan untuk membina apl kerana ia mengandungi lebih 85 komponen UI berprestasi tinggi, ringan, modular dan responsif dalam satu pakej.
Untuk pelanggan semasa, versi terbaru Essential Studio tersedia daripada halaman Lesen dan Muat Turun. Jika anda bukan pelanggan Syncfusion, anda sentiasa boleh memuat turun penilaian percuma kami untuk melihat semua kawalan kami.
Anda juga boleh menghubungi kami melalui forum sokongan, portal sokongan atau portal maklum balas kami. Kami sentiasa berbesar hati untuk membantu anda!
Atas ialah kandungan terperinci Teknik teratas untuk Melindungi Apl Web daripada Perlaksanaan JavaScript Tanpa Kebenaran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
