admin管理员组

文章数量:1424887

I have a static website that I want to protect with a username and/or password like apache's htaccess does but I don't want to host an apache server for it to work. How can I achieve this without frontend javascript?

The closest I've e using frontend JS (too insecure because source is visible):

<!DOCTYPE html>
<html lang="en">
<script>
  var password = "password";
  (function promptPass() {
    var psw = prompt("Enter your Password");
    while (psw !== password) {
      alert("Incorrect Password");
      return promptPass();
    }
  }());
  alert('Correct Password\nWele!');
</script>

<body align="center">
  <h1>Password Protected Site</h1>
  <!-- Other page elements -->
</body>
</html>

I have a static website that I want to protect with a username and/or password like apache's htaccess does but I don't want to host an apache server for it to work. How can I achieve this without frontend javascript?

The closest I've e using frontend JS (too insecure because source is visible):

<!DOCTYPE html>
<html lang="en">
<script>
  var password = "password";
  (function promptPass() {
    var psw = prompt("Enter your Password");
    while (psw !== password) {
      alert("Incorrect Password");
      return promptPass();
    }
  }());
  alert('Correct Password\nWele!');
</script>

<body align="center">
  <h1>Password Protected Site</h1>
  <!-- Other page elements -->
</body>
</html>
  • javascript
  • html
  • security
Share Improve this question asked May 1, 2022 at 18:15 Yeetsa JrYeetsa Jr 431 silver badge7 bronze badges 2
  • 2 Anything you do on the front end can be bypassed by the user. Security must be implemented on the server. – Barmar Commented May 1, 2022 at 18:39
  • 2 "I don't want to host an apache server for it to work" - why not? And there are alternatives to Apache. What are you currently using to host the web page? – Bergi Commented May 1, 2022 at 18:58
Add a ment  | 

5 Answers 5

Reset to default 3

By default security has to be done on the backend (as already stated by others).

But one thing came to my mind to do some security on the frontend:

Use some JavaScript to request a passwort from the user and use this password for decrypting some encrypted string already available within the delivered page and replace the body's content with the decrypted data. There should be some libraries available for encrypting/decrypting data using JavaScript.

As far as I know, anything that goes to frontend will always be visible. so to password protect a static html page you should password protect the file itself or you should prompt for a password from the page where this page is redirected.

I think technically you can get away without a server for security. Proof-of-concept thought experiment... if the entire HTML content of the page was readable but encrypted, and say a user had to type the decryption key into a popup, then in theory client-side JavaScript could decrypt the page content, without being circumventable.

Only issue is it would be the same password for every user, unless there is something clever you can do about that..

If I had to e up with something under these conditions, I'd be thinking of something along the lines of hashing the username and password and using that as the url for a file on the server that contains the actual content of the page and then using JS to load that in.

But still, doing the security on the backend is a much better option if you actually care about security and not about just making it challenging for most users.

In this pretty similar question I came up with this solution:

I encountered the same challenge when trying to protect an MkDocs Material static site with authentication. After some research and testing, I found a way to solve this using OAuth2 Proxy with GitHub authentication.

I've documented my approach in this repository: meadapt/login-static-site.

Key Points of My Solution:

  • The static site is built using the Python lib MkDocs Material (my favorite theme and static site generator), and deployed using GitHub Actions and Render. You are wele to chose wherever static site generator you want!!
  • OAuth2 Proxy is configured to require GitHub login, ensuring only authorized users can access the site, but other OAuth providers, like Google, could be used.
  • Authentication is enforced using an email whitelist, where only specific GitHub users can log in.
  • The entire process is deployed using a Render web service to handle authentication and serve the protected content.
  • I'm using Poetry for dependency management, but you can use any package management tool you prefer.

1. Clone the Repository

git clone https://github./meadapt/login-static-site.git
cd login-static-site

# Poetry
poetry install

2. Create Your Static Site

Place your MkDocs content inside the docs/ folder and configure mkdocs.yml accordingly. Once ready, mit and push your changes to the main branch:

# Using Poetry to view your site locally
poetry run task serve


git add .
git mit -m "Add my documentation"
git push origin main

This push will trigger the publish_render_pages GitHub Actions workflow that builds the site and pushes the generated static files to the render-pages branch.

3. Set Up an OAuth App on GitHub

To enable authentication, you need to create an OAuth App on GitHub:

  1. Go to GitHub Developer Settings.
  2. Click on OAuth Apps > New OAuth App.
  3. Fill in the details:
    • Application Name: Your app name.
    • Homepage URL: Use the URL provided by Render after deployment (you could update it later).
    • Authorization Callback URL: <your_render_url>/oauth2/callback
  4. Click Register Application.
  5. Copy the Client ID and Client Secret for later use.

4. Deploy the Web Service on Render

  1. Go to Render and create a new Blueprint instance.
  2. Connect it to your GitHub repository.
  3. Select the render-pages branch.
  4. Set up the environment variables:
    • OAUTH2_PROXY_CLIENT_ID=<your_github_client_id>.
    • OAUTH2_PROXY_CLIENT_SECRET=<your_github_client_secret>.
    • OAUTH2_PROXY_COOKIE_SECRET=<random_32_byte_secret> (Generate one using openssl rand -base64 32).
  5. Deploy your service.

Once deployed, your site will be protected, requiring a GitHub login to access it.

If you’re looking for more details, check out the repository. The README.md provides all setup instructions, including the sources used to create the model.

本文标签： javascriptHow to password protect a static website (without htaccess)Stack Overflow

版权声明：本文标题：javascript - How to password protect a static website? (without htaccess) - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745384987a2656335.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。