Having issues with Azure and SVG - azure

We are having intermittent issues with SVG rendering after moving our website to Azure Web Sites.
All our svgs appears to load correctly the first time and then on refresh it returns a blank document which then makes chrome give you a error on line 1 at column 1: Encoding error error. If you view source all it shows random characters being returned by the server for example !$. Firefox returns XML Parsing Error: not well-formed
Hard refreshing doesn't work, but leaving it a while will make it work for one time again before it does the same thing again.
I've added in the web.config
<staticContent>
<remove fileExtension=".svg" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>
As suggested by other posts, but no luck.

I fixed this by setting doStaticCompression="false"
<urlCompression doStaticCompression="false" doDynamicCompression="true" />
The above fixed my issue no other settings, but for the sake of completeness, here is the rest of my settings.
I also have
<staticContent>
<remove fileExtension=".svg" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>
And
<httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
<scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
<staticTypes>
<remove mimeType="*/*" />
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="image/svg+xml" enabled="true" />
<add mimeType="application/x-javascript" enabled="true" />
<add mimeType="application/javascript" enabled="true" />
<add mimeType="application/javascript; charset=utf-8" enabled="true" />
<add mimeType="application/octet-stream" enabled="true" />
<add mimeType="*/*" enabled="false" />
</staticTypes>
<dynamicTypes>
<remove mimeType="*/*" />
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="image/svg+xml" enabled="true" />
<add mimeType="application/x-javascript" enabled="true" />
<add mimeType="application/javascript" enabled="true" />
<add mimeType="application/javascript; charset=utf-8" enabled="true" />
<add mimeType="application/octet-stream" enabled="true" />
<add mimeType="*/*" enabled="false" />
</dynamicTypes>
</httpCompression>

Related

Blazor Webassembly Brotli and Gzip compression on IIS

