Embed websec badge

Badge Previews

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.

view detailed info →

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,
})