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 totrue
displayWhenTrainingUnavailable
:{Boolean}
render a disabled button if training is unavailable for the specified mapping key, otherwise render nothing - defaults totrue
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);
});
});