使用AWS S3 建置簡易登錄網站(Login Website)

前言：

基本上AWS S3除了單純放置檔案之外, 我們也可以在上面建立靜態網站, 老實說, 這是一項非常實用的功能, 尤其是專案在草創初期時, 可能會須要demo給客戶, PM, 或是老闆看, 在這時候若使用Static Website Hosting這項功能, 就可以很快速地完成部屬

但是, 在一般的情況下, 我們可能不會想讓所有的人, 都有能力去訪問這個網站, 所以這個時候,就會需要一個登陸頁面來驗證使用者的身分

以下實作如何在AWS S3 上建置登錄網站
Building a login website with AWS S3

基本上我們會有

登陸頁面 index.html
一個secret file負責導引 admin1234
網站首頁 home.html

設計的概念很簡單, 除了 index.html 以及 admin1234 之外, 所有檔案皆設為private, 存取home.html 時會檢查 header裡的 referer 來源是否為index.html,

也就是說任何人都無法直接訪問home.html, 除非是透過/index.html轉過來的請求

流程

登陸頁面會要求出入密碼 admin1234
當form送出去之後頁面會導引到 /admin1234
而/admin1234會再將頁面導到 /home.html

建立S3 Bucket

切到Properties下, 設定 Static Website Hosting

登陸頁面

Step 1. 上傳index.html到 S3 Bucket

CODE SNIPPET

	<!-- index.html -->
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Password</title>
	</head>

	<body>

	<div style="margin: auto; width:400px; padding-top: 100px; font: 16px arial, sans-serif;">
	<div style="width: 250px;">Please Enter The Password<br> Authorized access only.<br><br>
	Password:<br>
	<form name="password_form" method="post" action="javascript:location.href=window.document.password_form.page.value" style="margin:0;">
	<div style="display:inline;">
	<input type="password" name="page" autocorrect="off" autocapitalize="off" autofocus size="35">
	<input type="submit" value="Enter">
	</div>
	</form>
	</div>
	</div>

	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

END

Secret File

Step 1. 隨便建立以一個檔案admin1234
Step 2. Metadata 設為

當index.html從使用這取得正確的密碼admin1234, 頁面會先被導引到這邊, 最後再被導引至/home.html

設定存取權限

在Permissions 底下, 我們可以透過Bucket Policy設定Bucket層級的存取權限

Step 1. 首先先將index.html以及admin1234設為公開

CODE SNIPPET

	{
	"Version": "2012-10-17",
	"Id": "Policy153888888444",
	"Statement": [
	{
	"Sid": "Stmt15885773697",
	"Effect": "Allow",
	"Principal": "*",
	"Action": "s3:GetObject",
	"Resource": "arn:aws:s3:::mywebsite/index.html"
	},
	{
	"Sid": "Stmt153767020478",
	"Effect": "Allow",
	"Principal": "*",
	"Action": "s3:GetObject",
	"Resource": "arn:aws:s3:::mywebsite/admin1234"
	},
	]
	}

view raw policy.json hosted with ❤ by GitHub

END

Home.html

Step 1. 上傳 Home.html

CODE SNIPPET

<h2>Hello! Congratulation</h2></body></html>

view raw home.html hosted with ❤ by GitHub

END

Step 2. 修改Bucket Policy 有條件下開放Home.html 存取

CODE SNIPPET

	{
	"Sid": "Stmt1532888889",
	"Effect": "Allow",
	"Principal": "*",
	"Action": "s3:GetObject",
	"Resource": "arn:aws:s3:::mywebsite/home.html",
	"Condition": {
	"StringLike": {
	"aws:Referer": "http://mywebsite.s3-website-us-east-1.amazonaws.com/index.html"
	},
	"Null": {
	"aws:Referer": "false"
	}
	}
	}

view raw policy_for_home.json hosted with ❤ by GitHub

END

測試

Reference:
https://www.codeprocess.io/http-basic-authentication-with-s3-static-site-basic-idea/

黑皮考町

搜尋此網誌