[Bug] 7.1.0 - <meta> content attribute value becomes empty and gets replaced by media attribute which gives unexpected results in browser

[fingers10]

After upgrading to 7.1.0, content attribute of normal <meta> element in index.html gets replaced by media attribute and the content attribute value becomes empty in blazor wasm apps and this produces unexpected results in browser.

Example,

This,

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Becomes,

<meta name="viewport" media="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" content="" />

This breaks the responsiveness of the site.

All the <meta> tags in index.html gets affected.

<meta> tags in index.html with content attribute

<meta name="author" content="Abdul Rahman Shabeek Mohamed">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="copyright" content="I Love DotNet">
<meta name="language" content="EN">
<meta name="robots" content="index,follow" />
<meta name="owner" content="Abdul Rahman Shabeek Mohamed">
<meta http-equiv="Content-Security-Policy"
      content="base-uri 'self';
           block-all-mixed-content;
           img-src data: 'self';
           object-src 'none';
           script-src 'self'
                      https://gist.github.com
                      'unsafe-eval'
                      'unsafe-inline'
                      data:;
           style-src 'self'
                     https://github.githubassets.com
                     'unsafe-inline';
           upgrade-insecure-requests;">

<meta> tags in index.html with content attribute replaced by media attribute and content attribute value becomes empty

<meta name="author" media="Abdul Rahman Shabeek Mohamed" content="">
<meta name="viewport" media="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" content="">
<meta name="copyright" media="I Love DotNet" content="">
<meta name="language" media="EN" content="">
<meta name="robots" media="index,follow" content="">
<meta name="owner" media="Abdul Rahman Shabeek Mohamed" content="">
<meta http-equiv="Content-Security-Policy" media="base-uri 'self';
               block-all-mixed-content;
               img-src data: 'self';
               object-src 'none';
               script-src 'self'
                          https://gist.github.com
                          'unsafe-eval'
                          'unsafe-inline'
                          data:;
               style-src 'self'
                         https://github.githubassets.com
                         'unsafe-inline';
               upgrade-insecure-requests;" content="">

[jsakamoto]

@fingers10 Thank you for reporting!

However, unfortunately, I was not able to reproduce the problem that you reported even though I spent a lot of hours. 😥

This problem looks not so obvious.

Could you tell me more details about your project, such as the target framework version (Core3.1, 5.0, 6.0, etc.), runtime type (Blazor server or Blazor WebAssembly), and your app is PWA or not, etc.

Of course, attaching the zipped project file that is minimal to reproduce the problem into this thread is much helpful to figure out the reason for the problem.

[fingers10]

@jsakamoto , here is the repro repo link. Please let me know if any additional details are needed.

[jsakamoto]

@fingers10 Thank you for providing the URL of your repository to reproduce the problem.

However, unexpectedly, that project worked well in my local environment.

So I have a question.

In your environment, in the "Service Workers" section of the "Application" tab, of the browser's developer tools window, is there any service worker registered?

If it is yes, then could you try out the following steps?

1. Please unregister the service worker.

2. Clear all of the caches of the Blazor application.

3. Close all web browser tabs and windows.

4. Re-launch the web browser, and after opening the app, set the "Disable cache" check box in the "Network" tab and hard reload it.

I hope the app will work fine once after doing that.

[fingers10]

@jsakamoto did you publish the project and running it from iis? It will work properly in development mode but not after publish

[jsakamoto]

@jsakamoto

I did the dotnet publish -c:Release command, and serve the published contents files by using dotnet serve global tool like this:

dotnet serve -d:"bin/Release/net6.0/publish/wwwroot" -S

I did not make it run on IIS.

[fingers10]

@jsakamoto ,

Many thanks for your time and response, Here are the response to previous questions.

I have no service workers registered.

Disabled cache and did a hard reload

Published and running in IIS/ GitHub Pages. Issue occurs in both

As you can see from above image,

<meta name="viewport" media="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" content="">

but index.html has

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

This breaks the responsiveness of page.

[jsakamoto]

@fingers10 Thanks for the excellent reporting!

Due to your contribution, I found a critical bug in this library!

Could you try out the latest version?

• https://www.nuget.org/packages/Toolbelt.Blazor.HeadElement/7.1.1

[fingers10]

@jsakamoto I tried 7.1.1 and that works as expected. many thanks for your time and efforts to look on to this.

This is optional - I would be more happy if you could write a recommendation to me on linkedin if you find my contributions are worthy.