Merge branch 'main' into docs/haproxy-spoa-cdn-config

Author: LaurenceJJones

crowdsec-docs/docs/appsec/intro.md

@@ -4,9 +4,20 @@ title: AppSec Component - CrowdSec WAF
 sidebar_position: 1
 ---
 
-## Introduction
+## What is CrowdSec?
+
+If you're new to CrowdSec, here's a quick overview:
+
+**CrowdSec** is an open-source, collaborative security solution that:
+- Detects and blocks malicious actors threatening your infrastructure and applications
+- Provides real-time threat intelligence through a participative community
+- Offers both **Infrastructure Protection** (IP reputation, DDoS mitigation) and **Application Security** (WAF capabilities)
+
+:::tip New to CrowdSec?
+For a more detailed introduction, check out our [Getting Started Guide](/u/getting_started/intro).
+:::
 
-<!-- xx : fix crowdsec version -->
+## Introduction
 
 Meet the Crowdsec **Application Security Component** (AKA : **AppSec Component**), a new capability for advanced application security turning your CrowdSec install into a full fledged **WAF**.
 
@@ -23,10 +34,55 @@ This component capitalizes on existing remediation functions in web servers (suc
 
 ![appsec-global](/img/appsec-global.svg)
 
+### How it works
+
 1. The Web Server receives the HTTP request
-2. The HTTP Request is intercepted and passed to the CrowdSec Security Engine via [the HTTP API](appsec/protocol.md)
-3. The Security Engine answers to the Web Server once the Appsec inband rules have been processed.
-4. Based on the [Security Engine answer](appsec/protocol.md#response-code), the Web Server either blocks the HTTP Request or processes it as usual
+2. The HTTP Request is forwarded to the CrowdSec Security Engine via a local HTTP interface
+3. The Security Engine analyzes the request against AppSec rules (inband rules for immediate blocking)
+4. Based on the analysis, the Web Server either blocks the HTTP Request or processes it as usual
+
+## Supported Web Servers & Reverse Proxies
+
+The AppSec Component works seamlessly with modern web servers and reverse proxies:
+
+<div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '20px', marginBottom: '30px'}}>
+
+<div style={{display: 'flex', flexDirection: 'column', gap: '12px', padding: '16px', border: '1px solid #e5e7eb', borderRadius: '8px', alignItems: 'center', textAlign: 'center'}}>
+<img src="/img/nginx.svg" alt="Nginx" style={{height: '50px', objectFit: 'contain'}} />
+<strong>Nginx</strong>
+<a href="/appsec/quickstart/nginxopenresty.mdx">Quick Start Guide →</a>
+</div>
+
+<div style={{display: 'flex', flexDirection: 'column', gap: '12px', padding: '16px', border: '1px solid #e5e7eb', borderRadius: '8px', alignItems: 'center', textAlign: 'center'}}>
+<img src="/img/openresty.png" alt="OpenResty" style={{height: '50px', objectFit: 'contain'}} />
+<strong>OpenResty</strong>
+<a href="/appsec/quickstart/nginxopenresty.mdx">Quick Start Guide →</a>
+</div>
+
+<div style={{display: 'flex', flexDirection: 'column', gap: '12px', padding: '16px', border: '1px solid #e5e7eb', borderRadius: '8px', alignItems: 'center', textAlign: 'center'}}>
+<img src="/img/traefik.logo.png" alt="Traefik" style={{height: '50px', objectFit: 'contain'}} />
+<strong>Traefik</strong>
+<a href="/appsec/quickstart/traefik.mdx">Quick Start Guide →</a>
+</div>
+
+{/* HAProxy support coming soon - uncomment when feature is released */}
+{/*
+<div style={{display: 'flex', flexDirection: 'column', gap: '12px', padding: '16px', border: '1px solid #e5e7eb', borderRadius: '8px', alignItems: 'center', textAlign: 'center'}}>
+<img src="/img/haproxy-logo.png" alt="HAProxy" style={{height: '50px', objectFit: 'contain'}} />
+<strong>HAProxy</strong>
+<a href="https://hub.crowdsec.net/browse/#remediation-components">Hub Component →</a>
+</div>
+*/}
+
+<div style={{display: 'flex', flexDirection: 'column', gap: '12px', padding: '16px', border: '1px solid #e5e7eb', borderRadius: '8px', alignItems: 'center', textAlign: 'center'}}>
+<img src="/img/WordPress-logotype-wmark.png" alt="WordPress" style={{height: '50px', objectFit: 'contain'}} />
+<strong>WordPress</strong>
+<a href="/appsec/quickstart/wordpress.mdx">Quick Start Guide →</a>
+</div>
+
+</div>
+
+**Looking for other integrations?** Check out the [full list of remediation components](https://hub.crowdsec.net/browse/#remediation-components) on the CrowdSec Hub. We're constantly adding new integrations!
 
 ## Inband Rules and Out-Of-Band Rules
 
@@ -75,4 +131,4 @@ Or consider learning more about the AppSec capabilities:
 -   **Scenarios**: [How to create scenarios that leverage the AppSec Component events](/appsec/alerts_and_scenarios.md)
 -   **Hooks**: [To customise behavior of the AppSec at runtime](/appsec/hooks.md)
 -   **Troubleshoot**: [How to troubleshoot the behavior of the AppSec Component](/appsec/troubleshooting.md)
--   **AppSec Protocol**: [if you're maintaining or creating a remedation component and want to add the AppSec capabilities](/appsec/protocol.md)
+-   **AppSec Technical Details**: [For developers integrating with the AppSec Component](/appsec/protocol.md)

crowdsec-docs/docs/appsec/rules_syntax.md

@@ -67,6 +67,8 @@ The target allows to specify which part of the requests needs to be inspected. Y
   - `ARGS_NAMES`: Name of the query string parameters
   - `BODY_ARGS`: Body args
   - `BODY_ARGS_NAMES`: Name of the body args
+  - `COOKIES`: Cookies sent in the request
+  - `COOKIES_NAMES`: Names of the cookies sent in the request
   - `HEADERS`: HTTP headers sent in the request
   - `HEADERS_NAMES`: Name of the HTTP headers sent in the request
   - `METHOD`: HTTP method of the request
@@ -75,6 +77,7 @@ The target allows to specify which part of the requests needs to be inspected. Y
   - `URI_FULL`: The full URL of the request including the query string
   - `RAW_BODY`: The entire body of the request
   - `FILENAMES`: The name of the files sent in the request
+  - `FILES_TOTAL_SIZE`: Total size of the uploaded files in the request,
 - _(optional)_ `variables` containing one or more variable names to restrict the matching operation to (only relevant for `ARGS`, `BODY_ARGS` and `HEADERS`)
 
 ```yaml
@@ -94,11 +97,12 @@ The target allows to specify which part of the requests needs to be inspected. Y
 :::info
 
 The default config `crowdsecurity/base-config` enables specific decoders when the following content-types are set:
- - **application/x-www-form-urlencoded**
- - **multipart/form-data**
- - **application/xml**
- - **application/json** : when used, all the variable names are prefixed with `json.`
- - **text/xml**
+
+- **application/x-www-form-urlencoded**
+- **multipart/form-data**
+- **application/xml**
+- **application/json** : when used, all the variable names are prefixed with `json.`
+- **text/xml**
 
 :::
 
@@ -157,7 +161,6 @@ Match provides the pattern to match the target against, including optional trans
     value: BLAH
 ```
 
-
 ### Seclang Support
 
 In order to support your existing/legacy rules set, CrowdSec's AppSec Component is also able to load rules in the **seclang** format (**ModSecurity** rules).
@@ -177,7 +180,6 @@ The default paths for the data directory per OS:
 - Freebsd: `/var/db/crowdsec/data`
 - Windows: `C:\programdata\crowdsec\data`
 
-
 > Example
 
 ```yaml

crowdsec-docs/docs/expr/strings_helpers.md

@@ -54,6 +54,12 @@ Parses an URI into a map of string list.
 
 `QueryEscape` escapes the string so it can be safely placed inside a URL query.
 
+### `ExtractQueryParam(query string, param string) []string`
+
+`ExtractQueryParam` extract the `param` parameter value from the URL query `query` and returns the list of values.
+
+> `any(ExtractQueryParam("/foo?id=1&b=2", "id"), { # == "1" })` returns true if at least one of the `id` parameter value is equal to `1`
+
 ### `Sprintf(format string, a ...interface{}) string`
 
 [Official doc](https://pkg.go.dev/fmt#Sprintf) : Sprintf formats according to a format specifier and returns the resulting string.

crowdsec-docs/docusaurus.config.ts

@@ -107,24 +107,34 @@ const NAVBAR_ITEMS: NavbarItem[] = [
 		position: "left",
 		label: "FAQ/Troubleshooting",
 	},
+	{
+		href: "https://roadmap.crowdsec.net",
+		position: "right",
+		title: "Features Roadmap",
+		className: "header-roadmap-link header-icon-link invert dark:invert-0",
+	},
 	{
 		href: "https://github.com/crowdsecurity/crowdsec",
 		position: "right",
+		title: "GitHub CrowdSecurity",
 		className: "header-github-link header-icon-link invert dark:invert-0",
 	},
 	{
 		href: "https://discord.gg/wGN7ShmEE8",
 		position: "right",
+		title: "Discord Community",
 		className: "header-discord-link invert dark:invert-0",
 	},
 	{
 		href: "https://discourse.crowdsec.net",
 		position: "right",
+		title: "Discourse Community",
 		className: "header-discourse-link invert dark:invert-0",
 	},
 	{
 		href: "https://hub.crowdsec.net/",
 		position: "right",
+		title: "CrowdSec Hub",
 		className: "header-hub-link dark:invert",
 	},
 ];

crowdsec-docs/src/css/navbar.css

@@ -19,26 +19,31 @@ const HomePageHeader = (): React.JSX.Element => {
 								infrastructure and application security.
 							</p>
 						</div>
-						<img alt="CrowdSec Logo" src="/img/crowdsec_logo.png" className="h-20 w-28 md:h-24 md:w-auto" />
+						<img alt="CrowdSec Logo" src="/img/crowdsec_logo.png" className="h-20 w-28 md:h-24 md:w-auto flex-shrink-0" />
 					</div>
-					<div className="flex flex-col md:flex-row items-start gap-2">
+					<div className="flex flex-col md:flex-row items-start gap-2 flex-wrap">
 						<Link to="/u/getting_started/intro" className="w-full md:w-auto">
-							<Button color="primary" className="w-full md:w-auto">
-								Get started
+							<Button size="lg" color="primary" className="w-full md:w-auto">
+								🚀 Quick Guides
 							</Button>
 						</Link>
 						<div className="flex flex-row gap-2 w-full md:w-auto">
-							<Link to="https://app.crowdsec.net/" className="flex-1 md:flex-none">
-								<Button variant="secondary" className="w-full md:w-auto">
-									Explore the Console
+							<Link to="https://app.crowdsec.net/" className="flex-1 min-w-0">
+								<Button size="lg" variant="secondary" className="w-full">
+									👨‍💻 Explore the Console
 								</Button>
 							</Link>
-							<Link to="https://killercoda.com/iiamloz/scenario/crowdsec-setup" className="flex-1 md:flex-none">
-								<Button variant="secondary" className="w-full md:w-auto">
-									Online Sandbox
+							<Link to="https://killercoda.com/iiamloz/scenario/crowdsec-setup" className="flex-1 min-w-0">
+								<Button size="lg" variant="secondary" className="w-full">
+									🛠️ Online Sandbox
 								</Button>
 							</Link>
 						</div>
+						<Link to="https://start.crowdsec.net/" className="w-full md:w-auto">
+							<Button size="lg" variant="secondary" className="w-full md:w-auto">
+								💡 Not sure where to start?
+							</Button>
+						</Link>
 					</div>
 				</div>