code push

frontend/src/components/ModalLog.tsx

@@ -10,8 +10,8 @@ export const ModalLog = (
     }
 ) => {
     return <Modal size="90%" title={title} opened={opened} onClose={close} centered>
-        <ScrollArea h={500} style={{ minWidth: "100%",whiteSpace: "pre-wrap"}}>
-           <Code block mih={500}>{data}</Code>
+        <ScrollArea h={500} style={{ maxWidth: "100%",whiteSpace: "break-spaces"}} scrollbars="y">
+           <Code block mih={500} style={{ maxWidth: "100%",whiteSpace: "break-spaces"}}>{data}</Code>
         </ScrollArea>
     </Modal>
 }

frontend/src/components/NFProxy/ExceptionWarning.tsx

@@ -2,6 +2,7 @@ import { IoIosWarning } from "react-icons/io"
 import { socketio, WARNING_NFPROXY_TIME_LIMIT } from "../../js/utils"
 import { Tooltip } from "@mantine/core"
 import { useEffect, useState } from "react"
+import { round } from "@mantine/core/lib/components/ColorPicker/converters/parsers"
 
 
 export const ExceptionWarning = ({ service_id }: { service_id: string }) => {
@@ -17,9 +18,25 @@ export const ExceptionWarning = ({ service_id }: { service_id: string }) => {
         }
     }, [])
 
+    const [_time, setTime] = useState(new Date());
+
+    useEffect(() => {
+      const interval = setInterval(() => {
+        setTime(new Date());
+      }, 1000);
+  
+      return () => clearInterval(interval);
+    }, []);
+  
+    const deltaTime = new Date().getTime()-lastExceptionTimestamp
+    const minutes = Math.floor(deltaTime/(1000*60))
+    const seconds = Math.floor(deltaTime/1000)%60
+
+    const deltaStringTime = `${minutes.toString().length>1?minutes:"0"+minutes}:${seconds.toString().length>1?seconds:"0"+seconds}`
+
     return <>
         {(new Date().getTime()-lastExceptionTimestamp <= WARNING_NFPROXY_TIME_LIMIT)?
-            <Tooltip label={`There was an exception less than ${WARNING_NFPROXY_TIME_LIMIT/(1000*60)} minutes ago: check the logs`} color="yellow">
+            <Tooltip label={`There was an exception less than ${deltaStringTime} minutes ago: check the logs`} color="yellow">
                 <IoIosWarning size={30} style={{ color: "yellow" }} />
             </Tooltip>
         :null}

frontend/src/components/NFProxy/utils.ts

@@ -96,3 +96,77 @@ export const nfproxy = {
         return status === "ok"?undefined:status
     }
 }
+
+
+export const EXAMPLE_PYFILTER = `# This in an example of a filter file with http protocol
+
+# From here we can import the DataTypes that we want to use:
+# The data type must be specified in the filter functions
+# And will also interally be used to decide when call some filters and how aggregate data
+from firegex.nfproxy.params import RawPacket
+
+# global context in this execution is dedicated to a single TCP stream
+# - This code will be executed once at the TCP stream start
+# - The filter will be called for each packet in the stream
+# - You can store in global context some data you need, but exceeding with data stored could be dangerous
+# - At the end of the stream the global context will be destroyed
+
+from firegex.nfproxy import pyfilter
+# pyfilter is a decorator, this will make the function become an effective filter and must have parameters with a specified type
+
+from firegex.nfproxy import REJECT, ACCEPT, UNSTABLE_MANGLE, DROP
+# - The filter must return one of the following values:
+#   - ACCEPT: The packet will be accepted
+#   - REJECT: The packet will be rejected (will be activated a mechanism to send a FIN packet and drop all data in the stream)
+#   - UNSTABLE_MANGLE: The packet will be mangled and accepted
+#   - DROP: All the packets in this stream will be easly dropped
+
+# If you want, you can use print to debug your filters, but this could slow down the filter
+
+# Filter names must be unique and are specified by the name of the function wrapped by the decorator
+@pyfilter
+# This function will handle only a RawPacket object, this is the lowest level of the packet abstraction
+def strange_filter(packet:RawPacket):
+    # Mangling packets can be dangerous, due to instability of the internal TCP state mangling done by the filter below
+    # Also is not garanteed that l4_data is the same of the packet data:
+    # packet data is the assembled TCP stream, l4_data is the TCP payload of the packet in the nfqueue
+    # Unorder packets in TCP are accepted by default, and python is not called in this case
+    # For this reason mangling will be only available RawPacket: higher level data abstraction will be read-only
+    if b"TEST_MANGLING" in packet.l4_data:
+        # It's possible to change teh raw_packet and l4_data values for mangling the packet, data is immutable instead
+        packet.l4_data = packet.l4_data.replace(b"TEST", b"UNSTABLE")
+        return UNSTABLE_MANGLE
+    # Drops the traffic
+    if b"BAD DATA 1" in packet.data:
+        return DROP
+    # Rejects the traffic
+    if b"BAD DATA 2" in packet.data:
+        return REJECT
+    # Accepts the traffic (default if None is returned)
+    return ACCEPT
+
+# Example with a higher level of abstraction
+@pyfilter
+def http_filter(http:HTTPRequest):
+    if http.method == "GET" and "test" in http.url:
+        return REJECT
+
+# ADVANCED OPTIONS
+# You can specify some additional options on the streaming managment
+# pyproxy will automatically store all the packets (already ordered by the c++ binary):
+#
+# If the stream is too big, you can specify what actions to take:
+# This can be done defining some variables in the global context
+# - FGEX_STREAM_MAX_SIZE: The maximum size of the stream in bytes (default 1MB)
+#   NOTE: the stream size is calculated by the sum of the dimension of the packets in the stream (both directions)
+# - FGEX_FULL_STREAM_ACTION: The action to do when the stream is full
+#   - FLUSH: Flush the stream and continue to acquire new packets (default)
+#   - DROP: Drop the next stream packets - like a DROP action by filter
+#   - REJECT: Reject the stream and close the connection - like a REJECT action by filter
+#   - ACCEPT: Stops to call pyfilters and accept the traffic
+
+# Example of a global context
+FGEX_STREAM_MAX_SIZE = 4096
+FGEX_FULL_STREAM_ACTION = REJECT
+# This could be an ideal configuration if we expect to normally have streams with a maximum size of 4KB of traffic
+`

frontend/src/components/NavBar/index.tsx

@@ -37,9 +37,14 @@ export default function NavBar() {
         <Divider my="xs" />
         <Box style={{flexGrow: 1}} component={ScrollArea} px="xs" mt="xs">
             <NavBarButton navigate="nfregex" closeNav={closeNav} name="Netfilter Regex" color="grape" icon={<BsRegex size={19} />} />
-            <NavBarButton navigate="nfproxy" closeNav={closeNav} name="Netfilter Proxy" color="lime" icon={<TbPlugConnected size={19} />} />
             <NavBarButton navigate="firewall" closeNav={closeNav} name="Firewall Rules" color="red" icon={<PiWallLight size={19} />} />
             <NavBarButton navigate="porthijack" closeNav={closeNav} name="Hijack Port to Proxy" color="blue" icon={<GrDirections size={19} />} />
+            <Box px="xs" mt="lg">
+                <Title order={5}>Experimental Features 🧪</Title>
+            </Box>
+            <Text></Text>
+            <Divider my="xs" />
+            <NavBarButton navigate="nfproxy" closeNav={closeNav} name="Netfilter Proxy" color="lime" icon={<TbPlugConnected size={19} />} />
         </Box>
         
     </AppShell.Navbar>