WAF策略增加显示页面动作默认设置

2025-11-03 12:20:28 +08:00 · 2024-01-20 16:17:28 +08:00
parent 8c084e8cef
commit 3aa79bb38c
7 changed files with 229 additions and 64 deletions
--- a/web/public/js/components/server/http-firewall-actions-box.js
+++ b/web/public/js/components/server/http-firewall-actions-box.js
@@ -105,6 +105,7 @@ Vue.component("http-firewall-actions-box", {

 			tagTags: [],

+			pageUseDefault: true,
 			pageStatus: 403,
 			pageBody: defaultPageBody,
 			defaultPageBody: defaultPageBody,
@@ -302,6 +303,7 @@ Vue.component("http-firewall-actions-box", {

 			this.tagTags = []

+			this.pageUseDefault = true
 			this.pageStatus = 403
 			this.pageBody = this.defaultPageBody

@@ -429,8 +431,14 @@ Vue.component("http-firewall-actions-box", {
 					}
 					break
 				case "page":
+					this.pageUseDefault = true
 					this.pageStatus = 403
 					this.pageBody = this.defaultPageBody
+					if (typeof config.options.useDefault === "boolean") {
+						this.pageUseDefault = config.options.useDefault
+					} else {
+						this.pageUseDefault = false
+					}
 					if (config.options.status != null) {
 						this.pageStatus = config.options.status
 					}
@@ -533,6 +541,7 @@ Vue.component("http-firewall-actions-box", {
 				}

 				this.actionOptions = {
+					useDefault: this.pageUseDefault,
 					status: pageStatus,
 					body: this.pageBody
 				}
@@ -691,7 +700,7 @@ Vue.component("http-firewall-actions-box", {
 			<span v-if="config.code == 'tag'">：{{config.options.tags.join(", ")}}</span>
 			
 			<!-- page -->
-			<span v-if="config.code == 'page'">：[{{config.options.status}}]</span>
+			<span v-if="config.code == 'page'">：[{{config.options.status}}]<span v-if="config.options.useDefault">&nbsp; [默认页面]</span></span>
 			
 			<!-- redirect -->
 			<span v-if="config.code == 'redirect'">：{{config.options.url}}</span>
@@ -893,11 +902,17 @@ Vue.component("http-firewall-actions-box", {
 			
 			<!-- page -->
 			<tr v-if="actionCode == 'page'">
-				<td>状态码 *</td>
+				<td>使用默认提示</td>
+				<td>
+					<checkbox v-model="pageUseDefault"></checkbox>
+				</td>
+			</tr>
+			<tr v-if="actionCode == 'page' && !pageUseDefault">
+				<td class="color-border">状态码 *</td>
 				<td><input type="text" style="width: 4em" maxlength="3" v-model="pageStatus"/></td>
 			</tr>
-			<tr v-if="actionCode == 'page'">
-				<td>网页内容</td>
+			<tr v-if="actionCode == 'page' && !pageUseDefault">
+				<td class="color-border">网页内容</td>
 				<td>
 					<textarea v-model="pageBody"></textarea>
 				</td>
--- a/web/public/js/components/server/http-firewall-page-options-viewer.js
+++ b/web/public/js/components/server/http-firewall-page-options-viewer.js
@@ -0,0 +1,15 @@
+Vue.component("http-firewall-page-options-viewer", {
+	props: ["v-page-options"],
+	data: function () {
+		return {
+			options: this.vPageOptions
+		}
+	},
+	template: `<div>
+	<span v-if="options == null">默认设置</span>
+	<div v-else>
+		状态码：{{options.status}} / 提示内容：<span v-if="options.body != null && options.body.length > 0">[{{options.body.length}}字符]</span>
+	</div>
+</div>	
+`
+})
--- a/web/public/js/components/server/http-firewall-page-options.js
+++ b/web/public/js/components/server/http-firewall-page-options.js
@@ -0,0 +1,67 @@
+Vue.component("http-firewall-page-options", {
+	props: ["v-page-options"],
+	data: function () {
+		var defaultPageBody = `<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>403 Forbidden</title>
+	<style>
+		address { line-height: 1.8; }
+	</style>
+</head>
+<body>
+<h1>403 Forbidden By WAF</h1>
+<address>Connection: \${remoteAddr} (Client) -&gt; \${serverAddr} (Server)</address>
+<address>Request ID: \${requestId}</address>
+</body>
+</html>`
+
+		return {
+			pageOptions: this.vPageOptions,
+			status: this.vPageOptions.status,
+			body: this.vPageOptions.body,
+			defaultPageBody: defaultPageBody,
+			isEditing: false
+		}
+	},
+	watch: {
+		status: function (v) {
+			if (typeof v === "string" && v.length != 3) {
+				return
+			}
+			let statusCode = parseInt(v)
+			if (isNaN(statusCode)) {
+				this.pageOptions.status = 403
+			} else {
+				this.pageOptions.status = statusCode
+			}
+		},
+		body: function (v) {
+			this.pageOptions.body = v
+		}
+	},
+	methods: {
+		edit: function () {
+			this.isEditing = !this.isEditing
+		}
+	},
+	template: `<div>
+	<input type="hidden" name="pageOptionsJSON" :value="JSON.stringify(pageOptions)"/>
+	<a href="" @click.prevent="edit">状态码：{{status}} / 提示内容：<span v-if="pageOptions.body != null && pageOptions.body.length > 0">[{{pageOptions.body.length}}字符]</span><span v-else class="disabled">[无]</span>
+	 <i class="icon angle" :class="{up: isEditing, down: !isEditing}"></i></a>
+	<table class="ui table" v-show="isEditing">
+		<tr>
+			<td class="title">状态码 *</td>
+			<td><input type="text" style="width: 4em" maxlength="3" v-model="status"/></td>
+		</tr>
+		<tr>
+			<td>网页内容</td>
+			<td>
+				<textarea v-model="body"></textarea>
+				<p class="comment"><a href="" @click.prevent="body = defaultPageBody">[使用模板]</a> </p>
+			</td>
+		</tr>
+	</table>
+</div>	
+`
+})
--- a/web/views/@default/servers/components/waf/policy.html
+++ b/web/views/@default/servers/components/waf/policy.html
@@ -26,12 +26,22 @@
           </div>
        </td>
    </tr>
+</table>
+
+<h4>动作配置</h4>
+<table class="ui table definition selectable">
    <tr>
-        <td>阻止动作设置</td>
+        <td class="title">阻止动作设置</td>
        <td>
           <http-firewall-block-options-viewer :v-block-options="firewallPolicy.blockOptions"></http-firewall-block-options-viewer>
        </td>
    </tr>
+    <tr>
+        <td class="title">显示页面动作设置</td>
+        <td>
+            <http-firewall-page-options-viewer :v-page-options="firewallPolicy.pageOptions"></http-firewall-page-options-viewer>
+        </td>
+    </tr>
    <tr>
        <td>人机识别动作配置</td>
        <td>
@@ -46,15 +56,12 @@
            <p class="comment" v-if="firewallPolicy.useLocalFirewall">可以在合适的时候自动使用系统自带防火墙进行防御。</p>
        </td>
    </tr>
+</table>
+
+<h4>日志配置</h4>
+<table class="ui table definition selectable">
    <tr>
-        <td>SYN Flood防御</td>
-        <td>
-            <span v-if="firewallPolicy.synFlood == null || !firewallPolicy.synFlood.isOn" class="disabled">未启用</span>
-            <firewall-syn-flood-config-viewer v-else :v-syn-flood-config="firewallPolicy.synFlood"></firewall-syn-flood-config-viewer>
-        </td>
-    </tr>
-    <tr>
-        <td :class="{'color-border':firewallPolicy.log !=null && firewallPolicy.log.isOn}">记录访问日志</td>
+        <td class="title" :class="{'color-border':firewallPolicy.log !=null && firewallPolicy.log.isOn}">记录访问日志</td>
        <td>
            <span v-if="firewallPolicy.log == null || !firewallPolicy.log.isOn">默认</span>
            <span v-else class="green">开启</span>
@@ -74,15 +81,12 @@
            <span v-else>不记录</span>
        </td>
    </tr>
+</table>
+
+<h4>区域封禁设置</h4>
+<table class="ui table definition selectable">
    <tr>
-        <td>最多检查内容尺寸</td>
-        <td>
-            <span v-if="firewallPolicy.maxRequestBodySize == 0" class="disabled">使用默认</span>
-            <span v-else>{{firewallPolicy.maxRequestBodySizeFormat}}</span>
-        </td>
-    </tr>
-    <tr>
-        <td>区域封禁默认提示内容</td>
+        <td class="title">区域封禁默认提示内容</td>
        <td>
            <span v-if="firewallPolicy.denyCountryHTML != null && firewallPolicy.denyCountryHTML.length > 0">自定义</span>
            <span v-else class="disabled">使用默认</span>
@@ -95,6 +99,24 @@
            <span v-else class="disabled">使用默认</span>
        </td>
    </tr>
+</table>
+
+<h4>其他配置</h4>
+<table class="ui table definition selectable">
+    <tr>
+        <td class="title">SYN Flood防御</td>
+        <td>
+            <span v-if="firewallPolicy.synFlood == null || !firewallPolicy.synFlood.isOn" class="disabled">未启用</span>
+            <firewall-syn-flood-config-viewer v-else :v-syn-flood-config="firewallPolicy.synFlood"></firewall-syn-flood-config-viewer>
+        </td>
+    </tr>
+    <tr>
+        <td>最多检查内容尺寸</td>
+        <td>
+            <span v-if="firewallPolicy.maxRequestBodySize == 0" class="disabled">使用默认</span>
+            <span v-else>{{firewallPolicy.maxRequestBodySizeFormat}}</span>
+        </td>
+    </tr>
    <tr>
        <td>描述</td>
        <td>
--- a/web/views/@default/servers/components/waf/update.html
+++ b/web/views/@default/servers/components/waf/update.html
@@ -31,27 +31,84 @@
                <p class="comment">可以启用一些我们预置的规则组。</p>
            </td>
        </tr>
-        <tr>
-            <td colspan="2"><more-options-indicator></more-options-indicator></td>
-        </tr>
-        <tbody v-show="moreOptionsVisible">
+    </table>
+
+    <h4>动作配置</h4>
+    <table class="ui table definition selectable">
+        <tbody>
            <tr>
-                <td>阻止动作配置</td>
+                <td class="title">阻止动作配置</td>
                <td>
                    <http-firewall-block-options :v-block-options="firewallPolicy.blockOptions"></http-firewall-block-options>
                </td>
            </tr>
+            <tr>
+                <td>显示页面动作配置</td>
+                <td>
+                    <http-firewall-page-options :v-page-options="firewallPolicy.pageOptions"></http-firewall-page-options>
+                </td>
+            </tr>
            <tr>
                <td>人机识别动作配置</td>
                <td>
                    <http-firewall-captcha-options :v-captcha-options="firewallPolicy.captchaOptions"></http-firewall-captcha-options>
                </td>
            </tr>
+        </tbody>
+    </table>
+
+    <h4>日志配置</h4>
+    <table class="ui table definition selectable">
+        <tr>
+            <td class="title" :class="{'color-border':firewallPolicy.log.isOn}">记录访问日志</td>
+            <td>
+                <input type="hidden" name="logJSON" :value="JSON.stringify(firewallPolicy.log)"/>
+                <checkbox name="" v-model="firewallPolicy.log.isOn"></checkbox>
+                <p class="comment">选中后，总是记录WAF相关访问日志，即使服务中没有开启访问日志。</p>
+            </td>
+        </tr>
+        <tr v-show="firewallPolicy.log.isOn">
+            <td class="color-border">记录请求Body</td>
+            <td>
+                <checkbox v-model="firewallPolicy.log.requestBody"></checkbox>
+                <p class="comment">选中后，表示在访问日志中记录匹配的请求内容。注意：此选项会明显增加访问日志占用空间，请谨慎开启。</p>
+            </td>
+        </tr>
+        <tr v-show="firewallPolicy.log.isOn">
+            <td class="color-border">记录区域封禁日志</td>
+            <td>
+                <checkbox v-model="firewallPolicy.log.regionDenying"></checkbox>
+                <p class="comment">选中后，表示在访问日志中记录区域封禁（地区和省份）事件。</p>
+            </td>
+        </tr>
+    </table>
+
+    <h4>区域封禁设置</h4>
+    <table class="ui table definition selectable">
+        <tr>
+            <td class="title">区域封禁默认提示内容</td>
+            <td>
+                <textarea v-model="firewallPolicy.denyCountryHTML" name="denyCountryHTML" rows="3"></textarea>
+                <p class="comment">当客户端所在区域被封禁时提示页面的HTML内容；不填则表示使用默认的提示内容；支持请求变量。</p>
+            </td>
+        </tr>
+        <tr>
+            <td>省份封禁默认提示内容</td>
+            <td>
+                <textarea v-model="firewallPolicy.denyProvinceHTML" name="denyProvinceHTML" rows="3"></textarea>
+                <p class="comment">当客户端所在省份被封禁时提示页面的HTML内容；不填则表示使用默认的提示内容；支持请求变量。</p>
+            </td>
+        </tr>
+    </table>
+
+    <h4>其他配置</h4>
+    <table class="ui table definition selectable">
+        <tbody>
            <tr>
-                <td>使用系统防火墙</td>
+                <td class="title">使用系统防火墙</td>
                <td>
                    <checkbox name="useLocalFirewall" v-model="firewallPolicy.useLocalFirewall"></checkbox>
-                    <p class="comment">开启后，可以在合适的时候自动使用系统自带防火墙进行防御。</p>
+                    <p class="comment">开启后，可以在合适的时候自动使用系统自带防火墙进行防御；建议在每个边缘节点都安装nftables以提升封禁性能。</p>
                </td>
            </tr>
            <tr>
@@ -60,28 +117,6 @@
                    <firewall-syn-flood-config-box :v-syn-flood-config="firewallPolicy.synFloodConfig"></firewall-syn-flood-config-box>
                </td>
            </tr>
-            <tr>
-                <td :class="{'color-border':firewallPolicy.log.isOn}">记录访问日志</td>
-                <td>
-                    <input type="hidden" name="logJSON" :value="JSON.stringify(firewallPolicy.log)"/>
-                    <checkbox name="" v-model="firewallPolicy.log.isOn"></checkbox>
-                    <p class="comment">选中后，总是记录WAF相关访问日志，即使服务中没有开启访问日志。</p>
-                </td>
-            </tr>
-            <tr v-show="firewallPolicy.log.isOn">
-                <td class="color-border">记录请求Body</td>
-                <td>
-                    <checkbox v-model="firewallPolicy.log.requestBody"></checkbox>
-                    <p class="comment">选中后，表示在访问日志中记录匹配的请求内容。注意：此选项会明显增加访问日志占用空间，请谨慎开启。</p>
-                </td>
-            </tr>
-            <tr v-show="firewallPolicy.log.isOn">
-                <td class="color-border">记录区域封禁日志</td>
-                <td>
-                    <checkbox v-model="firewallPolicy.log.regionDenying"></checkbox>
-                    <p class="comment">选中后，表示在访问日志中记录区域封禁（地区和省份）事件。</p>
-                </td>
-            </tr>
            <tr>
                <td>最多检查内容尺寸</td>
                <td>
@@ -93,20 +128,6 @@
                    <p class="comment"><span v-if="maxRequestBodySize > 0">当前：{{maxRequestBodySizeFormat}}。</span>WAF能够分析的最大文件内容尺寸，0表示默认，默认为512K；此值越大，对应使用的系统内存越多，除非特殊情况，否则请谨慎修改。</p>
                </td>
            </tr>
-            <tr>
-                <td>区域封禁默认提示内容</td>
-                <td>
-                    <textarea v-model="firewallPolicy.denyCountryHTML" name="denyCountryHTML" rows="3"></textarea>
-                    <p class="comment">当客户端所在区域被封禁时提示页面的HTML内容；不填则表示使用默认的提示内容；支持请求变量。</p>
-                </td>
-            </tr>
-            <tr>
-                <td>省份封禁默认提示内容</td>
-                <td>
-                    <textarea v-model="firewallPolicy.denyProvinceHTML" name="denyProvinceHTML" rows="3"></textarea>
-                    <p class="comment">当客户端所在省份被封禁时提示页面的HTML内容；不填则表示使用默认的提示内容；支持请求变量。</p>
-                </td>
-            </tr>
            <tr>
                <td>描述</td>
                <td>
@@ -124,5 +145,6 @@
            </tr>
        </tbody>
    </table>
+
    <submit-btn></submit-btn>
 </form>