Resolving Issues in the Automated Code Review Report

Print Friendly and PDF Follow

Note: The automated code review process is currently in beta testing and is not yet available for all sites. Those without this feature will have code reviews completed manually by Atlas staff following the normal procedure.

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.

To learn more about initiating a code review, see Editing Atlas Hosted Aeon Web Pages in Github. For more information on the automated code review service and navigating the automated report, see Atlas Automated Code Review Service.

Overview

The automated code review report will separate issues into four main categories based on severity: critical issues, warnings, suggestions, and issues that must be manually reviewed by Atlas staff. The complete list of issues that may appear in each category and their suggested resolutions are provided below.

Critical Issues | Warnings | Suggestions | Manual Review


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.

Note: The automated code review scan will only flag outdated core jQuery references. References to the jQuery UI library will need to be manually searched for and updated following the instructions in the documentation linked below.

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.

  1. Download the linked external file. 
  2. 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.
  3. 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:

  1. An id attribute containing the name of the field
  2. 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:

For more information on the difference between the required and aria-required attributes, see Required Field Validation Options for Web Forms.
<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. 

The automated code review report will flag the line number of the tag that is missing a corresponding closing tag, however placing this missing tag in the proper location may be difficult if the code for the web page is extensive. It is recommended to open the code for the web page in a text editing application such as Notepad++ as many of these applications contain built-in tools to ease the process of locating the corresponding closing tag for each element and help identify where one may be missing. 

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.

Note: Empty JavaScript files will not be flagged for review.

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.

Questions?

If this article didn’t resolve your issue, please contact Atlas Support for assistance:

Contact Support