Security Badges

Embed real-time security badges on your website to showcase your security posture. Badges auto-update with each scan and provide instant credibility to visitors.

Badge Styles

ComplianceLayer offers two badge styles:

Flat (default)

Plastic

SVG Badge Endpoint

GET/badge/:domain.svg

Get an embeddable security badge as SVG. Cached for 1 hour.

Path Parameters

Parameter	Type	Description
`domain`	string	Domain to generate badge for

Query Parameters

Parameter	Type	Default	Description
`style`	enum	flat	Badge style: flat or plastic

<!-- Embed in HTML -->
<img
  src="https://api.compliancelayer.net/v1/badge/example.com.svg"
  alt="Security Grade"
/>

<!-- With plastic style -->
<img
  src="https://api.compliancelayer.net/v1/badge/example.com.svg?style=plastic"
  alt="Security Grade"
/>

JSON Badge Endpoint

GET/badge/:domain.json

Get badge data as JSON for custom rendering.

curl "https://api.compliancelayer.net/v1/badge/example.com.json"

Custom Badge Implementation

Use the JSON endpoint to build custom badges:

import { useEffect, useState } from 'react';

export function SecurityBadge({ domain }) {
  const [badge, setBadge] = useState(null);

  useEffect(() => {
    fetch(`https://api.compliancelayer.net/v1/badge/${domain}.json`)
      .then(res => res.json())
      .then(setBadge);
  }, [domain]);

  if (!badge) return <div>Loading...</div>;

  const getColor = (grade) => {
    if (grade.startsWith('A')) return '#198038';
    if (grade.startsWith('B')) return '#0f62fe';
    if (grade.startsWith('C')) return '#f1c21b';
    if (grade.startsWith('D')) return '#ff832b';
    return '#da1e28';
  };

  return (
    <div
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        padding: '8px 12px',
        borderRadius: '6px',
        background: getColor(badge.grade),
        color: 'white',
        fontWeight: 'bold',
        gap: '8px'
      }}
    >
      <span>Security:</span>
      <span>{badge.grade}</span>
      <span style={{ opacity: 0.8 }}>({badge.score}/100)</span>
    </div>
  );
}

Badge Colors

Badge colors are automatically determined by grade:

Grade	Color	Meaning
`A+, A, A-`	● Green	Excellent security
`B+, B, B-`	● Blue	Good security
`C+, C, C-`	● Yellow	Fair security
`D+, D, D-`	● Orange	Poor security
`F`	● Red	Critical issues

Best Practices

1. Cache Badge Images

SVG badges are cached for 1 hour by ComplianceLayer
Your CDN should cache badges for at least 30 minutes
Use browser cache headers for badge images

2. Provide Alt Text

<img
  src="https://api.compliancelayer.net/v1/badge/example.com.svg"
  alt="ComplianceLayer Security Grade: A- (92/100)"
  title="Last scanned: 2026-03-09"
/>

3. Link to Full Report

Make badges clickable to show full security details:

<a
  href="https://app.compliancelayer.net/report/example.com"
  target="_blank"
  rel="noopener noreferrer"
>
  <img
    src="https://api.compliancelayer.net/v1/badge/example.com.svg"
    alt="Security Grade"
  />
</a>

4. Update Regularly

Badges reflect your most recent scan
Set up scheduled scans to keep badges current
Daily scans recommended for public-facing badges

Public Visibility: Badge endpoints are public and don't require authentication. Only display badges for domains you're comfortable sharing publicly.

Example Implementations

Footer Badge

<footer>
  <div class="security-badge-container">
    <p>Security Powered by ComplianceLayer</p>
    <a href="https://app.compliancelayer.net/report/example.com">
      <img
        src="https://api.compliancelayer.net/v1/badge/example.com.svg"
        alt="Security Grade"
      />
    </a>
  </div>
</footer>

README Badge

# MyApp

![Security Grade](https://api.compliancelayer.net/v1/badge/myapp.com.svg)
![Build Status](https://img.shields.io/github/workflow/status/user/repo/CI)
![License](https://img.shields.io/badge/license-MIT-blue.svg)

Secure, reliable cloud platform...

API Documentation