Amalan Terbaik Keselamatan JavaScript yang penting untuk Pembangun Web

Sebagai pembangun web, saya telah mengetahui bahawa keselamatan adalah terpenting apabila membina aplikasi JavaScript. Selama bertahun-tahun, saya telah menghadapi pelbagai cabaran dan melaksanakan pelbagai strategi untuk meningkatkan keteguhan aplikasi web. Dalam artikel ini, saya akan berkongsi lapan amalan terbaik keselamatan JavaScript penting yang saya dapati penting untuk mencipta aplikasi web yang selamat dan boleh dipercayai.

Pengesahan Input

Salah satu aspek keselamatan aplikasi web yang paling kritikal ialah pengesahan input yang betul. Input pengguna ialah titik masuk yang berpotensi untuk pelakon yang berniat jahat, dan kegagalan untuk membersihkan dan mengesahkannya boleh membawa kepada kelemahan keselamatan yang teruk. Saya sentiasa memastikan bahawa semua input pengguna disemak dan dibersihkan dengan teliti sebelum memprosesnya.

Berikut ialah contoh cara saya melaksanakan pengesahan input dalam kod JavaScript saya:

function validateInput(input) {
  // Remove any HTML tags
  let sanitizedInput = input.replace(/<[^>]*>/g, '');

  // Remove any special characters
  sanitizedInput = sanitizedInput.replace(/[^\w\s]/gi, '');

  // Trim whitespace
  sanitizedInput = sanitizedInput.trim();

  // Check if the input is not empty and within a reasonable length
  if (sanitizedInput.length > 0 && sanitizedInput.length <= 100) {
    return sanitizedInput;
  } else {
    throw new Error('Invalid input');
  }
}

// Usage
try {
  const userInput = document.getElementById('userInput').value;
  const validatedInput = validateInput(userInput);
  // Process the validated input
} catch (error) {
  console.error('Input validation failed:', error.message);
}

Fungsi ini mengalih keluar teg HTML, aksara khas dan memangkas ruang kosong. Ia juga menyemak sama ada input berada dalam panjang yang munasabah. Dengan melaksanakan pengesahan sedemikian, kami boleh mengurangkan risiko serangan suntikan dan tingkah laku yang tidak dijangka dengan ketara dalam aplikasi kami.

Dasar Keselamatan Kandungan

Dasar Keselamatan Kandungan (CSP) ialah ciri keselamatan berkuasa yang membantu menghalang serangan skrip merentas tapak (XSS) dan serangan suntikan kod lain. Dengan melaksanakan pengepala CSP, kami boleh mengawal sumber yang dibenarkan untuk dimuatkan dan dilaksanakan dalam aplikasi web kami.

Begini cara saya biasanya menyediakan CSP dalam aplikasi Express.js saya:

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

const app = express();

app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "'unsafe-inline'", 'https://trusted-cdn.com'],
    styleSrc: ["'self'", 'https://fonts.googleapis.com'],
    imgSrc: ["'self'", 'data:', 'https:'],
    connectSrc: ["'self'", 'https://api.example.com'],
    fontSrc: ["'self'", 'https://fonts.gstatic.com'],
    objectSrc: ["'none'"],
    upgradeInsecureRequests: []
  }
}));

// Your routes and other middleware

Konfigurasi ini mengehadkan pemuatan sumber kepada sumber yang dipercayai tertentu, membantu mengurangkan serangan XSS dan pemuatan sumber yang tidak dibenarkan.

HTTPS

Melaksanakan HTTPS adalah penting untuk melindungi penghantaran data antara pelanggan dan pelayan. Ia menyulitkan data dalam transit, menghalang serangan orang di tengah dan memastikan integriti maklumat yang ditukar.

Dalam aplikasi Node.js saya, saya sentiasa menggunakan HTTPS, walaupun dalam persekitaran pembangunan. Berikut ialah contoh mudah cara saya menyediakan pelayan HTTPS:

