feat: 增加URL黑白名单

frontend/src/lang/modules/zh.ts

@@ -856,7 +856,9 @@ export default {
         ccHelper: '{0} 秒内累计请求同一URL超过 {1} 次,触发CC防御,封锁此IP',
         seconds: '秒',
         count: '次',
-        mustSave: '修改之后需要保存才能生效,不合法的IP不会保存',
+        mustSave: '修改之后需要保存才能生效',
+        fileExt: '文件扩展名',
+        fileExtBlock: '文件扩展名黑名单',
     },
     nginx: {
         serverNamesHashBucketSizeHelper: '服务器名字的hash表大小',

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

@@ -7,18 +7,18 @@
                         {{ $t('commons.button.add') }}
                     </el-button>
                 </template>
-                <el-table-column label="IP" prop="ip">
+                <el-table-column :label="$t('website.fileExt')">
                     <template #default="{ row }">
-                        <fu-read-write-switch :data="row.ip" v-model="row.edit" write-trigger="onDblclick">
+                        <fu-read-write-switch :data="row.file" v-model="row.edit" write-trigger="onDblclick">
                             <el-form-item :error="row.error">
-                                <el-input v-model="row.ip" @blur="row.edit = false" @input="checkIpRule(row)" />
+                                <el-input v-model="row.file" @blur="row.edit = false" />
                             </el-form-item>
                         </fu-read-write-switch>
                     </template>
                 </el-table-column>
                 <el-table-column :label="$t('commons.table.operate')">
                     <template #default="{ $index }">
-                        <el-button link type="primary" @click="removeIp($index)">
+                        <el-button link type="primary" @click="remove($index)">
                             {{ $t('commons.button.delete') }}
                         </el-button>
                     </template>
@@ -41,7 +41,6 @@ import ComplexTable from '@/components/complex-table/index.vue';
 import { SaveFileContent } from '@/api/modules/files';
 import { ElMessage } from 'element-plus';
 import i18n from '@/lang';
-import { checkIp } from '@/utils/util';
 
 const props = defineProps({
     id: {
@@ -58,7 +57,7 @@ let data = ref([]);
 let req = ref<WebSite.WafReq>({
     websiteId: 0,
     key: '',
-    rule: 'ipBlocklist',
+    rule: 'blackfileExt',
 });
 let fileUpdate = reactive({
     path: '',
@@ -75,7 +74,7 @@ const get = async () => {
         const ipList = JSON.parse(res.data.content);
         ipList.forEach((value) => {
             data.value.push({
-                ip: value,
+                file: value,
                 eidt: false,
                 error: '',
             });
@@ -85,51 +84,34 @@ const get = async () => {
     fileUpdate.path = res.data.filePath;
 };
 
-const removeIp = (index: number) => {
+const remove = (index: number) => {
     data.value.splice(index, 1);
 };
 
 const openCreate = () => {
-    data.value.unshift({ id: '', edit: true, error: '' });
+    data.value.unshift({ file: '', edit: true, error: '' });
 };
 
 const submit = async () => {
-    let canCommit = true;
+    let fileArray = [];
-    for (const row of data.value) {
-        console.log(row.ip);
-        console.log(row.error);
-        if (row.ip != '' && row.error != '') {
-            row.edit = true;
-            canCommit = false;
-        }
-    }
-    if (!canCommit) {
-        return;
-    }
-    let ipArray = [];
     data.value.forEach((row) => {
-        ipArray.push(row.ip);
+        if (row.file != '') {
+            fileArray.push(row.file);
+        }
     });
 
-    fileUpdate.content = JSON.stringify(ipArray);
+    fileUpdate.content = JSON.stringify(fileArray);
     loading.value = true;
     SaveFileContent(fileUpdate)
         .then(() => {
             ElMessage.success(i18n.global.t('commons.msg.updateSuccess'));
+            get();
         })
         .finally(() => {
             loading.value = false;
         });
 };
 
-const checkIpRule = (row: any) => {
-    if (checkIp(row.ip)) {
-        row.error = i18n.global.t('commons.rule.ip');
-    } else {
-        row.error = '';
-    }
-};
-
 onMounted(() => {
     req.value.websiteId = id.value;
     get();

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

@@ -3,22 +3,30 @@
         <el-tab-pane :label="'CC 防护'" name="cc">
             <CCDeny :id="id" v-if="index == 'cc'"></CCDeny>
         </el-tab-pane>
-        <el-tab-pane :label="'IP白名单'" name="ipWhiteList">
+        <el-tab-pane :label="'IP 白名单'" name="ipWhiteList">
-            <IpWhiteList :id="id" v-if="index == 'ipWhiteList'"></IpWhiteList>
+            <IpList :id="id" :rule="'ipWhitelist'" v-if="index == 'ipWhiteList'"></IpList>
         </el-tab-pane>
         <el-tab-pane :label="'IP 黑名单'" name="ipBlockList">
-            <IpBlockList :id="id" v-if="index == 'ipBlockList'"></IpBlockList>
+            <IpList :id="id" :rule="'ipBlockList'" v-if="index == 'ipBlockList'"></IpList>
+        </el-tab-pane>
+        <el-tab-pane :label="'文件扩展名黑名单'" name="FileBlockList">
+            <FileBlockList :id="id" v-if="index == 'FileBlockList'"></FileBlockList>
+        </el-tab-pane>
+        <el-tab-pane :label="'URL黑名单'" name="urlBlockList">
+            <UrlList :id="id" :rule="'url'" v-if="index == 'urlBlockList'"></UrlList>
+        </el-tab-pane>
+        <el-tab-pane :label="'URL白名单'" name="urlWhiteList">
+            <UrlList :id="id" :rule="'whiteurl'" v-if="index == 'urlWhiteList'"></UrlList>
         </el-tab-pane>
-        <el-tab-pane :label="'并发限制'"></el-tab-pane>
-        <el-tab-pane :label="'请求限制'"></el-tab-pane>
         <el-tab-pane :label="'禁止爬虫'"></el-tab-pane>
     </el-tabs>
 </template>
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import CCDeny from './ccdeny/index.vue';
-import IpWhiteList from './ip-white-list/index.vue';
+import IpList from './ip-list/index.vue';
-import IpBlockList from './ip-block-list/index.vue';
+import FileBlockList from './file-block-list/index.vue';
+import UrlList from './url-list/index.vue';
 
 const props = defineProps({
     id: {

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

@@ -48,10 +48,17 @@ const props = defineProps({
         type: Number,
         default: 0,
     },
+    rule: {
+        type: String,
+        default: 'ipWhitelist',
+    },
 });
 const id = computed(() => {
     return props.id;
 });
+const rule = computed(() => {
+    return props.rule;
+});
 
 let loading = ref(false);
 let data = ref([]);
@@ -90,14 +97,12 @@ const removeIp = (index: number) => {
 };
 
 const openCreate = () => {
-    data.value.unshift({ id: '', edit: true, error: '' });
+    data.value.unshift({ ip: '', edit: true, error: '' });
 };
 
 const submit = async () => {
     let canCommit = true;
     for (const row of data.value) {
-        console.log(row.ip);
-        console.log(row.error);
         if (row.ip != '' && row.error != '') {
             row.edit = true;
             canCommit = false;
@@ -132,6 +137,7 @@ const checkIpRule = (row: any) => {
 
 onMounted(() => {
     req.value.websiteId = id.value;
+    req.value.rule = rule.value;
     get();
 });
 </script>

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

@@ -0,0 +1,134 @@
+<template>
+    <el-row>
+        <el-col :span="10" :offset="2">
+            <ComplexTable :data="data" v-loading="loading">
+                <template #toolbar>
+                    <el-button type="primary" icon="Plus" @click="openCreate">
+                        {{ $t('commons.button.add') }}
+                    </el-button>
+                </template>
+                <el-table-column :label="'URL'">
+                    <template #default="{ row }">
+                        <fu-read-write-switch :data="row.value" v-model="row.edit" write-trigger="onDblclick">
+                            <el-form-item :error="row.error">
+                                <el-input
+                                    type="textarea"
+                                    :autosize="{ minRows: 2, maxRows: 8 }"
+                                    v-model="row.value"
+                                    @blur="row.edit = false"
+                                />
+                            </el-form-item>
+                        </fu-read-write-switch>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('commons.table.operate')">
+                    <template #default="{ $index }">
+                        <el-button link type="primary" @click="remove($index)">
+                            {{ $t('commons.button.delete') }}
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </ComplexTable>
+            <br />
+            <el-alert :title="$t('website.mustSave')" type="info" :closable="false"></el-alert>
+            <br />
+            <el-button type="primary" :loading="loading" @click="submit">
+                {{ $t('commons.button.save') }}
+            </el-button>
+        </el-col>
+    </el-row>
+</template>
+<script lang="ts" setup>
+import { WebSite } from '@/api/interface/website';
+import { GetWafConfig } from '@/api/modules/website';
+import { computed, onMounted, reactive, ref } from 'vue';
+import ComplexTable from '@/components/complex-table/index.vue';
+import { SaveFileContent } from '@/api/modules/files';
+import { ElMessage } from 'element-plus';
+import i18n from '@/lang';
+
+const props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+    rule: {
+        type: String,
+        default: 'url',
+    },
+});
+const id = computed(() => {
+    return props.id;
+});
+const rule = computed(() => {
+    return props.rule;
+});
+
+let loading = ref(false);
+let data = ref([]);
+let req = ref<WebSite.WafReq>({
+    websiteId: 0,
+    key: '',
+    rule: 'url',
+});
+let fileUpdate = reactive({
+    path: '',
+    content: '',
+});
+
+const get = async () => {
+    data.value = [];
+    loading.value = true;
+    const res = await GetWafConfig(req.value);
+    loading.value = false;
+
+    if (res.data.content != '') {
+        const urlList = res.data.content.split('\n');
+        urlList.forEach((value) => {
+            if (value != '') {
+                data.value.push({
+                    value: value,
+                    eidt: false,
+                    error: '',
+                });
+            }
+        });
+    }
+
+    fileUpdate.path = res.data.filePath;
+};
+
+const remove = (index: number) => {
+    data.value.splice(index, 1);
+};
+
+const openCreate = () => {
+    data.value.unshift({ value: '', edit: true, error: '' });
+};
+
+const submit = async () => {
+    let urlList = '';
+    data.value.forEach((row) => {
+        if (row.value != '') {
+            urlList = urlList + row.value + '\n';
+        }
+    });
+
+    fileUpdate.content = urlList;
+    loading.value = true;
+    SaveFileContent(fileUpdate)
+        .then(() => {
+            ElMessage.success(i18n.global.t('commons.msg.updateSuccess'));
+            get();
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+};
+
+onMounted(() => {
+    req.value.websiteId = id.value;
+    req.value.rule = rule.value;
+    get();
+});
+</script>