- Extension ID
- What's new?
- Description
- Files analyzed
- Technology support notes
- Function Point, Quality and Sizing support
- AIP Core compatibility
- Supported DBMS servers
- Prerequisites
- Download and installation instructions
- Packaging, delivering and analyzing your source code
- What results can you expect?
- Structural Rules
- Known Limitations
Summary: This document provides basic information about the extension providing HTML5/JavaScript support for Web applications.
Extension ID
com.castsoftware.html5
What's new?
Please see the following pages for information about new features/changes, fixed bugs, changes that will impact results etc.:
Description
In what situation should you install this extension?
The analyzer could be used if your application is a Web Application, has HTML/Javascript/CSS files and/or contains HTML/Javascript fragments embedded into JEE and .NET files (for example). The analyzer provides the following features:
- Automated Function Point counting.
- Checksum, number of code lines, number of comment lines, comments are present.
- Local and global resolution is done when function is called directly through its name (inference engine resolution is not available).
- For global resolution, caller is searched in all .js files. If only one callee is found, a link is created. If several callees are found, the analyzer watches inclusions in html files to see if it can filter the callee. If nothing is found in html files to filter, links are created to all possible callees.
Files analyzed
Icon(s) | File | Extension | Note |
---|---|---|---|
HTML | *.html, *.htm, *.xhtml, *.ftl; *.ftlh; *.vm, *.ngt, *.vt, *.vtl |
Note:
| |
Javascript | *.js, *.jsx, *.mjs, *.jsm, *.cjs | Supports:
See also JavaScript below for more information. Note:
| |
Cascading Style Sheet | *.css and *.scss (*.scss is supported from 2.0.17-funcrel) *.less','*.sass', '*.styl', '*.stylus', '*.cssm', '*.pcss', '*.postcss | Supports CSS 1 - 3.
| |
Java Server Page | *.jsp, *.jspx, *.jsf, *.jsff, *.jspf, *.tag, *.tags, *.tagf, *.tagx | Supports JSP 1.1 - 2.3. See JSP below for more information. Note that:
They will be analyzed as .jsp files. | |
Active Server Page | *.asp, *.aspx | See (Classic) ASP below for more information. | |
HTML Components | *.htc | HTC files contain html, javascript fragments that will be parsed. Created objects will be linked to the HTC file. | |
ASP.NET MVC Razor | *.cshtml | See ASP.NET MVC Razor below for more information. | |
IBM EAD4J Jade | *.jade | Files related to the IBM EAD4J Jade framework. | |
Pug | *.pug | Pug files. | |
- | YAML (YAML Ain't Markup Language) | *.yml, *.yaml, | Files related to the YAML language, handled by the Node.js extension. |
- | Vue.JS | *.vue | Files related to the Vue.js JavaScript language, handled by the Node.js and Vue.js extensions. |
- | Properties | *.properties | -- |
- | Template | *.template | Files related to serverless.template, handled by the Node.js extension. |
- | Handlebars | *.hbs, *.handlebars | Files related to Handlebars.js. See Specific case of handlebars file below. |
Note that you may find that the number of files delivered is more than then number of files reported after analysis. This is due to the following:
- by default some files are automatically excluded from the analysis, typically third-party frameworks which are not required. Please see the filters.json file located at the root of the extension folder for a complete list of default exclusions.
- some bundled javascript files are automatically excluded from the analysis, typically minified files (extension.min.js) or disguised minified files (extension.js), but for files containing one or a few very long lines, a specific calculation is actioned by the analyzer).
- some files that have been included in the analysis may not be saved in the CAST Analysis Service schema because they do not contain any useful information, i.e. they do not contain any technical sections such as functions which would lead to the creation of a specific object.
Since version 2.1.14-funcrel, files which are excluded from analysis are considered as external libraries when they are included by analyzed code. For each file, a "HTML5 JavaScript Source Code" is created with the external property set to "True". This means that these files are not included in rule checks or other computations.
Technology support notes
(Classic) ASP
ASP.NET MVC Razor
JavaScript
JSP
Transaction configuration information
HTML5 source code: it represents the whole HTML file content.
- Function Points (transactions): a green tick indicates that OMG Function Point counting and Transaction Risk Index are supported
- Quality and Sizing: a green tick indicates that CAST can measure size and that a minimum set of Quality Rules exist
Function Points (transactions) | Quality and Sizing |
---|---|
AIP Core compatibility | Supported |
---|---|
8.3.x |
Supported DBMS servers
DBMS | Supported? |
---|---|
CSS / PostgreSQL |
Prerequisites
An installation of any compatible release of AIP Core (see table above) |
Download and installation instructions
The extension will be automatically downloaded and installed in CAST Console. You can manage the extension using the Application - Extensions interface:
Packaging, delivering and analyzing your source code
Once the extension is downloaded and installed, you can now package your source code and run an analysis. The process of packaging, delivering and analyzing your source code is described below:
What results can you expect?
Once the analysis/snapshot generation has completed, you can view the results in the normal manner:
CAST Enlighten
Javascript ECMA6 Classes and Constructors example
Web Service calls in javascript code
The following libraries are supported for Web Service HTTP calls:
- XMLHttpRequest
- window.open
- document.submit
- location.href
- Ext.Updater (Sencha)
- EventSource
- fetch
- axios
- superagent
- aws-amplify
- falcor
- WLResourceRequest
- WebSocket
Once the HTML5 extension analysis is finished, the analyzer will output the final number of web service calls created.
When urls could not be correctly evaluated, a HTTP call named "{}" will be created, except for:
- window.open
- window.location.href,
- document.location.href
These exceptions are due to very large number of statements, and they are not explicit calls as "ajax", "get", "post", "delete"... functions.
XMLHttpRequest
var xhttp = new XMLHttpRequest(); xhttp.open("GET", "ajax_info.txt", false); xhttp.send();
window.open
url = "EditStandaloneWeb.do?url_name_id="+urlNameId; popUpWindow = window.open(url,'popUpWindow','height=900,width=900,left=300,top=50,resizable=no,directories=no,status=no');
document.submit
addUpload.document.forms[1].action = "ciedit"; addUpload.document.forms[1].submit();
$("form[id='configurarClassificacaoProdutoForm']").action = '<s:url action="configurarClassificacaoProduto" method="excluir"/>'; $("form[id='configurarClassificacaoProdutoForm']").submit();
$form.prop('method', 'post'); $form.prop('action', '<c:out value="/toto" />'); $form.submit();
location.href
url = "//localization.att.com/loc/controller"; window.location.href = url;
url = "//localization.att.com/loc/controller"; document.location.href=url;
Ext.Updater (Sencha)
Ext.get(panelId).getUpdater().update({ url:'actionUrl', params:params, method:'POST', failure: function(inResp) {} });
EventSource
const eventsUrl = '/api/dashboard/events?token=' + localStorage.getItem('dashboard_token'); const serverEvents = new EventSource(eventsUrl);
fetch
fetch('/users', { method: 'POST', body: new FormData(form) });
axios
axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
var http = require('axios'); http.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
axios.request({ url : '/user', method : 'delete' });
axios('/user/12345');
axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } });
var instance = axios.create({ baseURL: 'https://api.example.com' }); instance.get('/longRequest', { timeout: 5000 });
superagent
request .post('/api/pet') .send({ name: 'Manny', species: 'cat' }) .set('X-API-Key', 'foobar') .set('Accept', 'application/json') .end(function(err, res){ // Calling the end function will send the request });
var myrequest = require('superagent'); myrequest .get('/some-url') .use(prefix) // Prefixes *only* this request .use(nocache) // Prevents caching of *only* this request .end(function(err, res){ // Do something });
request .head('/users') .query({ email: 'joe@smith.com' }) .end(function(err, res){ });
request('GET', '/users') .end(function(err, res){ });
request('/search', (err, res) => { });
aws-amplify
import {API} from 'aws-amplify'; API.get('ReactSample','/items/orders/' + sessionStorage.getItem('latestOrder')).then(response => {});
falcor
var falcor = require('falcor'); var model = new falcor.Model({source: new falcor.HttpDataSource('/model.json')}); model .get(["events", "byName", ["Midwest JS"], ['description']]) .then(function(response) { document.getElementById('event-data').innerHTML = JSON.stringify(response, null, 2); }, function(err) { console.log(err); });
WLResourceRequest
var request = new WLResourceRequest('/adapters/sampleAdapter/multiplyNumbers', WLResourceRequest.GET); request.setQueryParameter('params', [5, 6]); request.send().then( function(response) { // success flow, the result can be found in response.responseJSON }, function(error) { // failure flow // the error code and description can be found in error.errorCode and error.errorMsg fields respectively } );
adapterPath = new URI("/adapters/sampleAdapter/multiplyNumbers"); var request = new WLResourceRequest(adapterPath, WLResourceRequest.GET); request.setQueryParameter('params', [5, 6]); request.send().then(function(response) {}, function(error) {});
var request = new WLResourceRequest(URI("/adapters/sampleAdapter/multiplyNumbers"), WLResourceRequest.GET); request.setQueryParameter('params', [5, 6]); request.send().then(function(response) {}, function(error) {});
dojo
var xhrArgs = { url: "dojo/LICENSE_NOT_THERE", handleAs: "text", preventCache: true, handle: function(error, ioargs){ } } var deferred = dojo.xhr("POST", xhrArgs);
var xhrArgs = { url: "dojo/LICENSE_NOT_THERE", handleAs: "text", preventCache: true, handle: function(error, ioargs){ } } var deferred = dojo.xhrGet(xhrArgs); // or dojo.xhrPost, dojo.xhrPut, dojo.xhrDelete
require(["dojo/request"], function(request){ request("my_url").then( function(text){ }, function(error){ } ); });
require(["dojo/request/node"], function(nodeRequest){ nodeRequest("my_url").then( function(text){ console.log("The file's content is: " + text); }, function(error){ console.log("An error occurred: " + error); } ); });
require(["dojo/request"], function(request){ request.get("my_url").then( function(text){ console.log("The file's content is: " + text); }, function(error){ console.log("An error occurred: " + error); } ); }); // or request.post, request.put, request.del
WebSocket
var socket = new WebSocket('ws://game.example.com:12010/updates2');
Web Service calls in html/jsp code
The following libraries are supported for Web Service HTTP calls:
- href
- iframe.src
- form.action
- input.formaction
- datamap
- jsp.forward
- jsp.pager
- struts-html
- struts tags-html
- struts-tags
- struts-nested
- struts jqgrid
- euamtags
- spring
Once the HTML5 extension analysis is finished, the analyzer will output the final number of web service calls created.
href
<a href="@Url.Action("Edit", "MissionMandatoryDocuments", new { type = item.Key, nodeId = Model.NodeId })"> </a>
iframe.src
<iframe src="/greco/ValidationADP.do?hidden=doPerform" height="900" width="1000"></iframe>
form.action
<form action="@Url.Action("Export", "InterimBillsEvaluation")" method="post"> </form>
<form action="<c:out value="${epayCustomer.absoluteBaseWithContextPath}"/>/dlife/payBill.perform" method="GET"> </form>
input.formaction
<input type="submit" value="Save" name="Edit" formaction="@Url.Action("edit")" class="btn btn-default" />
datamap
<div id="map" data-request-url="@Url.Action("GetStops", "Home")" data-request-url2="@Url.Action("Driving", "Home")"> <script> function getStops() { var url = $('#map').data('request-url'); window.open(url) } </script>
jsp.forward
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <jsp:forward page="/dispatcher/mainMenu"/>
jsp.pager
<%@ taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager"%> <html> <pg:pager url="RolePaginationAction.do" items="<%= total_records %>" index="<%= index %>" maxPageItems="<%= maxPageItems %>" maxIndexPages="<%= maxIndexPages %>" isOffset="<%= true %>" export="offset,currentPageNumber=pageNumber" scope="request"> </pg:pager> </html>
struts-html
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %> <%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %> <html:html xhtml="true"> <div align="center"> <html:form action="/submitCustomerForm" method="GET" /> </div> </html:html>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %> <%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %> <html:html xhtml="true"> <div align="center"> <html:link page="/submitCustomerForm" /> </div> </html:html>
struts tags-html
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%> <html:html xhtml="true"> <div align="center"> <html:link action="bookEdit.do?do=borrowBook" paramName="book" paramProperty="id" paramId="id">Borrow book</html:link> </div> </html:html>
struts-tags
<%@taglib prefix="s" uri="/struts-tags"%> <html> <s:url action="banque" method="consulter" var="urlAcceuil"/> <s:a href="%{urlAcceuil}">Retour à l'acceuil</s:a> </html>
<%@taglib prefix="s" uri="/struts-tags"%> <html> <body> <s:a action="compte" /> </body> </html>
<%@taglib prefix="s" uri="/struts-tags"%> <html> <body> <s:form action="compte"> <s:hidden name="contract_nbr" id="contract_nbr" value="%{mod.contract_nbr}"/> </s:form> </body> </html>
struts-nested
<%@ taglib uri="/tags/struts-nested" prefix="nested" %> <html:html xhtml="true"> <div align="center"> <nested:form action="modifyAccount.do" /> </div> </html:html>
struts jqgrid
<%@taglib prefix="sjg" uri="/struts-jquery-grid-tags" %> <html> <sjg:grid id="sjgrid" dataType="json" href="/url" caption="Grid Model" gridModel="gridModel" pager="true" navigator="true"> </sjg:grid> </html>
<%@taglib prefix="sjg" uri="/struts-jquery-grid-tags" %> <html> <sjg:grid id="sjgrid" dataType="json" editurl="/url" caption="Grid Model" gridModel="gridModel" pager="true" navigator="true"> </sjg:grid> </html>
<%@taglib prefix="sjg" uri="/struts-jquery-grid-tags" %> <html> <sjg:grid id="sjgrid" dataType="json" cellurl="/url" caption="Grid Model" gridModel="gridModel" pager="true" navigator="true"> </sjg:grid> </html>
<%@taglib prefix="sjg" uri="/struts-jquery-grid-tags" %> <html> <sjg:gridColumn id="sjgrid" surl="/url"> </sjg:gridColumn> </html>
<%@taglib prefix="sjg" uri="/struts-jquery-grid-tags" %> <html> <sjg:gridColumn id="sjgrid" editoptions="{dataUrl: '/url'}"> </sjg:gridColumn> </html>
euamtags
<%@ taglib uri="WEB-INF/euamtags.tld" prefix="Euam" %> <div align="center"> <Euam:form action="/submitCustomerForm" /> </div>
spring
<%@taglib uri = "http://www.springframework.org/tags/form" prefix = "form"%> <html> <div align="center"> <form:form method="POST" action="/HelloWeb/addStudent" /> </div> </html>
<%@taglib uri = "http://www.springframework.org/tags/form" prefix = "form"%> <html> <div align="center"> <form:form method="POST" commandName="changePassword" action="" /> </div> </html>
Web Service calls in razor code (cshtml)
- Html.BeginForm
- Ajax.BeginForm
- Html.Action
- Html.ActionLinkWithAccess
- Html.ActionLink
- Ajax.ActionLink
- Html.RenderAction
- Url.Action
- Url.RouteUrl
- Kendo
Once the HTML5 extension analysis is finished, the analyzer will output the final number of web service calls created.
Html.BeginForm
@using (Html.BeginForm("Setting", "Peopulse", FormMethod.Post, new { autocomplete = "off", id = "form-peopulseFtpSettings", @class = "block" })) { <input type="submit" name="Submit" /> }
Ajax.BeginForm
@using (Ajax.BeginForm("Setting", "Peopulse", new { //routeValues missionId = Model.Mission.Id, dayId = Model.MissionDayId, method="GET" }, new AjaxOptions { //Ajax setup UpdateTargetId = "synthesisLinesDiv", HttpMethod = "GET", InsertionMode = InsertionMode.Replace, }, new { //htmlAttributes Id = "form-selectSynthesis", //method="get" })) { }
Html.Action
@Html.Action("Delete", "Ctrl", new { id = item.ID })
Html.ActionLinkWithAccess
@Html.ActionLinkWithAccess(__("Add frequency interim summary"), "AddFrenquencyInterimSummary", null, new {@class = "btn popupLink"})
Html.ActionLink
@Html.ActionLink("Save", "SaveAction", "MainController", null, new { @class = "saveButton", onclick = "return false;" })
Ajax.ActionLink
@Ajax.ActionLink("x", "Delete", "NotificationMessenger", new { notific.Id }, new AjaxOptions() { HttpMethod = "POST", OnComplete = "DismissNotification" }, new { @class = "notification-close" })
Html.RenderAction
@Html.RenderAction("Delete", "Ctrl", new { id = item.ID })
Url.Action
@{ Html.RenderPartial("_EmployeesTable", @Url.Action("GetFrenquencyInterimSummary")); }
@using (Html.BeginForm("edit", "Employee", FormMethod.Post)) { <div class="form-horizontal"> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Save" name="Edit" formaction="@Url.Action("edit")" formmethod="post" class="btn btn-default"/> </div> </div> </div> }
@Html.PagedListPager(Model, page => Url.Action("Index", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter}))
Url.RouteUrl
<a href="@(Url.RouteUrl(new{ action="DownloadFile", controller="DPScoreResults", id=Model.QuoteId, scoreRunId=Model.ScoreRunId}))" class="popupLink ico">
Kendo
<div> @(Html.Kendo().Grid<ElementControle>() .Name("gridElementsControle") .DataSource(datasource => datasource.Ajax() .Read(r => r.Action("GetElementsControle", "GestionUnitesTraitement")) ) ) </div>
Specific case of handlebars file
In HTML5/Javascript ≥ 2.1.29, the analyzer supports handlebars files (https://handlebarsjs.com/). This templating can be used in any kind of file type (javascript, HTML, text, or any other type). A detection process is carried out by the HTML5 extension to identify which kind of file represents the file. This is why a specific metamodel type "Handlebars Source Code" is created, and a HTML or Javascript fragment is created under this handlebars source code:
External libraries
In HTML5/Javascript ≥ 2.1.21, the analyzer is capable of finding external libraries using package.json files (dependencies and devDependencies sections). It creates external libraries under a folder named "HTML5 external libraries" directly under the project root. One external library is created for each couple (library name, version), and include links are created from the javascript sources to these libraries. Only called libraries are created. Each library object contains a property for the version. These objects are of the type "HTML5 JavaScript Source Code".
External libraries are also created when code like <script src="http://..../jquery.1.2.3.min.js"> is found in html files. The version is searched in the url (here 1.2.3) and the name is extracted (here jquery).
Contents of "node_modules" folder
In HTML5/Javascript ≥ 2.1.14, the analyzer is capable of scanning the contents of the "node_modules" folder which contains third-party external libraries. For every external item in the "node_modules" which is called by analyzed source code, a corresponding object will be created by the HTML5/JavaScript analyzer and therefore exposed in the analysis results. The items in the "node_modules" folder are not actually analyzed as such and are still ignored via an entry in the filters.json file. This is one part of a project to expose (in analysis results) called external libraries located in the "node_modules" folder.
Note that by default, Console will ignore the "node_modules" folder (except in releases 2.5.x and 2.6.x) due to analysis performance issues. Therefore if you require this behaviour, you must manually remove the exclusion pattern knowing that your analysis times may increase:
Modern onboarding
Legacy onboarding
Objects
The following objects are displayed in CAST Enlighten:
Icon | Description ≤ 2.1.21 | Description ≥ 2.1.22 | |
---|---|---|---|
JavaScript file | JavaScript file | ||
HTML5 Source Code | HTML Source Code | ||
HTML5 Source Code Fragment | HTML Fragment | HTML fragment present inside javascript code | |
HTML5 ASP Content | ASP Content | ||
HTML5 ASPX Content | ASPX Content | ||
HTML5 CSHTML Content | CSHTML Content | ||
HTML5 CSS Source Code | CSS Source Code | ||
HTML5 CSS Source Code Fragment | CSS Source Code Fragment | ||
HTML5 HTC Content | HTC Content | ||
HTML5 JavaScript Source Code | JavaScript Source Code | ||
HTML5 JSX source code | JSX Source Code | ||
HTML5 Jade source code | Jade Source Code | ||
HTML5 Pug source code | Pug Source Code | ||
Handlebars Source Code | |||
HTML5 JavaScript Source Code Fragment | JavaScript Source Code Fragment | ||
HTML Source Code Fragment | HTML fragment inside template files like .hbs files | ||
HTML5 JavaScript Function | JavaScript Function | ||
HTML5 Javascript Method | JavaScript Method | ||
HTML5 Javascript Class | JavaScript Class | ||
HTML5 Javascript Class Constructor | JavaScript Constructor | ||
HTML5 WebSocket service | JavaScript WebSocket Service | ||
HTML5 Get XMLHttpRequest Service HTML5 Get HttpRequest Service HTML5 Razor Get service | XMLHttpRequest Get Service JavaScript HttpRequest Get Service Razor Get Service | ||
HTML5 Update XMLHttpRequest Service HTML5 Update HttpRequest Service | XMLHttpRequest Update Service JavaScript HttpRequest Update Service | ||
HTML5 Post XMLHttpRequest Service HTML5 Post HttpRequest Service HTML5 Razor method call | XMLHttpRequest Post Service JavaScript HttpRequest Post Service Razor Method Call | ||
HTML5 Delete XMLHttpRequest Service HTML5 Delete HttpRequest Service | XMLHttpRequest Delete Service JavaScript HttpRequest Delete Service | ||
HTML5 Applet class reference | Java Applet Class Reference | ||
J2EE HTML5 Applet | Java Applet |
Structural Rules
A global list is also available here: https://technologies.castsoftware.com/rules?sec=t_1020000&ref=||.
Known Limitations
- Creation and detection of object using "prototype" is not supported.
- When HTML5/JavaScript source code is used as the "source" or "destination" in a Reference Pattern (configured in the CAST Management Studio) it will be ignored when the analysis is run - this is due to a limitation in the way the analyzer functions. However, when testing the Reference Pattern using the test option in the CAST Management Studio, the pattern will appear to match.