const https = require('https');
const fs = require('fs');
const express = require('express');

const app = express();

const options = {
  key: fs.readFileSync('path/to/private-key.pem'),
  cert: fs.readFileSync('path/to/certificate.pem')
};

https.createServer(options, app).listen(443, () => {
  console.log('HTTPS server running on port 443');
});

// Your routes and other middleware

Pengesahan Selamat

Melaksanakan pengesahan selamat adalah penting untuk melindungi akaun pengguna dan maklumat sensitif. Saya sentiasa menggunakan dasar kata laluan yang kukuh dan kaedah pengesahan selamat seperti OAuth atau JSON Web Token (JWT).

Berikut ialah contoh cara saya melaksanakan pengesahan JWT dalam aplikasi Express.js saya:

const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcrypt');

const app = express();
app.use(express.json());

const SECRET_KEY = 'your-secret-key';

// User login
app.post('/login', async (req, res) => {
  const { username, password } = req.body;

  // In a real application, you would fetch the user from a database
  const user = await findUserByUsername(username);

  if (!user || !(await bcrypt.compare(password, user.passwordHash))) {
    return res.status(401).json({ message: 'Invalid credentials' });
  }

  const token = jwt.sign({ userId: user.id }, SECRET_KEY, { expiresIn: '1h' });

  res.json({ token });
});

// Middleware to verify JWT
function verifyToken(req, res, next) {
  const token = req.headers['authorization'];

  if (!token) {
    return res.status(403).json({ message: 'No token provided' });
  }

  jwt.verify(token, SECRET_KEY, (err, decoded) => {
    if (err) {
      return res.status(401).json({ message: 'Invalid token' });
    }
    req.userId = decoded.userId;
    next();
  });
}

// Protected route
app.get('/protected', verifyToken, (req, res) => {
  res.json({ message: 'Access granted to protected resource' });
});

// Your other routes

Contoh ini menunjukkan aliran pengesahan JWT asas, termasuk log masuk pengguna dan fungsi perisian tengah untuk mengesahkan token untuk laluan yang dilindungi.

Perlindungan Pemalsuan Permintaan Merentas Tapak

Serangan Pemalsuan Permintaan Rentas Tapak (CSRF) boleh mendatangkan kemusnahan jika tidak ditangani dengan betul. Saya sentiasa melaksanakan perlindungan CSRF dalam aplikasi saya untuk menghalang tindakan yang tidak dibenarkan bagi pihak pengguna yang disahkan.

Begini cara saya biasanya melaksanakan perlindungan CSRF menggunakan perisian tengah csurf dalam Express.js:

function validateInput(input) {
  // Remove any HTML tags
  let sanitizedInput = input.replace(/<[^>]*>/g, '');

  // Remove any special characters
  sanitizedInput = sanitizedInput.replace(/[^\w\s]/gi, '');

  // Trim whitespace
  sanitizedInput = sanitizedInput.trim();

  // Check if the input is not empty and within a reasonable length
  if (sanitizedInput.length > 0 && sanitizedInput.length <= 100) {
    return sanitizedInput;
  } else {
    throw new Error('Invalid input');
  }
}

// Usage
try {
  const userInput = document.getElementById('userInput').value;
  const validatedInput = validateInput(userInput);
  // Process the validated input
} catch (error) {
  console.error('Input validation failed:', error.message);
}

Persediaan ini menjana token CSRF yang unik untuk setiap permintaan dan mengesahkannya pada penyerahan borang, melindungi daripada serangan CSRF.

Pengendalian Kuki Selamat

Pengendalian kuki yang betul adalah penting untuk mengekalkan keselamatan sesi dan melindungi maklumat sensitif. Saya sentiasa menetapkan bendera Secure dan HttpOnly pada kuki untuk meningkatkan keselamatannya.

Berikut ialah contoh cara saya menetapkan kuki selamat dalam aplikasi Express.js saya:

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

