SvelteKit uygulamanıza güvenlik üstbilgileri ekleme

   Kasım 23, 2024  Posted in Mix


Evet, beni doğru duydunuz: SvelteKit. Son birkaç haftadır kendimi SvelteKit’i kullanarak giderek daha fazla tam yığın uygulamalar geliştirirken buldum. Çerçeveyle ilgili çekincelerim var ama bu blog yazısının konusu bu değil.

Bütüne uygun olarak sola kaydırma Felsefe olarak, uygulamamın tamamına güvenlik üstbilgileri eklemeyi kolaylaştırmak istedim. Kaskın Ekspres uygulamalara bağlanmasına benzer şekilde, SvelteKit’in de bir tutamak kancası kullanarak benzer bir şey yapabileceğini buldum.

Tüm yanıt nesnelerinde başlıkları yapılandırmanın yolu, src/hooks.server.ts. Yanıt, daha sonra yanıt başlıklarının ayarlanmasına olanak tanıyan olayın çözülmesinden oluşur.

import type { Handle } from "@sveltejs/kit";

const securityHeaders = {
    'Cross-Origin-Embedder-Policy': 'require-corp',
    'Cross-Origin-Opener-Policy': 'same-origin',
    // [...]
    'X-XSS-Protection': '0',
}

export const handle: Handle = async ({ event, resolve }) => {
    const response = await resolve(event);
    Object.entries(securityHeaders).forEach(
        ([header, value]) => response.headers.set(header, value)
    );

    return response;
}

Artık tüm Kask varsayılanları mevcut olduğundan, yanıt başlıkları HTTP yanıtında görülebilir.

❯ curl -I http://localhost:5173/
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
content-length: 879
content-security-policy: script-src 'self' 'nonce-Y70QFNhAVmer2wdobT8YoQ=='
content-type: text/html
cross-origin-embedder-policy: require-corp
cross-origin-opener-policy: same-origin
cross-origin-resource-policy: same-origin
etag: "1maoxiy"
origin-agent-cluster: ?1
referrer-policy: no-referrer
strict-transport-security: max-age=15552000; includeSubDomains
x-content-type-options: nosniff
x-dns-prefetch-control: off
x-download-options: noopen
x-frame-options: SAMEORIGIN
x-permitted-cross-domain-policies: none
x-sveltekit-page: true
x-xss-protection: 0
Date: Wed, 25 Jan 2023 11:58:03 GMT
Connection: keep-alive
Keep-Alive: timeout=5

kullanarak hızlı bir tarama shcheck Bu çözümün işe yarayıp yaramadığını doğrulamak için.

❯ python shcheck.py http://localhost:5173/ | grep -i "Missing"
[!] Missing security header: Permissions-Policy

Hadi ama!



Source link