SvelteKit을 사용하여 HTTP 기본 인증으로 페이지를 보호하는 방법

원래posted on my blog .


SvelteKit에서 관리 섹션이나 데모 앱과 같은 페이지에 간단한 인증을 추가하고 싶습니까? 글쎄, HTTP Basic Auth 당신이 찾고있는 것일 수 있습니다.

그러나 시작하기 전에 사용자 이름/비밀번호를 base64로 인코딩amongst other concerns하여 전송하기 때문에 HTTP 기본 인증이 매우 안전한 것으로 간주되지 않는다는 점을 알고 있어야 합니다. HTTPS를 사용하는 경우(이렇게 해야 합니다!) 이 특정 공격 벡터는 문제가 되지 않지만 여전히 이러한 요소를 고려해야 하며 고객/사용자 대면 로그인에는 절대 사용하지 않아야 합니다. 나는 HTTP Basic이 사이트의 페이지 또는 섹션을 (다소) 보호하는 유용하고 빠른 방법이라고 생각합니다. HTTP 기본을 선택하는 경우 보호하려는 페이지가 생각만큼 안전하지 않을 수 있다는 점에 유의하십시오.

좋아, 계속해!

이를 달성하려면 모든 요청에서 호출되는 handle hook을 사용하여 모든 서버 측 요청을 가로채야 합니다.

그런 다음 URL 경로 이름이 /admin로 시작하는지 확인하여 /admin를 포함하는 모든 페이지가 HTTP 기본 인증(예: /admin , /admin/reports ) 뒤에서 보호되도록 합니다.

그런 다음 Authorization 헤더를 확인하여 사용자가 로그인을 시도했는지(또는 로그인 대화 상자를 취소했는지) 사용자 이름:암호 콤보(base64 인코딩)와 비교하여 확인합니다. 일치하지 않으면 로그인되지 않은 것이므로 401 오류와 함께 권한이 부여되지 않았음을 나타냅니다.

올바른 사용자 이름:암호 콤보를 입력하여 로그인에 성공하면 원하는 관리자 페이지로 이동됩니다.

import type { Handle } from "@sveltejs/kit";
import { ADMIN_LOGIN } from "$env/static/private";

export const handle: Handle = async ({ event }) => {
    const url = new URL(event.request.url);

    if (url.pathname.startsWith("/admin")) {
        const auth = event.request.headers.get("Authorization");

        if (auth !== `Basic ${btoa(ADMIN_LOGIN)}`) {
            return new Response("Not authorized", {
                status: 401,
                headers: {
                    "WWW-Authenticate":
                        'Basic realm="User Visible Realm", charset="UTF-8"',
                },
            });
        }
    }

    return resolve(event);
};

그런 다음 .env 파일(및 호스팅 공급자의 환경 변수 관리 시스템에서 설정)에서 사용자 이름/암호 콤보를 설정합니다.

ADMIN_LOGIN="admin:sekret"

이제 /admin 또는 다른 위치에 페이지를 생성하고 로드를 시도하십시오. 로그인 프롬프트가 표시되고 사용자 이름에 admin를 입력하고 암호에 sekret를 입력하면 관리자 Svelte 페이지가 표시되어야 합니다.


더 많은 웹 개발 및 시작 관련 콘텐츠를 보려면 나를 팔로우하고 Github