SCW Button Library

A simple-to-use frontend library for creating training buttons based on the Direct Linking API. You will need to obtain a Partner ID from your Secure Code Warrior integration contact. This will usually be your organisation name in lowercase snake-case.

Try out the builder to easily customise the buttons for your application.

Usage

Add buttons like this:

<a role="button" class="scw-button" data-mapping-list-id="cwe" data-mapping-key="89" data-language-key="javascript:express"></a>
<a role="button" class="scw-button" data-mapping-list-id="owasp-web-2017" data-mapping-key="A8" data-language-key="java:spring"></a>

Then add the following code:

<script crossorigin="anonymous" src="https://cdn.securecodewarrior.com/js/direct-linking/1.0.0/direct-linking.js"></script>
<script>
    SCW.init('your_partner_id_here');
    SCW.renderAllTrainingButtons();
</script>

You can also render one button at a time:

<a id="cwe89-button" role="button" class="scw-button" data-mapping-list-id="cwe" data-mapping-key="89" data-language-key="javascript:express"></a>

<script crossorigin="anonymous" src="https://cdn.securecodewarrior.com/js/direct-linking/1.0.0/direct-linking.js"></script>
<script>
    SCW.init('your_partner_id_here');
    SCW.renderTrainingButton('cwe89-button');
</script>

See example.html for more examples.

Configuration

Both SCW.renderAllTrainingButtons and SCW.renderTrainingButton accept a configuration object that can have the following properties:

• buttonText: {String} the text to display on button - defaults to 'Train Now'
• displayIcon: {Boolean} display SCW logo on button - defaults to true
• displayWhenTrainingUnavailable: {Boolean} render a disabled button if training is unavailable for the specified mapping key, otherwise render nothing - defaults to true
• uiTheme: {String} 'light' or 'dark' UI theme - defaults to 'dark'

The configuration object can be passed in like this:

var config = {
    buttonText: 'Train Me Now',
    displayIcon: true,
    displayWhenTrainingUnavailable: false,
    uiTheme: 'light'
};
SCW.renderAllTrainingButtons(config);
SCW.renderTrainingButton(buttonElementId, config);

Override Styling

The default light and dark themes can be overridden via CSS by adding a custom class to the anchor element.

<style>
.some-custom-class {
    border: 1px solid red !important;
    background-color: white !important;
    color: red !important;
}
</style>
<a role="button" class="scw-button some-custom-class" data-mapping-list-id="cwe" data-mapping-key="94" data-language-key="java:spring"></a>

Fetching Training Data

Training data can also be fetched from the Direct Linking API to facilitate custom display of vulnerability information, videos and links to Secure Code Warrior training exercises:

var mappingListId = 'cwe';
var mappingKey = '89';
var languageKey = 'java:spring';

SCW.getSCWTrainingData(mappingListId, mappingKey, languageKey).then(function(data) {
    console.log(data.name); // string
    console.log(data.description); // string
    console.log(data.url); // string (URL)
    console.log(data.videos); // array of strings (URLs)
});

Valid IDs and Keys

Valid mapping list IDs (slugs), mapping keys and language keys can be retrieved as follows:

SCW.getMappingLists().then(function(data) {
    data.forEach(function(mappingList) {
        console.log(mappingList.slug);
        console.log(mappingList.name);

        SCW.getMappingListItems(mappingList.slug).then(function(items) {
            // ...
        })
    });
    });

    SCW.getLanguageKeys().then(function(data) {
    data.forEach(function(language) {
        console.log(language.languageKey);
        console.log(language.languageFramework);
    });
});