As a Blazor developer I don't think there is a good documentation on this topic.
I have uploaded a very simple Blazor webassembly(v5) website with only 1 page now it takes more than 20 seconds to load in browser. I tried to use compression based on this Microsoft doc and used the web.config file suggested by the document.
I have also installed URL Rewrite module, Microsoft IIS Compression, StaticCompresstionModule and DynamicCopressionModule and tried modifying the web.config's following lines but it did not worked at all :
web.config :
...
<httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
<scheme name="br" dll="%ProgramFiles%\IIS\IIS Compression\iisbrotli.dll" />
<scheme name="gzip" dll="%ProgramFiles%\IIS\IIS Compression\iiszlib.dll" />
....
The result still is not compressed and here is my browser's developer tool screenshot :
This can be a problem for everyone who uses Blazor as the front-end.
Can any one please provide a step-by-step working answer ?
Update : here is my final web.config (which does not work):
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<remove fileExtension=".blat" />
<remove fileExtension=".dat" />
<remove fileExtension=".dll" />
<remove fileExtension=".json" />
<remove fileExtension=".wasm" />
<remove fileExtension=".woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".blat" mimeType="application/octet-stream" />
<mimeMap fileExtension=".dll" mimeType="application/octet-stream" />
<mimeMap fileExtension=".dat" mimeType="application/octet-stream" />
<mimeMap fileExtension=".json" mimeType="application/json" />
<mimeMap fileExtension=".wasm" mimeType="application/wasm" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff" />
<mimeMap fileExtension=".js.gz" mimeType="application/javascript" />
<mimeMap fileExtension=".dat.gz" mimeType="application/octet-stream" />
<mimeMap fileExtension=".dll.gz" mimeType="application/octet-stream" />
<mimeMap fileExtension=".json.gz" mimeType="application/json" />
<mimeMap fileExtension=".wasm.gz" mimeType="application/wasm" />
<mimeMap fileExtension=".blat.gz" mimeType="application/octet-stream" />
<mimeMap fileExtension=".html.gz" mimeType="text/html" />
<mimeMap fileExtension=".css.gz" mimeType="text/css" />
<mimeMap fileExtension=".ico.gz" mimeType="image/x-icon" />
<mimeMap fileExtension=".svg.gz" mimeType="image/svg+xml" />
<mimeMap fileExtension=".js.br" mimeType="application/javascript" />
<mimeMap fileExtension=".dat.br" mimeType="application/octet-stream" />
<mimeMap fileExtension=".dll.br" mimeType="application/octet-stream" />
<mimeMap fileExtension=".json.br" mimeType="application/json" />
<mimeMap fileExtension=".wasm.br" mimeType="application/wasm" />
<mimeMap fileExtension=".blat.br" mimeType="application/octet-stream" />
<mimeMap fileExtension=".html.br" mimeType="text/html" />
<mimeMap fileExtension=".css.br" mimeType="text/css" />
<mimeMap fileExtension=".ico.br" mimeType="image/x-icon" />
<mimeMap fileExtension=".svg.br" mimeType="image/svg+xml" />
</staticContent>
<rewrite>
<outboundRules rewriteBeforeCache="true">
<rule name="Add Vary Accept-Encoding" preCondition="PreCompressedFile" enabled="true">
<match serverVariable="RESPONSE_Vary" pattern=".*" />
<action type="Rewrite" value="Accept-Encoding" />
</rule>
<rule name="Add Encoding Brotli" preCondition="PreCompressedBrotli" enabled="true" stopProcessing="true">
<match serverVariable="RESPONSE_Content_Encoding" pattern=".*" />
<action type="Rewrite" value="br" />
</rule>
<rule name="Add Encoding Gzip" preCondition="PreCompressedGzip" enabled="true" stopProcessing="true">
<match serverVariable="RESPONSE_Content_Encoding" pattern=".*" />
<action type="Rewrite" value="gzip" />
</rule>
<preConditions>
<preCondition name="PreCompressedFile">
<add input="{HTTP_URL}" pattern="\.(gz|br)$" />
</preCondition>
<preCondition name="PreCompressedBrotli">
<add input="{HTTP_URL}" pattern="\.br$" />
</preCondition>
<preCondition name="PreCompressedGzip">
<add input="{HTTP_URL}" pattern="\.gz$" />
</preCondition>
</preConditions>
</outboundRules>
<rules>
<rule name="Serve subdir">
<match url=".*" />
<action type="Rewrite" url="wwwroot\{R:0}" />
</rule>
<rule name="Rewrite brotli file" stopProcessing="true">
<match url="(.*)"/>
<conditions>
<add input="{HTTP_ACCEPT_ENCODING}" pattern="br" />
<add input="{REQUEST_FILENAME}" pattern="\.(js|dat|dll|json|wasm|blat|htm|html|css|ico|svg)$" />
<add input="{REQUEST_FILENAME}.br" matchType="IsFile" />
</conditions>
<action type="Rewrite" url="{R:1}.br" />
</rule>
<rule name="Rewrite gzip file" stopProcessing="true">
<match url="(.*)"/>
<conditions>
<add input="{HTTP_ACCEPT_ENCODING}" pattern="gzip" />
<add input="{REQUEST_FILENAME}" pattern="\.(js|dat|dll|json|wasm|blat|htm|html|css|ico|svg)$" />
<add input="{REQUEST_FILENAME}.gz" matchType="IsFile" />
</conditions>
<action type="Rewrite" url="{R:1}.gz" />
</rule>
<rule name="SPA fallback routing" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
<action type="Rewrite" url="wwwroot\" />
</rule>
</rules>
</rewrite>
<httpCompression>
<dynamicTypes>
<add mimeType="application/octet-stream" enabled="true" />
<add mimeType="application/json" enabled="true" />
<add mimeType="application/wasm" enabled="true" />
<add mimeType="application/font-woff" enabled="true" />
</dynamicTypes>
<staticTypes>
<add mimeType="application/octet-stream" enabled="true" />
<add mimeType="application/json" enabled="true" />
<add mimeType="application/wasm" enabled="true" />
<add mimeType="application/font-woff" enabled="true" />
</staticTypes>
</httpCompression>
</system.webServer>
</configuration>
TL;DR
Most likely you have a site misconfiguration issue in IIS. To confirm it, please check if your site configuration will load in Configuration Editor:
Select your website
Double-click on Configuration Editor
Check if this gives you an error
Then work your way through the errors and eliminate them one by one by updating your site configuration.
The challenge is that it's hard to provide a universally working example since it depends on many unknowns: OS version, IIS version, existing configs, etc.
Detailed steps
There are two ways for how it can be done: using IIS Compression scheme providers (Option 1) or using rewrites (Option 2).
Prerequisites
Here is what I used for my setup:
Windows 10 Pro
IIS version 10.0
Installed URL Rewrite Module
Dynamic Content Compression and Static Content Compression IIS features are enabled in Turn Windows features on or off dialog
New Blazor app created with .NET5.0 dotnet new blazorwasm
Option 1: Adding compression using IIS Compression scheme providers
Install Microsoft IIS Compression
Update your site configuration
Note: it seems like the suggested configuration won't work by default in IIS. I had to remove some entries from it because they were duplicates of the entries in the IIS machine config.
Here is a configuration that finally worked for me:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<remove fileExtension=".blat" />
<remove fileExtension=".dat" />
<remove fileExtension=".dll" />
<remove fileExtension=".json" />
<remove fileExtension=".wasm" />
<remove fileExtension=".woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".blat" mimeType="application/octet-stream" />
<mimeMap fileExtension=".dll" mimeType="application/octet-stream" />
<mimeMap fileExtension=".dat" mimeType="application/octet-stream" />
<mimeMap fileExtension=".json" mimeType="application/json" />
<mimeMap fileExtension=".wasm" mimeType="application/wasm" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff" />
</staticContent>
<rewrite>
<rules>
<rule name="Serve subdir">
<match url=".*" />
<action type="Rewrite" url="wwwroot\{R:0}" />
</rule>
<rule name="SPA fallback routing" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
<action type="Rewrite" url="wwwroot\" />
</rule>
</rules>
</rewrite>
<urlCompression doStaticCompression="true" doDynamicCompression="true" />
<httpCompression>
<dynamicTypes>
<add mimeType="application/octet-stream" enabled="true" />
<add mimeType="application/json" enabled="true" />
<add mimeType="application/wasm" enabled="true" />
<add mimeType="application/font-woff" enabled="true" />
</dynamicTypes>
<staticTypes>
<add mimeType="application/octet-stream" enabled="true" />
<add mimeType="application/json" enabled="true" />
<add mimeType="application/wasm" enabled="true" />
<add mimeType="application/font-woff" enabled="true" />
</staticTypes>
</httpCompression>
</system.webServer>
</configuration>
Option 2: Adding compression using rewrites
Download the web.config provided in this article
Go through similar activities as above, eliminating all web.config inconsistencies.
Note: In my case, I had to remove mimeMap for .wasm due to duplication reported by IIS:
...
<staticContent>
<remove fileExtension=".dll" />
<remove fileExtension=".json" />
<remove fileExtension=".woff" />
<remove fileExtension=".woff2" />
<remove fileExtension=".wasm" /> <!-- added this line -->
<mimeMap fileExtension=".json" mimeType="application/json" />
...
Results
And as a result, for either option, you should be able to see the following.
for HTTP
for HTTPs
First, you need to follow prerequisites steps that Sasha mentioned.
After compression already set on server, modify the web.config using web.config mentioned in options 2.
Don't forget add this line in your web.config
<remove fileExtension=".wasm" />
Before I added the above, my apps got an error when loading.
After that, you can clear your browser cache and history to test it.
I started investigating the problem using this topic, and this is by far the best web.config I found:
https://github.com/dotnet/AspNetCore.Docs/blob/main/aspnetcore/blazor/host-and-deploy/webassembly/_samples/web.config
It worked like a charm: the initial loading time (no browser cache) was shorted from ~20 seconds to ~1.2 seconds. My configuration is as above: IIS hosted Blazor client application.

