microsoft / microsoft/vscode-livepreview

Incorrect Content-Type header for XHTML files

Open
#688 0 comments 0 reactions 1 assignee View on GitHub

@andreamah is already working on this.

Since Sep 23, 2024.

bug
Dominant language
TypeScript
Stars
596
Forks
119
Avg merge
1d 4m
Merged PRs (30d)
5

Description

Problem

*.xhtml files return a Content-Type header of text/html; charset=UTF-8 instead of application/xhtml+xml.

Returning the incorrect content-type breaks special features of xhtml documents, like styling with @namespace.

Steps to Reproduce

  1. Create an xhtml file, e.g. example.xhtml:
    <?xml version="1.0" encoding="utf-8"?>
    <html 
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:epub="http://www.idpf.org/2007/ops"
    >
      <head>
        <style>
          @charset "utf-8";
          @namespace epub "http://www.idpf.org/2007/ops";
    
          h1[epub|type="title"] {
            color: blue;
          }
        </style>
      </head>
      <body epub:type="bodymatter">
        <h1 epub:type="title">Hello, world!</h1>
      </body>
    </html>
    
  2. Open live preview
  3. Open devtools pane in preview
  4. Go to the Network tab and inspect Response headers for example.xhtml

Expected

  • Content-Type is application/xhtml+xml.
  • Title is displayed in blue.

Actual

  • Content-Type is text/html; charset=UTF-8.
  • Title is not colored (HTML doesn’t support @namespace styles)

Likely Cause

contentLoader.ts overrides the inferred contentType of application/xhtml+xml if the XHTML file has a language ID of "HTML". But there isn’t a separate language syntax for XHTML, so this assumption seems to be incorrect.

https://github.com/microsoft/vscode-livepreview/blob/ea1980538abafb4a9eef34b51345eb08937ba955/src/server/serverUtils/contentLoader.ts#L302-L305

Workaround

Set .xhtml files’ language type to XML and refresh. Live preview then returns expected Content-Type of application/xhtml+xml. However this breaks code injection, so edits are no longer live-updated.

Suggested solution

  if (workspaceDocuments[i].languageId == 'html') {
    fileContents = this._injectIntoFile(fileContents);
-   contentType = 'text/html';
+   contentType = contentType.includes('html') ? contentType : 'text/html';
  }

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.