Embed websec badge

Badge Previews

secured bywebsec.nl
secured bywebsec.nl
secured bywebsec.nl
websec.nlyour cybersecurty partner
This website's security is no longer being audited by websec and may be exposed to vulnerabilities.
company basic data
organization name:
Example Inc.
web home:
https://example.org
audit information
Domains Audited:
example.org, admin.example.org
badge expired:
just now
summary of audits:
Security Audit completed, all findings have been resolved.
certification
status:
expired
certificate title:
VA/PT Certificate
certificate summary:
This is to acknowledge that Your Org has successfully conducted and passed the in-depth security audit by remediating the found vulnerabilities during the penetration test.

With vanilla script tag

Copy and the paste the below code anywhere in your html. Replace <YOUR_CLIENT_ID> with your client ID.

<script src="https://websec.nl/badge_embed/websecbadge.js" defer></script>
<link rel="stylesheet" href="https://websec.nl/badge_embed/style.css" />
<div id="websec_badge" data-clientid="<YOUR_CLIENT_ID>"></div>

With bundlers

We export a renderWebsecBadge function from https://websec.nl/badge_embed/websecbadge_exports.js.
You can import however your build system supports url imports. One way would be like below

<!-- import and bundle the stylesheet according to your build system to minimize network overhead -->
<link rel="stylesheet" href="https://websec.nl/badge_embed/style.css" />
<div id="BADGE_ROOT"></div>
export const render = async () => {
    const { renderWebsecBadge } = await import(
        'https://websec.nl/badge_embed/websecbadge_exports.js'
    )

    /** renderWebsecBadge(target: HTMLElement, cliendId: string, options?) */
    renderWebsecBadge(document.getElementById('BADGE_ROOT'), '<YOUR_CLIENT_ID>')
}

/** run render() preferably after page load */

With React/Preact

You can use the same renderWebsecBadge function described above with a little patch

import { useEffect, useRef } from 'react' // or 'preact/hooks`

export function WebsecBadge() {
    const ref = useRef()

    useEffect(() => {
        import('https://websec.nl/badge_embed/websecbadge_exports.js').then(
            ({ renderWebsecBadge }) => {
                renderWebsecBadge(ref.current, '<YOUR_CLIENT_ID>')
            }
        )
    }, [])

    return (
        <div>
            {/* again, import styles according to your build system */}
            <link rel="stylesheet" href="https://websec.nl/badge_embed/style.css" />
            <div ref={ref}></div>
        </div>
    )
}

Dark mode

We support toggling dark mode programatically, instead of detecting users preferance through media.

If you're using vanilla html/script, just add data-dark to your target element.

<div id="websec_badge" data-clientid="<YOUR_CLIENT_ID>" data-dark="yes"></div>

Alternatively, renderWebsecBadge function supports an optional isDark flag

renderWebsecBadge(document.getElementById('BADGE_ROOT'), '<YOUR_CLIENT_ID>', {
    isDark: true,
})