Базовая аутентификация с помощью nginx не работает при переходе страниц на статическом сайте, созданном с помощью SolidJS

Если я напрямую захожу на страницу, доступ к которой ограничивается с помощью базовой аутентификации, отображается диалоговое окно «Базовая аутентификация», но если я перехожу с другой страницы, которая не ограничивает доступ, диалоговое окно «Базовая аутентификация» не отображается, и я могу получить доступ к странице.

Статический сайт был создан следующим образом:

$ npm init solid@latest
$ cd project-directory
$ npm install
$ vim app.config.js
$ npm run build
$ rm -rf /usr/share/nginx/html && mkdir /usr/share/nginx/html
$ cp -r .output/public/. /usr/share/nginx/html/

Содержимое app.config.js следующее:

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  server: {
    prerender: {
      crawlLinks: true
    }
  }
});

Содержимое /etc/nginx/nginx.conf следующее:

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    server {
        listen       80;
        server_name  localhost;
        root   /usr/share/nginx/html;
        index  index.html;

        location /about/ {
            auth_basic "Restricted";
            auth_basic_user_file /etc/nginx/.htpasswd;
        }
    }
}

Этот сайт был создан с помощью SolidJS и размещен на nginx.
У этого сайта есть домашняя страница и страница /about/.
На главной странице есть ссылка /about/.
Когда я перехожу непосредственно на http://xx.xx.xx.xx/about/, базовая аутентификация работает, но когда я перехожу на /about/ по ссылке на главной странице, базовая аутентификация не работает, и я можно получить доступ без имени пользователя и пароля.

Мое окружение следующее:

  • ОС: Ubuntu 24.04 LTS.
  • Node.js: 22.4.1
  • Нгинкс: 1.27.0
  • Пакеты JavaScript:
    • @solidjs/мета: 0.29.4
    • @solidjs/маршрутизатор: 0.14.1
    • @solidjs/start: 1.0.5
    • Solid-JS: 1.8.18
    • Винкси: 0.4.0

Как я могу ограничить доступ к /about/ с помощью базовой аутентификации?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы говорите, что используете nginx, и это наводит меня на мысль, что вы используете генерацию статического сайта (SSG). Но если вы заранее сгенерируете все файлы и сделаете их доступными на своем веб-сервере (например, nginx), тогда, если кто-то знает правильный URL-адрес, он сможет просто загрузить этот файл. Таким образом, если это действительно должно быть действительно безопасно, вы не сможете сделать это с помощью настройки генерации статического сайта. Это было бы возможно, если бы вы хотели скрыть всю страницу за базовой аутентификацией, но вы говорите только некоторые страницы.

Чтобы защитить только определенные страницы, я вижу три варианта:

  • Придерживайтесь Solid.js и используйте SolidStart, но не выполняйте предварительную отрисовку всех страниц. В этом случае вам также потребуется удалить nginx и вместо этого развернуть свой сайт в Netlify (или аналогичном сервисе), который запускает ваш код и при каждом запросе проверяет, разрешена ли отправка страницы (например, с использованием базовой аутентификации).
  • Используйте архитектуру MPA (многостраничное приложение) вместо SPA. Таким образом, каждая навигация вызывает загрузку новой страницы, и вы можете выполнить базовую аутентификацию на стороне сервера, даже если она сгенерирована статически (например, как работает Astro).
  • Наконец, если вас устраивает, что это не так безопасно, вы можете сохранить SPA и просто отображать какой-то диалог на стороне клиента вместо использования базовой аутентификации.

P.S. Не знаете, что такое SSG и SSR и SPA или MPA? Посмотрите запись в моем блоге.

Большое спасибо за подробный и полезный ответ!

user21153351 21.07.2024 15:57

Другие вопросы по теме