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.
Invalid jQuery Version | External JavaScript or CSS Files | JavaScript Injects Content from an External Source | External Link Missing NoOpener/NoReferrer
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.
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 | EAD FormDataFields | Images Require ALT Attribute for WCAG Compliance | Missing Required Attribute
Product Tags Used on Pages Not Processed by Web DLL
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).
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>
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.