burp优化 Repeater

frontend/package.json

@@ -10,8 +10,10 @@
   },
   "dependencies": {
     "highlight.js": "^11.7.0",
+    "prismjs": "^1.29.0",
     "uuid": "^9.0.0",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue-prism-editor": "^2.0.0-alpha.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.3",

frontend/package.json.md5

@@ -1 +1 @@
-bfe8b93da5c003bedd08ff0a7b4755c0
+3cc55d7b2b686675736348594fe285eb

frontend/src/components/burpsuite/repeater/Repeater.vue

@@ -58,7 +58,9 @@ EventsOn("RepeaterBody", result => {
 const request = ref('');
 
 function send(panel) {
-    request.value = document.getElementById("myCodeR").textContent;
+    // console.log(document.getElementById("myCodeR"))
+    // request.value = document.getElementById("myCodeR").textContent;
+    console.log(request.value)
     if (request.value === "") {
         request.value = panel.req;
     }
@@ -70,6 +72,22 @@ function send(panel) {
     })
 }
 
+// import Prism Editor
+import { PrismEditor } from 'vue-prism-editor';
+import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles somewhere
+
+// import highlighting library (you can use any library you want just return html string)
+import { highlight, languages } from 'prismjs/components/prism-core';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-http.js';
+import 'prismjs/themes/prism.css'; // import syntax highlighting styles
+
+
+function highlighter(code) {
+    request.value = code.toString()
+    return highlight(code, Prism.languages.http,'http'); // languages.<insert language> to return html with markup
+}
+
 </script>
 
 <template>
@@ -93,8 +111,7 @@ function send(panel) {
                     <n-gi>
                         <n-tabs type="line" animated >
                             <n-tab-pane name="Request" style="width: 100%; overflow-x: auto;">
-                                <!-- contenteditable 设置为可修改, 这样通过 id 获取值 不能再使用 show-line-numbers 显示行号，不然会将行号带到请求中 -->
-                                <n-code id="myCodeR" contenteditable language="http" :code="panel.req" style="white-space: pre-wrap; text-align: left;" />
+                                <prism-editor class="my-editor" id="myCodeR" v-model="panel.req" :highlight="highlighter" line-numbers></prism-editor>
                             </n-tab-pane>
                         </n-tabs>
                     </n-gi>
@@ -111,3 +128,15 @@ function send(panel) {
         </n-tab-pane>
     </n-tabs>
 </template>
+
+<style scoped>
+.my-editor {
+    line-height: 1.8;
+    padding: 5px;
+    white-space: nowrap;
+}
+/* optional class for removing the outline */
+.prism-editor__textarea:focus {
+    outline: none;
+}
+</style>