How to enable compression using IIS

I have followed this document and have enabled both Dynamic and Static compression for my website.
But when I test the website here, the compression is not enabled.
I have verified the HttpCompression:
<system.webServer>
<httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
<staticTypes>
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="application/javascript" enabled="true" />
<add mimeType="application/atom+xml" enabled="true" />
<add mimeType="application/xaml+xml" enabled="true" />
<add mimeType="image/svg+xml" enabled="true" />
<add mimeType="*/*" enabled="false" />
</staticTypes>
<dynamicTypes>
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="application/x-javascript" enabled="true" />
<add mimeType="application/javascript" enabled="true" />
<add mimeType="*/*" enabled="false" />
</dynamicTypes>
<scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
</httpCompression>
</system.webServer>
I have also checked the following IIS Settings:
I see from your posted headers that the site is behind cloudfront (ie the via and x-cache headers).
Thus you may need to investigate having cloudfront provide compressed data: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ServingCompressedFiles.html
I'm not particularly familiar with cloudfront, but since its adding the via header its acting as a proxy..
..you have noCompressionForProxies = True in your IIS settings screenshot.
This has some info on changing that setting https://community.spiceworks.com/topic/1989103-help-with-enabling-nocompressionforproxies-in-applicationhost-config-in-iis
As a 1st test you could try to hit your site by-passing cloudfront to directly test the IIS setup.

How does IIS HTTP compression handle dynamic types versus static types?

The sample configuration listed in Microsoft's documentation of the IIS system.webServer/httpCompression configuration setting is as follows:
<httpCompression
directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
<scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
<dynamicTypes>
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="application/javascript" enabled="true" />
<add mimeType="*/*" enabled="false" />
</dynamicTypes>
<staticTypes>
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="application/javascript" enabled="true" />
<add mimeType="*/*" enabled="false" />
</staticTypes>
</httpCompression>
What I'm not understanding is why their list of dynamic and static types are identical. Wouldn't you want a given MIME type to be deterministically registered as either dynamic or static, not both?
In the above example, I can't tell if application/javascript responses will be treated as dynamic or static because it's listed under both settings. Can someone shed some light on how this works?

