--- title: "Web application" canonical: "https://docs.cuesystem.com/space/CVCHELP/512983411/Web%20application" format: markdown --- > Macro (toc) --- The web application system allows you to integrate web pages (HTML, CSS, js, png, jpg, gif files) into the XPL application and communicate between the XPL application and web pages by AJAX. These web pages are available from the device's web interface.    # DeleteHTTPHeaderField  This function deletes the HTTP header field for specified files from the webstorage folder. The function deletes only the HTTP header field added by the function SetHTTPHeaderField.   #### Syntax  ```visualbasic Function DeleteHTTPHeaderField(filename As Text, fieldname As Text) As Boolean ``` #### Parameters  filename  [Text](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Text) It is a file name from the webstorage folder.  fieldname  [Text](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Text) It is an HTTP field name that will be deleted   #### Return value  [Boolean](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Boolean) It is True on success or False if an error occurs.   The function GetLastError returns the error number that occurred while executing the command. The errors that can happen: [346](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/510525445/Command+errors#346).  #### Example  DeleteHTTPHeaderField("/app/index.html", "Access-Control-Allow-Origin")   # GetUserNameForAJAXRequest This function returns the name of the logged-in user who generates the AJAX request. > ℹ️ This function is available since firmware 21.70 #### Syntax  ```visualbasic Function GetUserNameForAJAXRequest(messageid As Long, ByRef username As Text) As Boolean ``` #### Parameters  messageid  [Long](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Long) It is the identification of the request. username [Text](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Text) It is the username for the messageid #### Return value  [Boolean](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Boolean) It is True on success or False if an error occurs. If the unit has access to AdminWeb without a password, the username will be returned empty. The function GetLastError returns the error number that occurred while executing the command. # LinkWebAppFilestorageToFolder  Files which are stored in /filestorage/ are not accessible for web browser by default, this function allows you to enable access to them. This function allows you to add these files (HTML, CSS, js, png, jpg files) stored in any subfolder tree of /filestorage/ folder into the device’s web interface. Then are these files accessible by URL **/appfilestorage/** and you can create WebApp which can integrate web pages from the XPL application with web pages stored in any subfolder of /filestorage/ folder.  > ℹ️ This function is available since firmware 20.00 #### Syntax  ```visualbasic Function LinkWebAppFilestorageToFolder (subfolderpath As Text) As Boolean ``` #### Parameters  subfolderpath  [Text](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Text) It is the URL of the request without HTTP and domain name prefix. Parameter subfolderpath **must **start** **with **/filestorage/ **and **cannot **contain **/../ **otherwise function does not create folder mapping and returns False  #### Return value  [Boolean](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Boolean) It is True on success or False if an error occurs.   The function GetLastError returns the error number that occurred while executing the command.  #### Example  // All files and subfolders from folder /filestorage/myfolderwithwebpages will be accessible by web browser by URL prefix **/appfilestorage/**.  LinkWebAppFilestorageToFolder ("/filestorage/myfolderwithwebpages")  # ReceiveAJAXRequest  This function receives AJAX requests from web pages. The maximum length of received data in the request is 100000 bytes. If longer data is sent from a web browser by Javascript only the first 100000 bytes are received.   #### Syntax  ```visualbasic Function ReceiveAJAXRequest( ByRef messageId As Long, ByRef URL As Text, ByRef request As ByteString) As Boolean ``` #### Parameters  messageId  [Long](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Long) It is the identification of the request. This identification must be used in the command SendAnswerToAJAXRequest  URL  [Text](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Text) It is the URL of the request without HTTP and domain name prefix. (for example "/ajax/getdata.aspx")   request  [ByteString](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#ByteString) It is the request body. The request contains data in UTF8.   #### Return value  [Boolean](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Boolean) It is True on success or False if an error occurs.   The function GetLastError returns the error number that occurred while executing the command.  # SendAnswerToAJAXRequest  This function sends the answer to the AJAX request. The maximum length of sent data is 92160 bytes. If longer data is sent from XPL to the web browser only the first 92160 bytes are sent.   #### Syntax  ```visualbasic Function SendAnswerToAJAXRequest(messageId As Long, answer As ByteString) ``` #### Parameters  messageId  [Long](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Long) It is the identification of the request.   answer  [ByteString](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#ByteString) It is an answer to the AJAX request.   #### Example* * ```visualbasic Private Process AjaxProcess()  Var msgid As Long  Var url As Text[200]  Var ajaxbytestringbuffer As ByteString[3000]  Do While True  If ReceiveAJAXRequest(msgid,url,ajaxbytestringbuffer) Then  DebugPrint(url)  DebugPrintFormat("Request:{s}",ajaxbytestringbuffer)  Select url  Case "/ajax/getdata.aspx"  // some reaction on the request   // and some answer  ajaxbytestringbuffer := &S"asnwer 1"  Case "/ajax/setdata.aspx"  // different reaction on the request   // and some answer  ajaxbytestringbuffer := &S"asnwer 2"  Case Else   ajaxbytestringbuffer := &S"error asnwer"  End Select  SendAnswerToAJAXRequest(msgid,ajaxbytestringbuffer)   End If  End Do  End Process ``` # SetAutoLoginForAJAXRequest This function enables or diasables automatic logon for AJAX request if there are no users without passwords in the unit. > ℹ️ This function is available since firmware 21.70 #### Syntax  ```visualbasic Function SetAutoLoginForAJAXRequest(enable As Boolean, Optional onlyfromlocalhost As Boolean := True) ``` #### Parameters  enable [Boolean](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Boolean) Enables or disables automatic logon for AJAX requests if there are no users without passwords in the unit. onlyfromlocalhost [Boolean](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Boolean) If True, automatic logon for AJAX request is enabled only for request from web browser running in the unit otherwise for AJAX request from any web browser. # SetCORSForAJAXRequest This function enabled CORS for AJAX request from pages from specified domain. > ℹ️ This function is available since firmware 21.70 #### Syntax  ```visualbasic Function SetCORSForAJAXRequest(origin as Text, Optional onlyfromlocalhost As Boolean := True) As Boolean ``` #### Parameters  origin [Text](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Text) It is a domain from which is CORS enabled. For example  "[https://google.com](https://google.com)". If you want to enable CORS from any domain set origin to value "*" onlyfromlocalhost [Boolean](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Boolean) If True, only CORS requests from a web browser running in the unit are allowed otherwise for AJAX request from any web browser. #### Return value  [Boolean](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Boolean) It is True on success or False if an error occurs.   # SetCSRFProtectionForAJAXRequest  This function enables or disables CSRF protection for AJAX HTTP POST requests for web pages in the web application. If the application is started CSRF protection is disabled because of backward compatibility. If you want to enable CSRF protection for AJAX requests is necessary to make some changes in Javascript.   #### Syntax  ```visualbasic Function SetCSRFProtectionForAJAXRequest (enable As Boolean) ``` #### Parameters* * enable  [Boolean](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Boolean) It enables or disables CSRF protection for AJAX HTTP POST requests for web pages in the web application.   What is necessary to do in Javascript:  - Add function MygetCookieValue to your Javascript source code ```javascript function MygetCookieValue(cname)   {      var name = cname + "=";      var decodedCookie = decodeURIComponent(document.cookie);      var ca = decodedCookie.split(';');      for (var i = 0; i < ca.length; i++) {          var c = ca[i];          while (c.charAt(0) == ' ') {              c = c.substring(1);          }          if (c.indexOf(name) == 0) {              return c.substring(name.length, c.length);          }    }    return "";  } ``` - Add calling function MygetCookie after XMLHttpRequest.open and before XMLHttpRequest.send ```javascript var newrequest = new XMLHttpRequest();  newrequest.open("POST", "/ajax/…", true);  /////////////////// following part of source code must be added.  var cookievalue = MygetCookieValue('XSRF-TOKEN');  if (cookievalue !== "")  {   newrequest.setRequestHeader("X-XSRF-TOKEN", cookievalue);  }  ////////////////// end of added part  newrequest.send(…); ``` # SetHTTPHeaderField  This function sets the HTTP header field for specified files from the webstorage folder (URLs starting **/app/**) to the specified value. This function has been enhanced since firmware 15.00 to control HTTP header fields for URLs starting **/ajax/**.  This function has been enhanced since firmware 15.01 to control HTTP header fields for URLs starting **/appfilestorage/**.  The maximum number of specified HTTP header fields for an application is 100.  #### Syntax  ```visualbasic Function SetHTTPHeaderField( filename As Text, fieldname As Text, fieldvalue As Text) As Boolean ``` #### Parameters  filename  [Text](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Text) It is a file name from a webstorage folder, **URLs starting /app/**  Since firmware 15.00 it is also possible to specify URLs starting **/ajax/**  to specify any entire subdirectory within the URL **/ajax/.** If the field name ends with /, it means that the command applies to all files in this directory and all subdirectories. Since firmware 15.01 it is also possible   to specify URLs starting **/appfilestorage/**  to specify any entire subdirectory within the URL **/appfilestorage/.** If the field name ends with /, it means that the command applies to all files in this directory and all subdirectories.  fieldname  [Text](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Text) It is an HTTP field name that will be set.  fieldvalue  [Text](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Text) It is a new value for a specified file and specified HTTP header field   #### Return value  [Boolean](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Boolean) It is True on success or False if an error occurs.   The function GetLastError returns the error number that occurred while executing the command. The errors that can happen: [346](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/510525445/Command+errors#346), [347](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/510525445/Command+errors#347), [348](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/510525445/Command+errors#348), [349](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/510525445/Command+errors#349).  #### Example  - Firmwares 13.00 - 14.xx - support only URLs starting /app/ and it is necessary to specify the entire URL // Add HTTP header field **Access-Control-Allow-Origin: * **for URL **/app/index.html**  SetHTTPHeaderField("/app/index.html", "Access-Control-Allow-Origin","*")   - Firmware 15.00 and newer - support URLs starting **/ajax/** // Add HTTP header field **Access-Control-Allow-Origin: * **for URL** /ajax/anyfile.aspx**  SetHTTPHeaderField("/ajax/anyfile.aspx", "Access-Control-Allow-Origin","*")   // Add HTTP header field **Content-Type: application/json **for URL** /ajax/anyfile.aspx**  SetHTTPHeaderField("/ajax/anyfile.aspx", "Content-Type","application/json")   - Firmware 15.01 and newer - support URLs starting **/appfilestorage/** // Add HTTP header field **content-type: application/json **for URL** /appfilestorage/anydata.json**  SetHTTPHeaderField("/appfilestorage/anydata.json ", "content-type","application/json")   - Firmware 15.00 and newer – you can specify any entire subdirectory within the URL **/ajax/.** If the field name ends with /, it means that the command applies to all files in this directory and subdirectories. // Add HTTP header field **Access-Control-Allow-Origin: * **for all URLs starting **/ajax/**  SetHTTPHeaderField("/ajax/ ", "Access-Control-Allow-Origin","*")   // Add HTTP header field **Content-Type: application/json **for all URLs starting **/ajax/folderA/**  SetHTTPHeaderField("/ajax/folderA/", "Content-Type","application/json")   // Add HTTP header field **Content-Type: application/xml **for all URLs starting **/ajax/folderB/**  SetHTTPHeaderField("/ajax/folderB/", "Content-Type","application/xml")   - Firmware 15.01 and newer – you can specify any entire subdirectory within the URL **/appfilestorage/.** If the field name ends with /, it means that the command applies to all files in this directory and subdirectories. // Add HTTP header field **content-type: application/json **for all URLs starting** /appfilestorage/**  SetHTTPHeaderField("/appfilestorage/ ", "content-type","application/json")   # SetWebAppAngularURLRewriteRules  *This function enables or disables Angular URL rewrite rules in the unit’s web server for web pages in web application.  * #### Syntax  ```visualbasic Function SetWebAppAngularURLRewriteRules(enable As Boolean) As Boolean ``` #### Parameters  enable  [Boolean](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Boolean) It is enable or disables Angular URL rewrite rules in the unit’s web server for web pages in the web application.   #### Return value  [Boolean](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Boolean) It is True.   # SetWebAppButton  *This function sets text and logo which is shown on the web application button.  * #### Syntax  ```visualbasic Function SetWebAppButton ( appname As Text, applogofilename As Text) As Boolean ``` #### Parameters  appname  [Text](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Text) It is the name of the Web application which is shown on the web button.   applogofilename  [Text](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Text) It is the path to a picture in Web storage with a logo. The path must be from the Web storage folder which means that it must start with "**/app/**". The recommended picture format is PNG. The picture should be square and recommended size is 64x64 pixels or larger.   #### Return value  [Boolean](https://cue.atlassian.net/wiki/spaces/CVCHELP/pages/495058958/Data+types#Boolean) It is True on success or False if an error occurs.   The function GetLastError returns the error number that occurred while executing the command.  #### Example  SetWebAppButton("Example App","**/app/**buttonlogo.png")  ![image](media://1704bd24-3dea-41d6-9bf6-e425034ff7db) ![image](media://f403c551-2cad-4d1d-8752-e1e88640d4a4) # UnlinkWebAppFilestorage  This function is opposite to the function LinkWebAppFilestorageToFolder and one disables access to web files from URL starting with **/appfilestorage/** for the device’s web interface.   > ℹ️ This function is available since firmware 20.00 #### Syntax  ```visualbasic Function UnlinkWebAppFilestorage() ``` # Login mechanism It depends on how many users are in Configuration/Users in the unit. And also, whether the users have set passwords or not  1. only administrator without password - it is the default state after the factory default - no login page is shown - web browser has access to all AdmnWeb pages and all Web Application pages 2. only administrator with password - login page is shown - a web browser has access to all AdminWeb pages and all Web Application pages after successful login 3. administrator with a password and there is one or more users without a password - If the web browser’s URL is /app/ then log in is done automatically and a web browser has access to all Web Application pages. Access to Admin Web pages is forbidden. - If web browser’s URL is not /app/ then login page is shown. There are all users in the combo box. - If you log in as the administrator, then a web browser has access to all AdminWeb pages and all Web Application pages - If you log in as a user, then a web browser has access to only all Web Application pages 4. administrator with a password and there are one or more users and all with a password - If web browser’s URL is /app/ then web browser shows login page. There are all users except for the administrator in the combo box. After success log in the web browser has access to all Web Application pages. Access to Admin Web pages is forbidden. - If web browser’s URL is not /app/ then login page is shown. There are all users in the combo box. - If you log in as administrator, then a web browser has access to all AdminWeb pages and all Web Application pages - If you log in as a user, then a web browser has access to only all Web Application pages # Logout mechanism Firmware 15.00 and later. There are two ways how to logout user  - Go to page **/userlogout.HTML **web browser.** **Logout** **is done** **automatically and the login page is shown. There are all users except for the administrator in the combo box. - This way could be integrated into Web Application pages as a link to /userlogout.html page. - If you want to show the login page with all users add query parameter loginurl into URL and parameter value se to /login.html.   **/userlogout.html?loginurl=/login.html** - Go to page **/menu.html** and press the button Logout. Older firmware  - Go to page **/menu.html** and press the button Logout