Dutch
English
Home
VAPT Validatie Tool
Integreer Websec Badge

Hoe de Websec Badge te embedden

De WebSec badge verhoogt het vertrouwen, de veiligheid en het vertrouwen onder je klanten!

Hoe te embedden

Stap 1: Verkrijg een badge ID van WebSec. Als je in aanmerking komt, ontvang je er een kort na een succesvolle audit.

Stap 2: Kopieer en plak de onderstaande code ergens in je HTML. Vervang <BADGE_ID> door de ID die je van WebSec hebt ontvangen.

<div style="width: 64px" data-websec-badge-id="<BADGE_ID>"></div>
<script defer src="https://websec.nl/snippets/badge/v2/badge.js"></script>

Let op: Zorg ervoor dat de div een geschikte breedte heeft. De badge zal zich uitbreiden tot de volledige breedte.

Met Next.js

Gebruik de Script component die door Next.js wordt geleverd en je bent klaar.

import Script from 'next/script';
import { useEffect } from 'react';

export function WebsecBadge() {
    // re-mount on soft navigation
  useEffect(() => {
    if (window.WebSecSecureBadge) window.WebSecSecureBadge.initialize();
  }, []);

  return (
    <>
      <div style={{ width: 64 }} data-websec-badge-id="<BADGE_ID>"></div>
      <Script strategy="lazyOnload" src="https://websec.nl/snippets/badge/v2/badge.js" />
    </>
  );
}

TypeScript

Als je TypeScript gebruikt, zorg er dan voor dat je het type window.WebSecSecureBadge globaal toevoegt.

declare global {
  interface Window {
    WebSecSecureBadge?: { initialize: () => void };
  }
}

React Hydratatie Fouten

Je zou deze fouten niet moeten tegenkomen met de Next Script component. Maar als je niet tevreden bent met next/script, probeer dan conditioneel te renderen in de client.

Houd er rekening mee dat we de Next head component gebruiken. Anders kan het script mogelijk niet worden uitgevoerd.

import Head from 'next/head';

export function WebsecBadge() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => setIsClient(true), []);

  return isClient ? (
    <>
      <div style={{ width: 64 }} data-websec-badge-id="<BADGE_ID>"></div> 
      <Head>
        <script async src="https://websec.nl/snippets/badge/v2/badge.js"></script>
      </Head>
    </>
  ) : null;
}

Als je de Next /app directory gebruikt, neem dan een kijkje bij de Next script optimalisatiegids voor de app dir.

Voorkom Layout Shift

Ideaal gesproken zou je de badge dezelfde hoogte/breedte moeten geven om layout shifts te voorkomen.

<div style="width: 64px; height: 64px;" data-websec-badge-id="<BADGE_ID>"></div>

Als je de badge conditioneel rendert in Next.js-omgevingen, probeer dan om deze te wrappen met een andere element en geef de wrapper expliciete hoogte/breedte. Iets zoals dit:

return (
  <div style={{ width: 64, height: 64 }}>
    {isClient && (
      <>
        <div style={{ width: '100%' }} data-websec-badge-id="<BADGE_ID>"></div>
        <Head>
          <script async src="https://websec.nl/snippets/badge/v2/badge.js"></script>
        </Head>
      </>
    )}
  </div>
);

Dark Mode

We ondersteunen dark mode automatisch via de (prefers-color-scheme: dark) CSS media query.

Ontwikkeling

Voor ontwikkelomgevingen kun je een van onze test IDs gebruiken:

testid_valid
testid_invalid
testid_expired

Happy Hacking!!