feat: 修改部分 WAF 规则，增加注解

backend/app/service/website.go

@@ -687,7 +687,7 @@ func (w WebsiteService) GetWafConfig(req request.WebsiteWafReq) (response.Websit
 		return res, nil
 	}
 
-	filePath := path.Join(nginxFull.SiteDir, "sites", website.Alias, "waf", "rules", req.Rule)
+	filePath := path.Join(nginxFull.SiteDir, "sites", website.Alias, "waf", "rules", req.Rule+".json")
 	content, err := os.ReadFile(filePath)
 	if err != nil {
 		return res, nil

frontend/components.d.ts

@@ -60,6 +60,7 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']

frontend/src/lang/modules/zh.ts

@@ -1059,6 +1059,8 @@ export default {
         websiteProxyHelper:
             '代理已有服务,例如本机已安装使用 8080 端口的 halo 服务，那么代理地址为 http://127.0.0.1:8080',
         restoreHelper: '确认使用此备份恢复？',
+        wafValueHelper: '值',
+        wafRemarkHelper: '描述',
     },
     nginx: {
         serverNamesHashBucketSizeHelper: '服务器名字的hash表大小',

frontend/src/views/app-store/installed/index.vue

@@ -3,7 +3,7 @@
         <template #toolbar>
             <el-row :gutter="5">
                 <el-col :span="20">
-                    <div v-if="data != null">
+                    <div>
                         <el-button
                             class="tag-button"
                             :class="activeTag === 'all' ? '' : 'no-active'"

frontend/src/views/website/website/config/safety/ccdeny/index.vue

@@ -68,7 +68,7 @@ let form = reactive({
 let req = ref<Website.WafReq>({
     websiteId: 0,
     key: '$CCDeny',
-    rule: 'ccRate',
+    rule: 'cc',
 });
 let enableUpdate = ref<Website.WafUpdate>({
     websiteId: 0,

frontend/src/views/website/website/config/safety/file-block-list/index.vue

@@ -54,7 +54,7 @@ let data = ref([]);
 let req = ref<Website.WafReq>({
     websiteId: 0,
     key: '$fileExtDeny',
-    rule: 'fileExtBlockList',
+    rule: 'file_ext_block',
 });
 let fileUpdate = reactive({
     path: '',

frontend/src/views/website/website/config/safety/index.vue

@@ -4,40 +4,45 @@
             <CCDeny :id="id" v-if="index == 'cc'"></CCDeny>
         </el-tab-pane>
         <el-tab-pane :label="$t('firewall.ipWhiteList')" name="ipWhiteList">
-            <IpList :id="id" :rule="'ipWhiteList'" :param-key="'$ipWhiteAllow'" v-if="index == 'ipWhiteList'"></IpList>
+            <SimpleList
+                :id="id"
+                :rule="'ip_white'"
+                :param-key="'$ipWhiteAllow'"
+                v-if="index == 'ipWhiteList'"
+            ></SimpleList>
         </el-tab-pane>
         <el-tab-pane :label="$t('firewall.ipBlockList')" name="ipBlockList">
-            <IpList :id="id" :rule="'ipBlockList'" :param-key="'$ipBlockDeny'" v-if="index == 'ipBlockList'"></IpList>
+            <SimpleList
+                :id="id"
+                :rule="'ip_block'"
+                :param-key="'$ipBlockDeny'"
+                v-if="index == 'ipBlockList'"
+            ></SimpleList>
         </el-tab-pane>
         <el-tab-pane :label="$t('firewall.urlWhiteList')" name="urlWhiteList">
-            <ValueList
+            <SimpleList
                 :id="id"
-                :rule="'urlWhiteList'"
+                :rule="'url_white'"
                 :param-key="'$urlWhiteAllow'"
                 v-if="index == 'urlWhiteList'"
-            ></ValueList>
+            ></SimpleList>
         </el-tab-pane>
         <el-tab-pane :label="$t('firewall.urlBlockList')" name="urlBlockList">
-            <ValueList
+            <SimpleList
                 :id="id"
-                :rule="'urlBlockList'"
+                :rule="'url_block'"
                 :param-key="'$urlBlockDeny'"
                 v-if="index == 'urlBlockList'"
-            ></ValueList>
+            ></SimpleList>
         </el-tab-pane>
         <el-tab-pane :label="$t('firewall.cookieBlockList')" name="cookie">
-            <ValueList
+            <ValueList :id="id" :rule="'cookie_block'" :param-key="'$cookieDeny'" v-if="index == 'cookie'"></ValueList>
-                :id="id"
-                :rule="'cookieBlockList'"
-                :param-key="'$cookieDeny'"
-                v-if="index == 'cookie'"
-            ></ValueList>
         </el-tab-pane>
         <el-tab-pane :label="$t('firewall.argsCheck')" name="args">
-            <ValueList :id="id" :rule="'argsCheckList'" :param-key="'$argsDeny'" v-if="index == 'args'"></ValueList>
+            <ValueList :id="id" :rule="'args_check'" :param-key="'$argsDeny'" v-if="index == 'args'"></ValueList>
         </el-tab-pane>
         <el-tab-pane :label="$t('firewall.postCheck')" name="post">
-            <ValueList :id="id" :rule="'postCheckList'" :param-key="'$postDeny'" v-if="index == 'post'"></ValueList>
+            <ValueList :id="id" :rule="'post_check'" :param-key="'$postDeny'" v-if="index == 'post'"></ValueList>
         </el-tab-pane>
         <el-tab-pane :label="$t('firewall.fileExtBlockList')" name="fileExtBlockList">
             <FileBlockList :id="id" v-if="index == 'fileExtBlockList'"></FileBlockList>
@@ -47,7 +52,7 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import CCDeny from './ccdeny/index.vue';
-import IpList from './ip-list/index.vue';
+import SimpleList from './simple-list/index.vue';
 import FileBlockList from './file-block-list/index.vue';
 import ValueList from './value-list/index.vue';
 

frontend/src/views/website/website/config/safety/simple-list/index.vue

@@ -39,6 +39,7 @@ import { SaveFileContent } from '@/api/modules/files';
 import i18n from '@/lang';
 import { checkIp } from '@/utils/util';
 import { MsgSuccess } from '@/utils/message';
+import { MsgError } from '@/utils/message';
 
 const props = defineProps({
     id: {
@@ -69,7 +70,7 @@ let data = ref([]);
 let req = ref<Website.WafReq>({
     websiteId: 0,
     key: '$ipWhiteAllow',
-    rule: 'ipWhiteList',
+    rule: 'ip_white',
 });
 let fileUpdate = reactive({
     path: '',
@@ -110,18 +111,18 @@ const removeIp = (index: number) => {
 };
 
 const openCreate = () => {
-    console.log(ips.value);
     const ipArray = ips.value.split('\n');
     if (ipArray.length == 0) {
         return;
     }
-    for (const id in ipArray) {
+    if (req.value.rule.indexOf('ip') > -1) {
-        if (checkIp(ipArray[id])) {
+        for (const id in ipArray) {
-            MsgError(i18n.global.t('commons.rule.ipErr', [ipArray[id]]));
+            if (checkIp(ipArray[id])) {
-            return;
+                MsgError(i18n.global.t('commons.rule.ipErr', [ipArray[id]]));
+                return;
+            }
         }
     }
-
     data.value.forEach((d) => {
         ipArray.push(d.ip);
     });

frontend/src/views/website/website/config/safety/value-list/index.vue

@@ -1,17 +1,31 @@
 <template>
     <el-row>
-        <el-col :span="10" :offset="1">
+        <el-col :span="14" :offset="1">
-            <el-form-item prop="enable" :label="$t('website.enable')">
+            <el-form>
-                <el-switch v-model="enableUpdate.enable" @change="updateEnable"></el-switch>
+                <el-form-item prop="enable" :label="$t('website.enable')">
-            </el-form-item>
+                    <el-switch v-model="enableUpdate.enable" @change="updateEnable"></el-switch>
-            <el-form-item :label="$t('website.data')">
+                </el-form-item>
-                <el-input
+                <el-form-item :label="$t('website.data')">
-                    type="textarea"
+                    <el-row :gutter="10" style="width: 100%">
-                    :autosize="{ minRows: 4, maxRows: 8 }"
+                        <el-col :span="12">
-                    v-model="add"
+                            <el-input
-                    :placeholder="$t('website.wafInputHelper')"
+                                type="text"
-                />
+                                v-model="add.value"
-            </el-form-item>
+                                label="value"
+                                :placeholder="$t('website.wafValueHelper')"
+                            />
+                        </el-col>
+                        <el-col :span="12">
+                            <el-input
+                                type="text"
+                                v-model="add.remark"
+                                label="remark"
+                                :placeholder="$t('website.wafRemarkHelper')"
+                            />
+                        </el-col>
+                    </el-row>
+                </el-form-item>
+            </el-form>
             <ComplexTable :data="data" v-loading="loading">
                 <template #toolbar>
                     <el-button type="primary" icon="Plus" @click="openCreate">
@@ -19,6 +33,7 @@
                     </el-button>
                 </template>
                 <el-table-column :label="$t('website.value')" prop="value"></el-table-column>
+                <el-table-column :label="$t('website.remark')" prop="remark"></el-table-column>
                 <el-table-column :label="$t('commons.table.operate')" width="100px">
                     <template #default="{ $index }">
                         <el-button link type="primary" @click="remove($index)">
@@ -79,7 +94,12 @@ let enableUpdate = ref<Website.WafUpdate>({
     key: '$UrlDeny',
     enable: false,
 });
-let add = ref();
+let add = ref({
+    value: '',
+    remark: '',
+    enbale: 1,
+});
+let contentArray = ref([]);
 
 const get = async () => {
     data.value = [];
@@ -88,11 +108,13 @@ const get = async () => {
     loading.value = false;
     enableUpdate.value.enable = res.data.enable;
     if (res.data.content != '') {
-        const urlList = res.data.content.split('\n');
+        contentArray.value = JSON.parse(res.data.content);
-        urlList.forEach((value) => {
+        contentArray.value.forEach((value) => {
             if (value != '') {
                 data.value.push({
-                    value: value,
+                    value: value[0],
+                    remark: value[1],
+                    enable: value[2],
                 });
             }
         });
@@ -101,23 +123,21 @@ const get = async () => {
 };
 
 const remove = (index: number) => {
-    data.value.splice(index, 1);
+    contentArray.value.splice(index, 1);
-    const addArray = [];
+    submit([]);
-    data.value.forEach((d) => {
-        addArray.push(d.value);
-    });
-    submit(addArray);
 };
 
 const openCreate = () => {
-    const addArray = add.value.split('\n');
+    if (add.value.value == '') {
-    if (addArray.length == 0) {
         return;
     }
-    data.value.forEach((d) => {
+    let newArray = [];
-        addArray.push(d.value);
+    newArray[0] = add.value.value;
-    });
+    newArray[1] = add.value.remark;
-    submit(addArray);
+    newArray[2] = add.value.enbale;
+
+    data.value.push(newArray);
+    submit(newArray);
 };
 
 const updateEnable = async (enable: boolean) => {
@@ -128,16 +148,19 @@ const updateEnable = async (enable: boolean) => {
 };
 
 const submit = async (addArray: string[]) => {
-    let urlList = '';
+    if (addArray.length > 0) {
-    addArray.forEach((row) => {
+        contentArray.value.push(addArray);
-        urlList = urlList + row + '\n';
+    }
-    });
 
-    fileUpdate.content = urlList;
+    fileUpdate.content = JSON.stringify(contentArray.value);
     loading.value = true;
     SaveFileContent(fileUpdate)
         .then(() => {
-            add.value = '';
+            add.value = {
+                value: '',
+                remark: '',
+                enbale: 1,
+            };
             MsgSuccess(i18n.global.t('commons.msg.updateSuccess'));
             get();
         })