const app = express();

app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "'unsafe-inline'", 'https://trusted-cdn.com'],
    styleSrc: ["'self'", 'https://fonts.googleapis.com'],
    imgSrc: ["'self'", 'data:', 'https:'],
    connectSrc: ["'self'", 'https://api.example.com'],
    fontSrc: ["'self'", 'https://fonts.gstatic.com'],
    objectSrc: ["'none'"],
    upgradeInsecureRequests: []
  }
}));

// Your routes and other middleware

Tetapan ini memastikan bahawa kuki hanya dihantar melalui sambungan selamat, tidak boleh diakses oleh skrip sebelah klien dan dilindungi daripada serangan permintaan merentas tapak.

Pengurusan Perpustakaan Pihak Ketiga

Mengurus perpustakaan pihak ketiga ialah aspek penting dalam mengekalkan keselamatan aplikasi. Saya sentiasa berusaha untuk mengemas kini kebergantungan secara kerap dan mengauditnya untuk kelemahan yang diketahui.

Berikut ialah aliran kerja biasa saya untuk mengurus kebergantungan:

1. Kemas kini pakej secara kerap:

const https = require('https');
const fs = require('fs');
const express = require('express');

const app = express();

const options = {
  key: fs.readFileSync('path/to/private-key.pem'),
  cert: fs.readFileSync('path/to/certificate.pem')
};

https.createServer(options, app).listen(443, () => {
  console.log('HTTPS server running on port 443');
});

// Your routes and other middleware

1. Semak pakej yang sudah lapuk:

const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcrypt');

const app = express();
app.use(express.json());

const SECRET_KEY = 'your-secret-key';

// User login
app.post('/login', async (req, res) => {
  const { username, password } = req.body;

  // In a real application, you would fetch the user from a database
  const user = await findUserByUsername(username);

  if (!user || !(await bcrypt.compare(password, user.passwordHash))) {
    return res.status(401).json({ message: 'Invalid credentials' });
  }

  const token = jwt.sign({ userId: user.id }, SECRET_KEY, { expiresIn: '1h' });

  res.json({ token });
});

// Middleware to verify JWT
function verifyToken(req, res, next) {
  const token = req.headers['authorization'];

  if (!token) {
    return res.status(403).json({ message: 'No token provided' });
  }

  jwt.verify(token, SECRET_KEY, (err, decoded) => {
    if (err) {
      return res.status(401).json({ message: 'Invalid token' });
    }
    req.userId = decoded.userId;
    next();
  });
}

// Protected route
app.get('/protected', verifyToken, (req, res) => {
  res.json({ message: 'Access granted to protected resource' });
});

// Your other routes

1. Pakej audit untuk kelemahan:

const express = require('express');
const csrf = require('csurf');
const cookieParser = require('cookie-parser');

const app = express();

app.use(cookieParser());
app.use(csrf({ cookie: true }));

app.use((req, res, next) => {
  res.locals.csrfToken = req.csrfToken();
  next();
});

app.get('/form', (req, res) => {
  res.send(`
    <form action="/submit" method="POST">
      <input type="hidden" name="_csrf" value="${req.csrfToken()}">
      <input type="text" name="data">
      <button type="submit">Submit</button>
    </form>
  `);
});

app.post('/submit', (req, res) => {
  res.send('Form submitted successfully');
});

app.use((err, req, res, next) => {
  if (err.code !== 'EBADCSRFTOKEN') return next(err);
  res.status(403).send('Invalid CSRF token');
});

// Your other routes and middleware

1. Betulkan kelemahan apabila boleh:

const express = require('express');
const session = require('express-session');

const app = express();

app.use(session({
  secret: 'your-secret-key',
  resave: false,
  saveUninitialized: true,
  cookie: {
    secure: true, // Ensures the cookie is only sent over HTTPS
    httpOnly: true, // Prevents client-side access to the cookie
    sameSite: 'strict', // Prevents the cookie from being sent in cross-site requests
    maxAge: 3600000 // Sets the cookie expiration time (1 hour in this example)
  }
}));

