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

internal/web/actions/default/servers/components/waf/policy.go

@@ -95,6 +95,7 @@ func (this *PolicyAction) RunGet(params struct {
 		"modeInfo":                 firewallconfigs.FindFirewallMode(firewallPolicy.Mode),
 		"groups":                   internalGroups,
 		"blockOptions":             firewallPolicy.BlockOptions,
+		"pageOptions":              firewallPolicy.PageOptions,
 		"captchaOptions":           firewallPolicy.CaptchaOptions,
 		"useLocalFirewall":         firewallPolicy.UseLocalFirewall,
 		"synFlood":                 firewallPolicy.SYNFlood,

internal/web/actions/default/servers/components/waf/update.go

@@ -34,6 +34,7 @@ func (this *UpdateAction) RunGet(params struct {
 		return
 	}
 
+	// block options
 	if firewallPolicy.BlockOptions == nil {
 		firewallPolicy.BlockOptions = &firewallconfigs.HTTPFirewallBlockAction{
 			StatusCode: http.StatusForbidden,
@@ -43,6 +44,11 @@ func (this *UpdateAction) RunGet(params struct {
 		}
 	}
 
+	// page options
+	if firewallPolicy.PageOptions == nil {
+		firewallPolicy.PageOptions = firewallconfigs.DefaultHTTPFirewallPageAction()
+	}
+
 	// mode
 	if len(firewallPolicy.Mode) == 0 {
 		firewallPolicy.Mode = firewallconfigs.FirewallModeDefend
@@ -71,6 +77,7 @@ func (this *UpdateAction) RunGet(params struct {
 		"isOn":               firewallPolicy.IsOn,
 		"mode":               firewallPolicy.Mode,
 		"blockOptions":       firewallPolicy.BlockOptions,
+		"pageOptions":        firewallPolicy.PageOptions,
 		"captchaOptions":     firewallPolicy.CaptchaOptions,
 		"useLocalFirewall":   firewallPolicy.UseLocalFirewall,
 		"synFloodConfig":     firewallPolicy.SYNFlood,
@@ -107,6 +114,7 @@ func (this *UpdateAction) RunPost(params struct {
 	Name               string
 	GroupCodes         []string
 	BlockOptionsJSON   []byte
+	PageOptionsJSON    []byte
 	CaptchaOptionsJSON []byte
 	Description        string
 	IsOn               bool
@@ -132,6 +140,19 @@ func (this *UpdateAction) RunPost(params struct {
 	err := json.Unmarshal(params.BlockOptionsJSON, blockOptions)
 	if err != nil {
 		this.Fail("拦截动作参数校验失败：" + err.Error())
+		return
+	}
+
+	// 校验显示页面选项JSON
+	var pageOptions = &firewallconfigs.HTTPFirewallPageAction{}
+	err = json.Unmarshal(params.PageOptionsJSON, pageOptions)
+	if err != nil {
+		this.Fail("校验显示页面动作配置失败：" + err.Error())
+		return
+	}
+	if pageOptions.Status < 100 && pageOptions.Status > 999 {
+		this.Fail("显示页面动作的状态码配置错误：" + types.String(pageOptions.Status))
+		return
 	}
 
 	// 校验验证码选项JSON
@@ -139,6 +160,7 @@ func (this *UpdateAction) RunPost(params struct {
 	err = json.Unmarshal(params.CaptchaOptionsJSON, captchaOptions)
 	if err != nil {
 		this.Fail("验证码动作参数校验失败：" + err.Error())
+		return
 	}
 
 	// 检查极验配置
@@ -170,6 +192,7 @@ func (this *UpdateAction) RunPost(params struct {
 		Description:          params.Description,
 		FirewallGroupCodes:   params.GroupCodes,
 		BlockOptionsJSON:     params.BlockOptionsJSON,
+		PageOptionsJSON:      params.PageOptionsJSON,
 		CaptchaOptionsJSON:   params.CaptchaOptionsJSON,
 		Mode:                 params.Mode,
 		UseLocalFirewall:     params.UseLocalFirewall,

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>

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>	
+`
+})

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>	
+`
+})

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>

web/views/@default/servers/components/waf/update.html

@@ -31,37 +31,36 @@
                 <p class="comment">可以启用一些我们预置的规则组。</p>
             </td>
         </tr>
+    </table>
+
+    <h4>动作配置</h4>
+    <table class="ui table definition selectable">
+        <tbody>
             <tr>
-            <td colspan="2"><more-options-indicator></more-options-indicator></td>
-        </tr>
-        <tbody v-show="moreOptionsVisible">
-            <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>使用系统防火墙</td>
-                <td>
-                    <checkbox name="useLocalFirewall" v-model="firewallPolicy.useLocalFirewall"></checkbox>
-                    <p class="comment">开启后，可以在合适的时候自动使用系统自带防火墙进行防御。</p>
-                </td>
-            </tr>
-            <tr>
-                <td>SYN Flood防御</td>
-                <td>
-                    <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 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>
@@ -82,19 +81,12 @@
                 <p class="comment">选中后，表示在访问日志中记录区域封禁（地区和省份）事件。</p>
             </td>
         </tr>
+    </table>
+
+    <h4>区域封禁设置</h4>
+    <table class="ui table definition selectable">
         <tr>
-                <td>最多检查内容尺寸</td>
-                <td>
-                    <input type="hidden" name="maxRequestBodySize" v-model="maxRequestBodySize"/>
-                    <div class="ui input right labeled">
-                        <input type="text" style="width: 10em" maxlength="10" v-model="firewallPolicy.maxRequestBodySize" @input="changeMaxRequestBodySize(firewallPolicy.maxRequestBodySize)"/>
-                        <span class="ui label">字节</span>
-                    </div>
-                    <p class="comment"><span v-if="maxRequestBodySize > 0">当前：{{maxRequestBodySizeFormat}}。</span>WAF能够分析的最大文件内容尺寸，0表示默认，默认为512K；此值越大，对应使用的系统内存越多，除非特殊情况，否则请谨慎修改。</p>
-                </td>
-            </tr>
-            <tr>
-                <td>区域封禁默认提示内容</td>
+            <td class="title">区域封禁默认提示内容</td>
             <td>
                 <textarea v-model="firewallPolicy.denyCountryHTML" name="denyCountryHTML" rows="3"></textarea>
                 <p class="comment">当客户端所在区域被封禁时提示页面的HTML内容；不填则表示使用默认的提示内容；支持请求变量。</p>
@@ -107,6 +99,35 @@
                 <p class="comment">当客户端所在省份被封禁时提示页面的HTML内容；不填则表示使用默认的提示内容；支持请求变量。</p>
             </td>
         </tr>
+    </table>
+
+    <h4>其他配置</h4>
+    <table class="ui table definition selectable">
+        <tbody>
+            <tr>
+                <td class="title">使用系统防火墙</td>
+                <td>
+                    <checkbox name="useLocalFirewall" v-model="firewallPolicy.useLocalFirewall"></checkbox>
+                    <p class="comment">开启后，可以在合适的时候自动使用系统自带防火墙进行防御；建议在每个边缘节点都安装nftables以提升封禁性能。</p>
+                </td>
+            </tr>
+            <tr>
+                <td>SYN Flood防御</td>
+                <td>
+                    <firewall-syn-flood-config-box :v-syn-flood-config="firewallPolicy.synFloodConfig"></firewall-syn-flood-config-box>
+                </td>
+            </tr>
+            <tr>
+                <td>最多检查内容尺寸</td>
+                <td>
+                    <input type="hidden" name="maxRequestBodySize" v-model="maxRequestBodySize"/>
+                    <div class="ui input right labeled">
+                        <input type="text" style="width: 10em" maxlength="10" v-model="firewallPolicy.maxRequestBodySize" @input="changeMaxRequestBodySize(firewallPolicy.maxRequestBodySize)"/>
+                        <span class="ui label">字节</span>
+                    </div>
+                    <p class="comment"><span v-if="maxRequestBodySize > 0">当前：{{maxRequestBodySizeFormat}}。</span>WAF能够分析的最大文件内容尺寸，0表示默认，默认为512K；此值越大，对应使用的系统内存越多，除非特殊情况，否则请谨慎修改。</p>
+                </td>
+            </tr>
             <tr>
                 <td>描述</td>
                 <td>
@@ -124,5 +145,6 @@
             </tr>
         </tbody>
     </table>
+
     <submit-btn></submit-btn>
 </form>