Helmet có thể giúp bảo vệ app của bạn khỏi một số lỗ hổng web đã được biết đến, bằng cách thiết lập các HTTP header phù hợp. Về cơ bản, Helmet chỉ là một tập hợp các middleware function nhỏ, mỗi function thiết lập một HTTP header liên quan đến bảo mật (đọc thêm).
Gợi ý Lưu ý rằng việc áp dụng helmet như global middleware hoặc đăng ký nó phải được thực hiện trước các lệnh gọi app.use() khác hoặc các hàm setup có thể gọi app.use(). Điều này là do cách nền tảng bên dưới (tức Express hoặc Fastify) hoạt động, nơi thứ tự khai báo middleware/route có ý nghĩa quan trọng. Nếu bạn dùng middleware như helmet hay cors sau khi đã khai báo một route, middleware đó sẽ không áp dụng cho route đó, nó chỉ áp dụng cho các route được khai báo sau middleware.
Dùng với Express (mặc định)
Bắt đầu bằng việc cài package cần thiết.
$ npm i --save helmet
Sau khi cài xong, áp dụng nó như một global middleware.
import helmet from 'helmet';
// somewhere in your initialization file
app.use(helmet());
Cảnh báo Khi dùng helmet, @apollo/server (4.x), và Apollo Sandbox, có thể xảy ra vấn đề với CSP (Content Security Policy) trên Apollo Sandbox. Để giải quyết vấn đề này, hãy cấu hình CSP như dưới đây:
app.use(helmet({
crossOriginEmbedderPolicy: false,
contentSecurityPolicy: {
directives: {
imgSrc: [`'self'`, 'data:', 'apollo-server-landing-page.cdn.apollographql.com'],
scriptSrc: [`'self'`, `https: 'unsafe-inline'`],
manifestSrc: [`'self'`, 'apollo-server-landing-page.cdn.apollographql.com'],
frameSrc: [`'self'`, 'sandbox.embed.apollographql.com'],
},
},
}));
Dùng với Fastify
Nếu bạn dùng FastifyAdapter, cài package @fastify/helmet:
$ npm i --save @fastify/helmet
fastify-helmet không nên được dùng như một middleware, mà nên dùng như một Fastify plugin, tức là thông qua app.register():
import helmet from '@fastify/helmet'
// somewhere in your initialization file
await app.register(helmet)
Cảnh báo Khi dùng apollo-server-fastify và @fastify/helmet, có thể xảy ra vấn đề với CSP trên GraphQL playground, để giải quyết xung đột này, hãy cấu hình CSP như dưới đây:
await app.register(fastifyHelmet, {
contentSecurityPolicy: {
directives: {
defaultSrc: [`'self'`, 'unpkg.com'],
styleSrc: [
`'self'`,
`'unsafe-inline'`,
'cdn.jsdelivr.net',
'fonts.googleapis.com',
'unpkg.com',
],
fontSrc: [`'self'`, 'fonts.gstatic.com', 'data:'],
imgSrc: [`'self'`, 'data:', 'cdn.jsdelivr.net'],
scriptSrc: [
`'self'`,
`https: 'unsafe-inline'`,
`cdn.jsdelivr.net`,
`'unsafe-eval'`,
],
},
},
});
// If you are not going to use CSP at all, you can use this:
await app.register(fastifyHelmet, {
contentSecurityPolicy: false,
});
Ghi chú người dịch helmet thực chất chỉ là một chuỗi middleware Express được ghép sẵn — tương đương việc bạn tự viết vài dòng res.setHeader(...) cho từng header như X-Content-Type-Options, Strict-Transport-Security, X-Frame-Options trong một middleware Express hoặc Laravel thủ công. Lưu ý quan trọng nhất khi vibe-code: nếu bạn gọi app.use(helmet()) sau khi đã khai báo route (hoặc sau middleware khác đã trả response), header sẽ không được áp cho các route khai báo trước đó — đây là lỗi thứ tự middleware rất dễ mắc, không phải lỗi của helmet.