Integrate CloFix Core API with any framework in minutes. Here's how:
🌐
HTML + JavaScript
One-line CDN integration for any HTML page.
<script src="https://clofix.com/api/clofix-waf.js"></script>
<form data-waf-protected>
<input type="text" name="email">
<button type="submit">Submit</button>
</form>
⚛️
React.js
Protect your React forms with a custom hook.
import { useCloFixWAF } from '@clofix/react';
function LoginForm() {
const { validate, loading } = useCloFixWAF({
domain: 'example.com'
});
const handleSubmit = async (data) => {
const result = await validate('login', data);
if (result.allowed) { }
};
}
▲
Next.js
Protect your Next.js forms with SSR support.
import { useCloFixWAF } from '@clofix/next';
export function LoginPage() {
const { validate, isReady } = useCloFixWAF({
domain: 'example.com',
apiUrl: process.env.NEXT_PUBLIC_API_URL
});
const handleSubmit = async (e) => {
e.preventDefault();
const result = await validate(formData);
if (result.allowed) { }
};
}
🟢
Vue.js
Protect your Vue forms with a composable.
<script setup>
import { useCloFixWAF } from '@clofix/vue';
const { validate, loading } = useCloFixWAF({
domain: 'example.com'
});
const handleSubmit = async (data) => {
const result = await validate('login', data);
if (result.allowed) { }
};
</script>
🅰️
Angular
Protect your Angular forms with a service.
import { Injectable } from '@angular/core';
import { CloFixWAF } from '@clofix/angular';
@Injectable({ providedIn: 'root' })
export class SecurityService {
constructor() {
this.waf = new CloFixWAF({
domain: 'example.com'
});
}
async validate(data: any) {
return await this.waf.validate('login', data);
}
}
⚡
Svelte
Protect your Svelte forms with a store.
<script>
import { clofix } from '@clofix/svelte';
let email, password;
async function handleSubmit() {
const result = await clofix.validate('login', { email, password });
if (result.allowed) { }
}
</script>
🟡
Laravel (PHP)
Protect your Laravel routes with middleware.
public function handle($request, $next) {
$response = CloFix::validate($request);
if (!$response->allowed) {
return response()->json([
'error' => $response->reason
], 403);
}
return $next($request);
}
🐍
Python Django
Protect your Django views with middleware.
from clofix import CloFixWAF
class CloFixMiddleware:
def __init__(self, get_response):
self.get_response = get_response
self.waf = CloFixWAF(domain='example.com')
def __call__(self, request):
response = self.waf.validate(request)
if not response.allowed:
return JsonResponse({'error': response.reason}, status=403)
return self.get_response(request)
☕
Spring Boot (Java)
Protect your Spring Boot endpoints with filter.
@Component
public class CloFixFilter implements Filter {
private CloFixWAF waf;
@Override
public void doFilter(ServletRequest request,
ServletResponse response, FilterChain chain) {
ValidationResult result = waf.validate(request);
if (!result.isAllowed()) {
((HttpServletResponse) response).setStatus(403);
return;
}
chain.doFilter(request, response);
}
}
🔷
Kotlin (Ktor)
Protect your Ktor routes with interceptor.
fun Application.module() {
install(CloFixWAF) {
domain = "example.com"
apiUrl = "https://api.clofix.com"
}
routing {
post("/login") {
val result = call.validate()
if (result.allowed) {
}
}
}
}
🔵
.NET (C#)
Protect your .NET endpoints with middleware.
public class CloFixMiddleware {
private readonly RequestDelegate _next;
private readonly CloFixWAF _waf;
public async Task InvokeAsync(HttpContext context) {
var result = await _waf.ValidateAsync(context);
if (!result.Allowed) {
context.Response.StatusCode = 403;
await context.Response.WriteAsync(result.Reason);
return;
}
await _next(context);
}
}
📱
Flutter (Dart)
Protect your Flutter app with HTTP interceptor.
import 'package:clofix_flutter/clofix_flutter.dart';
class CloFixInterceptor extends Interceptor {
final CloFixWAF waf = CloFixWAF(domain: 'example.com');
@override
Future onRequest(RequestOptions options,
RequestInterceptorHandler handler) async {
final result = await waf.validate(options);
if (!result.allowed) {
throw DioError('Blocked');
}
handler.next(options);
}
}