Как защитить страницы с помощью HTTP Basic Auth с помощью SvelteKit

Первоначально опубликовано в моем блоге.

Хотите добавить простую аутентификацию на страницу, скажем, в раздел администратора или демонстрационное приложение, в SvelteKit? Что ж, HTTP Basic Auth может быть тем, что вы ищете.

Но прежде чем мы начнем, вы должны знать, что HTTP Basic Auth не считается очень безопасным, поскольку вы отправляете имя пользователя/пароль в кодировке base64, а также другие проблемы. Если вы используете HTTPS (а вы должны это делать!), то этот конкретный вектор атаки представляет меньшую опасность, но вы все равно должны учитывать эти факторы и категорически не должны использовать его для входа в систему на стороне клиента/пользователя. Я рассматриваю HTTP Basic как полезный и быстрый способ (в некоторой степени) защитить страницу или раздел на вашем сайте. Если вы выберете HTTP Basic, просто имейте в виду, что страницы, которые вы защищаете, могут быть не настолько безопасными, как вы думаете.

Хорошо, идем дальше!

Для этого нам нужно перехватить все запросы на стороне сервера с помощью хука handle, который вызывается при каждом запросе.

Затем мы проверим путь URL, чтобы увидеть, начинается ли он с /admin, так что любая страница под и включая /admin будет защищена HTTP Basic Auth (например, /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.

Следите за мной на Dev.to, Twitter и Github, чтобы узнать больше о веб-разработке и стартапах.