// Your routes and other middleware

Saya juga menggunakan alatan seperti Snyk atau npm-check-updates untuk mengautomasikan proses ini dan menerima makluman tentang kemungkinan isu keselamatan dalam tanggungan saya.

Pengendalian Ralat yang Betul

Pengendalian ralat yang betul bukan hanya tentang meningkatkan pengalaman pengguna; ia juga merupakan langkah keselamatan yang penting. Saya sentiasa melaksanakan halaman ralat tersuai dan mengelak daripada mendedahkan maklumat sensitif dalam mesej ralat.

Berikut ialah contoh cara saya mengendalikan ralat dalam aplikasi Express.js saya:

npm update

Persediaan ini menyediakan halaman ralat tersuai untuk respons 404 (Tidak Ditemui) dan 500 (Ralat Pelayan Dalaman), menghalang pendedahan surih tindanan sensitif atau butiran ralat kepada pengguna.

Kesimpulannya, melaksanakan lapan amalan terbaik keselamatan JavaScript ini telah meningkatkan keteguhan dan keselamatan aplikasi web saya dengan ketara. Dengan memfokuskan pada pengesahan input, dasar keselamatan kandungan, HTTPS, pengesahan selamat, perlindungan CSRF, pengendalian kuki selamat, pengurusan perpustakaan pihak ketiga dan pengendalian ralat yang betul, saya telah dapat mencipta aplikasi yang lebih selamat dan boleh dipercayai.

Adalah penting untuk ambil perhatian bahawa keselamatan ialah proses yang berterusan. Apabila ancaman baharu muncul dan teknologi berkembang, kita mesti sentiasa berwaspada dan sentiasa mengemas kini amalan keselamatan kita. Audit keselamatan yang kerap, ujian penembusan dan sentiasa mendapat maklumat tentang arah aliran keselamatan terkini adalah sebahagian daripada mengekalkan postur keselamatan yang kukuh.

Ingat, keselamatan bukan sekadar melaksanakan amalan ini sekali dan melupakannya. Ini mengenai memupuk minda mengutamakan keselamatan dalam semua aspek pembangunan. Setiap baris kod yang kami tulis, setiap ciri yang kami laksanakan dan setiap keputusan yang kami buat harus dilihat melalui lensa keselamatan.

Dengan mengutamakan keselamatan dalam aplikasi JavaScript kami, kami bukan sahaja melindungi pengguna kami dan data mereka tetapi juga membina kepercayaan dan kredibiliti untuk produk kami. Dalam landskap digital hari ini, di mana pelanggaran data dan serangan siber semakin kerap berlaku, strategi keselamatan yang teguh bukan sekadar bagus untuk dimiliki – ia adalah satu keperluan mutlak.

Sebagai pembangun, kami bertanggungjawab untuk mencipta bukan sahaja aplikasi yang berfungsi dan mesra pengguna, tetapi juga yang selamat. Dengan mengikuti amalan terbaik ini dan mendidik diri sendiri secara berterusan tentang keselamatan, kami boleh menyumbang kepada ekosistem web yang lebih selamat dan terjamin untuk semua orang.

---

Ciptaan Kami

Pastikan anda melihat ciptaan kami:

Pusat Pelabur | Pelabur Central Spanish | Pelabur Jerman Tengah | Hidup Pintar | Epos & Gema | Misteri Membingungkan | Hindutva | Pembangunan Elit | Sekolah JS

---

Kami berada di Medium

Tech Koala Insights | Dunia Epok & Gema | Medium Pusat Pelabur | Medium Misteri Membingungkan | Sains & Zaman Sederhana | Hindutva Moden

Atas ialah kandungan terperinci Amalan Terbaik Keselamatan JavaScript yang penting untuk Pembangun Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!