Gzip on Azure Webapps

I've a problem with gzip in my Azure Webapps. I'm using Wordpress (my domain is https://www.uc.ac.id) and using Windows OS base for my Webapps.
I can't enable gzip compression in my site. I was tried so many ways to enable it (with add compression on my web.config and application.xdt) but it's not working after i check in https://checkgzipcompression.com, the gzip is not enabled.
Please help me.
There is my web.config
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.web>
<pages enableSessionState="false" />
</system.web>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<remove name="X-Powered-By" />
<add name="X-Frame-Options" value="SAMEORIGIN" />
<add name="X-Xss-Protection" value="1; mode=block" />
<add name="X-Content-Type-Options" value="nosniff" />
<add name="Referrer-Policy" value="no-referrer" />
</customHeaders>
<redirectHeaders>
<clear />
</redirectHeaders>
</httpProtocol>
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="15000000" />
<denyUrlSequences>
<add sequence="xmlrpc.php" />
</denyUrlSequences>
</requestFiltering>
<dynamicIpSecurity denyAction="Forbidden">
<denyByConcurrentRequests enabled="true" maxConcurrentRequests="10" />
<denyByRequestRate enabled="true" maxRequests="15" requestIntervalInMilliseconds="2000" />
</dynamicIpSecurity>
</security>
<staticContent>
<clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="31.00:00:00" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff2" mimeType="font/woff2" />
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="font/woff" />
</staticContent>
<urlCompression doStaticCompression="true" doDynamicCompression="true" dynamicCompressionBeforeCache="true" />
<rewrite>
<rules>
<rule name="ProxyAdmin" stopProcessing="true">
<match url="developer-academy(.*)" />
<action type="Rewrite" url="https://ucappleacademy.azurewebsites.net/{R:1}" logRewrittenUrl="false" />
</rule>
<rule name="Redirect rquests to default azure websites domain" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAny">
<add input="{HTTP_HOST}" pattern="^semeru\.azurewebsites\.net$" />
</conditions>
<action type="Redirect" url="https://www.uc.ac.id/{R:0}" />
</rule>
<rule name="WordPress: https://www.uc.ac.id" patternSyntax="Wildcard">
<match url="*"/>
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/>
</conditions>
<action type="Rewrite" url="index.php"/>
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
and this is my application.xdt
<?xml version="1.0"?>
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
<system.webServer>
<proxy xdt:Transform="InsertIfMissing" enabled="true" preserveHostHeader="false" reverseRewriteHostInResponseHeaders="false" />
<httpCompression>
<dynamicTypes>
<add mimeType="application/json;charset=utf-8" enabled="true" xdt:Transform="InsertAfter(/configuration/system.webServer/httpCompression/dynamicTypes/add[(#mimeType='application/json')])" />
</dynamicTypes>
</httpCompression>
</system.webServer>
</configuration>

gzip compression & iis express/iis?

Does anyone know why the following web.conig changes will NOT work:
<httpCompression>
<staticTypes>
<add mimeType="application/javascript" enabled="true"/>
</staticTypes>
<dynamicTypes>
<add mimeType="application/javascript" enabled="true"/>
</dynamicTypes>
</httpCompression>
After i added javascript files were still not being compressed (gzip). I thrased around for a couple days because i really didn't know what the problem was at first but now i do. If i change the applicationhost.config directly though it does work:
<httpCompression directory="%TEMP%\iisexpress\IIS Temporary Compressed Files">
<scheme name="gzip" dll="%IIS_BIN%\gzip.dll" />
<dynamicTypes>
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="application/x-javascript" enabled="true" />
<add mimeType="application/javascript" enabled="true" />
<add mimeType="*/*" enabled="false" />
</dynamicTypes>
<staticTypes>
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="application/x-javascript" enabled="true" />
<add mimeType="application/javascript" enabled="true" />
<add mimeType="application/atom+xml" enabled="true" />
<add mimeType="application/xaml+xml" enabled="true" />
<add mimeType="*/*" enabled="false" />
</staticTypes>
</httpCompression>
It would be MUCH easier to change your web.config then trying to figure out what web servers applicationhost.config file is incorrect but unfortunately it doesn't work
That being said IIS Express is setup "incorrectly" by default. It gives javascript files a mimetype of "application/javascript" but only compresses javascript files that come across as "application/x-javascript". I don't know if IIS (not express) ever comes defaulted this way.
You could try adding the doDynamicCompression attribute with a value of true to the urlCompression attribute.
<urlCompression doDynamicCompression="true" />

Resources