Atlas-hosted sites in the PCI environment (those that use a credit card payment gateway) will need to have all web page changes undergo a secure code review before going live to patrons. Atlas provides an automated code review service in GitHub that will run an initial scan of your web pages and immediately generate a report to communicate any issues found to assist you with resolving them. This article will go over the issues that may potentially appear in the code review report and the best practices to resolve them.
Overview
The automated code review report will separate issues into five main categories based on severity: critical issues, warnings, suggestions, issues that must be manually reviewed by Atlas staff, and approved warnings. The complete list of issues that may appear in each category and their suggested resolutions are provided below.
Critical Issues | Warnings | Suggestions | Manual Review | Approved Warnings
Critical Issues
Critical issues flagged in the secure code review must be resolved before the web pages can be pushed to production. These critical issues and their resolutions are listed below.
External Link Missing NoOpener/NoReferrer | Invalid jQuery Version | External JavaScript or CSS Files | JavaScript Injects Content from an External Source | Unescaped Characters on Dual Auth Portal | SessionID Parameter Found in URL | Product Tags Used on Pages Not Processed by Web DLL (Within <Form> Attribute) | CustomErrors Mode Not Set to "On" or "RemoteOnly"
External Link Missing NoOpener/NoReferrer
Links to any external content opening in a new tab present security risks. If the external link is affected by malicious code, it can use JavaScript to modify or obtain sensitive information on the original page. This can be resolved by adding rel="noopener noreferrer" to the code for the link.
Examples of problematic code:
<a target="_blank" href="https://www.google.com/">Google</a>
To resolve:
Add the noopener and noreferrer attributes to secure the link:
<a target="_blank" rel="noopener noreferrer" href="https://www.google.com/">Google</a>Invalid jQuery Version
As of October 1, 2021, the minimum version of core jQuery required for PCI compliance is v3.5.1. Prior versions of jQuery will not pass the code review. After updating the core jQuery version, the jQuery UI library should also be updated to at least v1.12.1 to ensure compatibility with Aeon date pickers.
To resolve:
Ensure that any references to JQuery in your web pages use v3.5.1 at a minimum. For information on locating and updating these references, see Updating Outdated jQuery in the Aeon Web Pages.
External JavaScript/External CSS
The External JavaScript/External CSS flags will be triggered if your web pages contain links to non-approved external JavaScript or CSS files or if they contain JavaScript that retrieves content from an external source. An overview of each issue and suggested resolutions are provided below.
External JavaScript or CSS Files
With some exceptions, PCI compliance requires content to be hosted on the same machine. As content on external sites can be modified without a security review, most links to external CSS stylesheets or JavaScript files are not permitted. However, external links to static images such as .png and .jpg are generally safe to include.
Exceptions
The following external sources have undergone external security reviews and are permitted for use in your web pages: jQuery, Bootstrap, moment.js, Font Awesome, and Google Fonts
Example of problematic code:
<script src="https://atlas-sys.edu/statuspage-embed/index.min.js"></script>
To resolve:
Contents of externally hosted JavaScript and CSS must be added to the server. Note: The content will still need to be reviewed. If anything is considered insecure, it will not be permitted.
- Download the linked external file.
- Save the file to the local set of pages. In this case, as it is a JavaScript file, you should save it to the js folder in your web directory. CSS files should be saved to the css folder in the web directory.
- Adjust the link accordingly to point to the local file, for example:
<script src="js/atlas-statuspage-embed/index.min.js"></script>External JavaScript: Injects Content from an External Source
JavaScript that is hosted locally (i.e. saved as a local file on your server) may still attempt to retrieve content from an external site. As content on external sites can be modified without a security review, these types of injections are generally not permitted.
Example of problematic code:
$(document).ready(function () {
$.ajax({
method: 'GET',
url: '<https://api.math.tools/numbers/nod>',
cache: true
})
.done(function (data) {
if (data instanceof Object && data.contents) {
var nodContentElement = $('<div></div>').addClass('alert alert-success').attr('id', 'alertContent').attr('tabindex', '-1').attr('role', 'alert')
.append($('<div></div>').addClass('alert-heading').html(data.contents.nod.numbers["prime-facts"].prime.description))
.append($('<p></p>').html(data.contents.nod.numbers["prime-facts"].prime.display));
$('#main_content').html(nodContentElement);
}
})
});
To resolve:
The dynamic nature of these injections will not be permitted. Any content being injected will need to be manually maintained.
Unescaped Characters on Dual Auth Portal
This critical issue will trigger if an unescaped @ character is present inside <style> tags for the code used on the Atlas Dual Authentication Portal (Index.cshtml). @ characters used within CSS code in this file must be written as @@ to avoid page failure.
Exceptions
@ characters used in C# expressions (e.g., @Url.Content) do not need to be escaped. These expressions can be written using a single @ character.
Example of problematic code:
<style type="text/css">
@media (max-width: 767.98px) {
p {
color: #08415c;
}
}
</style>To resolve:
Add an additional @ character to the code:
<style type="text/css">
@@media (max-width: 767.98px) {
p {
color: #08415c;
}
}
</style>SessionID Parameter Found in URL
This critical issue will trigger if a hardcoded session ID is found in the code for hyperlink URLs and/or <form> element action attributes. As a general rule, hardcoded session ID data should typically be removed from web page code for security purposes.
Exceptions
Some institutions may have unique web interface setups wherein the hardcoded session ID is necessary for the functionality of the Aeon web pages. If you are unsure whether or not the session ID can be removed from your web page code, please contact Atlas Support at support@atlas-sys.com.
Example of problematic code:
<a href="http://aeon.atlas-sys.com/aeon/
aeon.dll?SessionID=<#PARAM name="SessionID">&Action=10&Form=21">
New Request</a>To resolve:
Remove the code for the session ID:
<a href="http://aeon.atlas-sys.com/aeon/
aeon.dll?Action=10&Form=21">
New Request</a>Product Tags Used on Pages Not Processed by Web DLL (Within <Form> Attribute)
This critical issue will trigger if a product tag such as <#PARAM name="Username"> or <#USER field="Username"> is used on a web page that is not processed by the Web DLL (e.g., Logon.html) within a <form> element attribute. Note that if the product tag is present outside of a <form> element attribute, this will be flagged as a warning rather than a critical issue (see section below).
Example of problematic code:
The code below uses the product tag <#DLL> within the <form> element's action attribute:
<form action="<#DLL>" method="post" name="Logon">To resolve:
Remove the flagged code from the specified web page.
CustomErrors Mode Not Set to "On" or "RemoteOnly"
This critical issue will trigger if a <customErrors> tag is detected in a web.config file that either:
- Does not have a mode attribute set
- Has the mode attribute set to a value other than "On" or "RemoteOnly"
When this tag is used, the mode attribute must be explicitly set to "On" or "RemoteOnly" for security purposes.
Example of problematic code:
The <customErrors> tag in the code sample below has a mode attribute set to "Off," which is not an acceptable value:
<customErrors mode="Off"/>To resolve:
Please contact Atlas Support at support@atlas-sys.com for assistance making the necessary modifications to your web.config file(s).
Warnings
Issues flagged as warnings are those that may cause unintended display or usability issues for users, or those that reduce the accessibility of your web pages. Though it is not required to correct these issues before your pages can be pushed into production, it is strongly recommended that flagged warnings are resolved in order to provide the best browsing experience for your users and to avoid accessibility issues in your web pages.
Product Tags Used on Pages Not Processed by Web DLL (Outside of <Form> Attribute) | EAD FormDataFields | Images Require ALT Attribute for WCAG Compliance | Missing Required Attribute | Invalid Target Attribute | Form Field Does Not Have an Accessible Label Associated With It | ClientUpdates Found
Product Tags Used on Pages Not Processed by Web DLL (Outside of <Form> Attribute)
This warning will appear if a product tag such as <#PARAM name="Username"> or <#USER field="Username"> is used on a web page that is not processed by the Web DLL (e.g., Logon.html) outside of a <form> element attribute. Note that if the product tag is present within a <form> element attribute, this will be flagged as a critical issue rather than a warning (see section above).
To resolve:
Remove the flagged code from the specified web page.
EAD FormDataFields
Fields on the EADRequest.html page are required to contain:
- An id attribute containing the name of the field
- A name attribute containing either "FormDataField" or "RequestMode" (if the field is contained within a photoduplication toggle element)
This warning will trigger if either of these requirements is not met for fields on the EADRequest.html form.
Note that fields on the EditEADRequest.html page do not need to have a FormDataField/RequestMode name attribute.
Example of problematic code:
<div class="form-group col-md-8">
<label for="ResearcherTags">
Researcher Tags
</label>
<input type="text" class="form-control" name="ResearcherTags"
id="ResearcherTags" value="<#PARAM name='ResearcherTags'>">
<div class="small-notes">Enter a comma-separated list of the
tags you want associated with this request.</div>
</div>
To resolve:
Change the name attribute to the proper value for EADRequest.html fields:
<div class="form-group col-md-8">
<label for="ResearcherTags">
Researcher Tags
</label>
<input type="text" class="form-control" name="FormDataField"
id="ResearcherTags" value="<#PARAM name='ResearcherTags'>">
<div class="small-notes">Enter a comma-separated list of the
tags you want associated with this request.</div>
</div>
Images Require ALT Attribute for WCAG Compliance
All images used on your web pages must include an ALT attribute describing the content of the image in order to meet the Web Content Accessibility Guidelines (WCAG) compliance requirements. This warning will appear for all images missing this attribute.
Example of problematic code:
<img src="css/images/Aeon_96.png" class="img-fluid">
To resolve:
Add an alt attribute describing the image to the <img> element, for example:
<img src="css/images/Aeon_96.png" alt="Aeon logo" class="img-fluid">
Missing Required Attribute
This warning will trigger if any fields marked as required with the <span class=“req”> element are missing the required or aria-required="true" attribute on the <select>, <textinput>, or <input> element for the field.
Example of problematic code:
<div class="form-group col-md-8">
<label for="ItemTitle">
<span class="<#ERROR name='ERRORItemTitle'>">
Title
</span>
<span class="req">(required)</span>
</label>
<textarea class="form-control" name="ItemTitle" id="ItemTitle"
rows="2" cols="40" ><#PARAM name="ItemTitle"></textarea>
</div>
To resolve:
Add either the required or aria-required="true" attribute to the field's the <select>, <textinput>, or <input> element:
<div class="form-group col-md-8">
<label for="ItemTitle">
<span class="<#ERROR name='ERRORItemTitle'>">
Title
</span>
<span class="req">(required)</span>
</label>
<textarea class="form-control" name="ItemTitle" id="ItemTitle"
rows="2" cols="40" required><#PARAM name="ItemTitle"></textarea>
</div>
Invalid Target Attribute
This warning will trigger if an element referenced by an aria-labelledby, aria-describedby, or a <label> element's for attribute cannot be found. The value contained in these attributes must match a value in an id attribute of another element that exists on the page.
Possible causes for this issue include:
- A typo in the aria-labelledby, aria-describedby, or for attribute value or a typo in the corresponding element's id value preventing the two values from matching
- The element referenced in the aria-labelledby, aria-describedby, or for attribute is missing on the page (i.e., there is no corresponding element with that id value)
Example of problematic code
<div class="form-group col-md-8">
<label for="Notes">
<span class="<#ERROR name='ERRORNotes'>">
My Notes
</span>
</label>
<textarea class="form-control" name="Notes" id="Notes" rows="2" cols="40"
aria-describedby="notesNotes"><#PARAM name="Notes"></textarea>
<div class="small-notes" id="notesNotess">Enter any notes about this request
for your personal reference.</div>
</div>To resolve:
Ensure that the value of the id attribute matches the value in the corresponding aria-labelledby, aria-describedby, or for attribute:
<div class="form-group col-md-8">
<label for="Notes">
<span class="<#ERROR name='ERRORNotes'>">
My Notes
</span>
</label>
<textarea class="form-control" name="Notes" id="Notes" rows="2" cols="40"
aria-describedby="notesNotes"><#PARAM name="Notes"></textarea>
<div class="small-notes" id="notesNotes">Enter any notes about this request
for your personal reference.</div>
</div>Form Field Does Not Have an Accessible Label Associated With It
This warning will trigger if a form field does not have an accessible label. Form fields should have a <label> element with a for attribute containing a value that matches the id attribute value of the associated input for the field (i.e., the field's <select>, <textarea>, or <input> element). If a for attribute is not used on the <label> element, then the <label> element must surround the entire input.
Possible causes for this issue include:
- The <label> element for the field is completely missing or is missing the for attribute
- The <label> element's for attribute value does not match the input's id attribute value
Example of problematic code
<div class="form-group col-md-8">
<label for="ItemAuthors">
<span class="<#ERROR name='ERRORItemAuthor'>">
Author/Creator
</span>
</label>
<input type="text" class="form-control" name="ItemAuthor" id="ItemAuthor"
value="<#PARAM name='ItemAuthor'>">
</div>To resolve:
Ensure that the value of the id attribute for the field's input matches the value in the corresponding <label> element's for attribute:
<div class="form-group col-md-8">
<label for="ItemAuthor">
<span class="<#ERROR name='ERRORItemAuthor'>">
Author/Creator
</span>
</label>
<input type="text" class="form-control" name="ItemAuthor" id="ItemAuthor"
value="<#PARAM name='ItemAuthor'>">
</div>ClientUpdates Found
This warning will trigger if a ClientUpdates.xml file is found in the Aeon GitHub repository. If this file is present in the GitHub repository, it will interfere with the update process for the Aeon Desktop Client application.
The automated code review report will flag the file path(s) in which the ClientUpdates.xml file has been found, for example:
- Aeon\AeonUpdates\ClientUpdates.xml
- RemoteAuth\AeonUpdates\ClientUpdates.xml
To resolve:
Navigate to each of the flagged file path(s) in GitHub and delete both the ClientUpdates.xml file and its parent AeonUpdates folder from the GitHub repository.
Suggestions
Suggestions are issues that may not be visible to users but could cause problems or contain invalid syntax. Though less urgent than warnings, it is recommended that these issues are resolved at the earliest convenience.
Elements Require Unique IDs | Mismatched Tags | Redundant TabIndexes | Missing HREF | Elements Containing More Than One Class Attribute
Elements Require Unique IDs
Any id attributes added to HTML elements on a web page must be unique. This suggestion will appear if two elements are using id attributes containing the same value.
Example of problematic code:
<div class="container" id="one">
<main id="content" aria-label="Content">
<div class="mt-5 mb-3" id="one">Aeon is special collections circulation
and workflow automation software for special collections libraries
designed by special collections librarians.</div>To resolve:
Change one of the duplicate id values to a unique value, for example:
<div class="container" id="one">
<main id="content" aria-label="Content">
<div class="mt-5 mb-3" id="two">Aeon is special collections circulation
and workflow automation software for special collections libraries
designed by special collections librarians.</div>
Mismatched Tags
The mismatched tags suggestion will appear if a tag such as <p> or <div> was opened but not properly closed with a closing tag (e.g., </p>). Note that some tags (e.g., <br>) do not require a corresponding closing tag.
Example of problematic code:
<div class="container">
<div class="mt-5 mb-3">Aeon is special collections circulation and
workflow automation software for special collections libraries
designed by special collections librarians.</div>
<div class="mt-3 mb-5">Aeon improves customer service and staff
efficiency while providing unparalleled item tracking,
security, and statistics.
<#INCLUDE filename="include_footer.html">
</div>To resolve:
Add this missing closing tag where appropriate:
<div class="container">
<div class="mt-5 mb-3">Aeon is special collections circulation and
workflow automation software for special collections libraries
designed by special collections librarians.</div>
<div class="mt-3 mb-5">Aeon improves customer service and staff
efficiency while providing unparalleled item tracking,
security, and statistics.</div>
<#INCLUDE filename="include_footer.html">
</div>
Redundant TabIndexes
The redundant tabindexes suggestion will appear if the tabindex attribute on an HTML element has been set to a number higher than zero as this may cause unexpected tab navigation for the user.
Example of problematic code:
<div tabindex="3">Text with a tab index of 3.</div>
To resolve:
Change the value of the tabindex attribute to 0:
<div tabindex="0">Text with a tab index of 0.</div>
Missing HREF
The missing HREF suggestion will appear if an href attribute has been added to an anchor element but is missing a value. This attribute should point either to an external link or internal destination within your web pages.
Example of problematic code:
<a target="_blank" href=" "
rel="noopener noreferrer">Atlas Systems Website</a>
To resolve:
Add the destination for the link to the attribute:
<a target="_blank" href="https://www.atlas-sys.com/"
rel="noopener noreferrer">Atlas Systems Website</a>
Elements Containing More Than One Class Attribute
This suggestion will appear if multiple class attributes have been added to an element on the web page.
Example of problematic code:
<p class="class1" class="class2">Aeon is the best!</p>
To resolve:
Multiple classes can be added to an element using a single class attribute:
<p class="class1 class2">Aeon is the best!</p>
Manual Review
Manual review is for code that couldn't be automatically checked and must be reviewed by Atlas staff to ensure that there are no security issues. Manual review will be required for any additional JavaScript files or inline JavaScript added to your web pages.
JavaScript File | Inline JavaScript
JavaScript File
Any additional files added to the js folder in your web directory will be reviewed for potential issues.
To resolve:
Atlas staff will manually review the file and communicate any potential issues with you.
Inline JavaScript
Any inline JavaScript added directly to a web page using <script> tags will be reviewed for potential issues.
Example of inline JavaScript:
<script>alert("Hello");</script>
To resolve:
Atlas staff will manually review the file and communicate any potential issues with you.
Approved Warnings
Approved warnings are for code that has potential security risks but has been pre-approved via a waiver signed by your institution's local IT representative to indicate that they acknowledge the risk and understand that any breach caused by this risk falls outside of Atlas Systems PCI policies and will not be the responsibility of Atlas Systems. Approved warnings will be flagged each time an automated code review is performed as a reminder that these risks have been waived, but will not need to be resolved for your web page changes to be pushed into production.
External JavaScript/External CSS
The External JavaScript/External CSS flags will be triggered if your web pages contain links to approved external JavaScript or CSS files or if they contain approved JavaScript that retrieves content from an external source.
Example of external JavaScript:
<script src="https://unpkg.com/material-components-web@latest/dist
/material-components-web.min.js"></script>
To resolve:
As these risks have been pre-approved by a signed waiver, no resolution is necessary.