Why appears a html snippet at some js and css files endings when the client download thems?

Question

Why appears a html snippet at some js and css files endings when the client download thems?

Popincsák, Attila (SmartX) 10

I have an app service in Azure. It is a java based web app which is running on a Tomcat 8.5.
In this weeks started a problem with my webapp. A html snippet appears at some js and css files endings when the client download thems. The snippet which is appended to the endings of my files during the download started with this code below:

<!DOCTYPE html><HTML><HEAD>    <TITLE>Microsoft Azure App Service - Welcome</TITLE>    <SCRIPT type="text/javascript">        function loc() {            const statusCode = 200;            const subCode = 0;            var t, h, p;            if (statusCode == 404)            {                if (subCode == 21)                {                    t = "Web App Failed to Start!";                    h = "Web App Failed to Start!";                    p = `<p>If you are the Administrator of this web app, it is likely an error occured on the application during start up, please take a look at the catalina logs to resolve the issue.                         See <a href="https://learn.microsoft.com/en-us/azure/app-service/troubleshoot-diagnostic-logs">Enable diagnostics logging for apps in Azure App Service</a> for a guide on enabling logging.</p>`;                }                else                {                    t = "404 Page Not Found!";                    h = "404 Page Not Found!";                    p = `<p>If you are the Administrator of this web app, an error may have occured on application start up. See <a href="https://learn.microsoft.com/en-us/azure/app-service/troubleshoot-diagnostic-logs">Enable diagnostics logging for apps in Azure App Service</a> for a guide on enabling logging.</p>`;                }            }            else if (statusCode >= 500)                    {                t = statusCode + " Web App Error!";                h = statusCode + " Web App Error!";                p =`<p>The web app has experienced an unexpected server error. We apologize for the inconvenience. Try to reload the page or visit it again soon.</p>                    <p>If you are the Administrator of this web app, see the <a href="https://go.microsoft.com/fwlink/?linkid=2095006">Azure Service Dashboard</a> for information about the status of Azure Services. Errors may also be found in application logs. See <a href="https://learn.microsoft.com/en-us/azure/app-service/troubleshoot-diagnostic-logs">Enable diagnostics logging for apps in Azure App Service</a> for a gu

You can check the result which cause the problem for me: https://test.giftcard.meta-mtps.hu/js/giftcard-validator.js?1.6.0
https://test.giftcard.meta-mtps.hu/styles/layout.css

And here are two links which is not affected: https://test.giftcard.meta-mtps.hu/js/giftcard.js?1.6.0
https://test.giftcard.meta-mtps.hu/styles/button.css Where should I search the origin of this problem? Earlier this webapp worked without any problem and whe not redeployed it before the snippet appear in my files?

Popincsák, Attila (SmartX) 10 Reputation points

2023-04-17T12:48:25.7533333+00:00

If I set the compression to "off" at the connector tag in the tomcat server.xml, then it works properly. It is a quick and dirty workaround, but I would be happy if anyone could give me a real solution for my problem above.

1 answer

Your answer

Popincsák, Attila (SmartX) 10 Reputation points

2023-04-17T12:48:25.7533333+00:00

If I set the compression to "off" at the connector tag in the tomcat server.xml, then it works properly. It is a quick and dirty workaround, but I would be happy if anyone could give me a real solution for my problem above.

Answer 1

brtrach-MSFT 17,731 Microsoft Employee Moderator

It seems like the issue you are facing is related to the Azure App Service. The HTML snippet that is being appended to the end of your JS and CSS files is actually an error page that is being generated by the Azure App Service. This error page is being appended to the end of your files because the Azure App Service is unable to serve the requested files. The error page that is being generated by the Azure App Service suggests that there might be an issue with the startup of your web app. It is possible that the issue is related to the Tomcat 8.5 server that your web app is running on. To troubleshoot this issue, I would recommend checking the logs for your web app. You can enable diagnostics logging for your app in Azure App Service and then check the logs to see if there are any errors related to the startup of your web app. Here is a link to the Azure documentation that explains how to enable diagnostics logging for your app. Once you have enabled diagnostics logging, you can check the logs to see if there are any errors related to the startup of your web app. If you are unable to find the root cause of the issue, you can contact Azure support for further assistance.

Juan Ponce de Leon 10 Reputation points

2023-04-22T21:02:14.4433333+00:00
Hey brtrach-MSFT: Thanks for explaining why the html snipped appeared in JS or CSS files, it make sense, I also saw them suddenly appearing in the js/css files of my webapps that runs in my Azure App Service Plan. The fact that the Azure returned the html snipped as part of the js files of my app, caused errors while browser tried to interpret the js code.

So correct me if I'm wrong, but looks to me that my App Service Plan got upgraded and the following configuration (compression="on") was recently added to the tomcats where my webapps runs, I ended up implementing a "startup.sh" file to replace config files when the app starts, is there a better way to fix this issue?:

<Connector port="${port.http}" protocol="HTTP/1.1" connectionTimeout="${site.connectionTimeout}" redirectPort="8443" address="${addr.container}" maxThreads="${catalina.maxThreads}" maxConnections="${catalina.maxConnections}" compression="on" URIEncoding="UTF-8" maxHttpHeaderSize="16384"/>
Juan Ponce de Leon 10 Reputation points

2023-04-22T21:04:37.24+00:00

BTW, checking webapps logs didn't help, the application wasn't failing while starting... so looking for a better explanation that helps figureout a long term fix for this issue which to me is caused by Azure automatic upgrades in Azure App Service Plan I'm using...
Juan Ponce de Leon 10 Reputation points

2023-04-22T21:32:57.02+00:00

BTW checking the apps logs as you suggested didn't really help, in my case my webapps were starting without any errors....
Popincsák, Attila (SmartX) 10 Reputation points

2023-05-16T11:52:28.7666667+00:00

I have checked the logs after the starting my application and it is started properly without any error.
brtrach-MSFT 17,731 Reputation points Microsoft Employee Moderator

2023-05-23T02:50:37.6766667+00:00

@Juan Ponce de Leon If checking the web app logs did not help, it is possible that the issue is not related to the startup of your web app. In this case, it is possible that the issue is related to the compression settings in your Tomcat server.xml file, as you mentioned earlier.

It is possible that the compression settings were automatically updated during an Azure App Service Plan upgrade, which caused the HTML snippet to be appended to your JS and CSS files. To prevent this issue from occurring in the future, you can try disabling compression in your Tomcat server.xml file (which you already did) or adjusting the compression settings to ensure that they are configured correctly.

Check if there are any issues with the compression settings in your Tomcat server.xml file. Make sure that the compression settings are configured correctly and that there are no conflicts with other settings.

From your statement, can you please verify if you were using compression before upgrading your App Service Plan? That would help give me context if you ever had compression successfully working on your plan.
Popincsák, Attila (SmartX) 10 Reputation points

2023-05-25T06:45:17.77+00:00

Unfortunately, I can't confirm or deny that I was using compression before upgrading my App Service Plan.

brtrach-MSFT 17,731 Microsoft Employee Moderator

If you want to keep compression enabled for other file types, you can try the following:

Add the following configuration to your server.xml file to exclude JavaScript and CSS files from compression:

<Connector ...>
  ...
  <Compression compression="on" 
               compressionMinSize="2048" 
               noCompressionUserAgents="gozilla, traviata" 
               compressableMimeType="text/html,text/xml,text/plain,application/json" 
               noCompressionMimeType="text/css,text/javascript" />
  ...
</Connector>

This configuration enables compression for all MIME types except for text/css and text/javascript, which are the MIME types for CSS and JavaScript files, respectively.

If the above configuration doesn't work, you can try adding the following configuration to your web.xml file to disable compression for JavaScript and CSS files:

<web-app ...>
  ...
  <filter>
    <filter-name>compressionFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CompressionFilter</filter-class>
    <init-param>
      <param-name>compression</param-name>
      <param-value>on</param-value>
    </init-param>
    <init-param>
      <param-name>compressionMinSize</param-name>
      <param-value>2048</param-value>
    </init-param>
    <init-param>
      <param-name>noCompressionUserAgents</param-name>
      <param-value>gozilla, traviata</param-value>
    </init-param>
    <init-param>
      <param-name>compressableMimeType</param-name>
      <param-value>text/html,text/xml,text/plain,application/json</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>compressionFilter</filter-name>
    <url-pattern>/*</url-pattern>
    <dispatcher>REQUEST</dispatcher>
  </filter-mapping>
  <filter-mapping>
    <filter-name>compressionFilter

Beyond that, you may need to simply play around with compression. Create a secondary app on your app service plan and deploy your site files to it. Play around with different compression settings to see if any of them will work with your app if you prefer to also enable compression for JavaScript and CSS files. Without access to your code, it's going to be difficult to provide exact guidance on what is misconfigured within your compression settings.

Share via

Why appears a html snippet at some js and css files endings when the client download thems?

1 answer

Your answer