☰

背景

tag-icon • tag-icon firefox firewall css content-type-association
背景

背景

当连接到公司网络时，某些防火墙规则会将 CSS 文件的内容类型从 更改text/css为text/html。

问题

将 CSS 文件的媒体类型更改为 HTML 会破坏某些网站，包括 superuser.com、stackoverflow.com 和整个 StackExchange 网络。调试器显示：

样式表 https://server/auD?origurl=https... 未被加载，因为其 MIME 类型“text/html”不是“text/css”。

如果没有 CSS，这些网站就无法使用。修复防火墙是不可能的（公司不会放松规则）。

stackexchange 截图

解决方法

  • 断开公司网络可以解决问题，但每天多次连接/断开连接非常耗时。

  • Linux 上的 Chromium 运行良好（即，它似乎忽略了内容类型/媒体类型不匹配），但我对 Firefox 进行了定制，这使得这个选项不太吸引人。

  • 在未连接到公司网络时，在 Firefox 中加载网站会将文件添加到缓存中，这样 Firefox 在重新连接到公司网络时就不会检索它们。这是一个很好的临时解决方案，但不可避免地缓存会过期，迫使再次断开连接以刷新缓存。

问题

如何指示 Firefox 接受具有 HTML 内容类型的 CSS 文件？

答案1

这简单修改标题添加在 （回购）为您提供帮助：

该扩展根据规则表重写标题。

方便的是它还提供了规则的导入和导出，将CSS文件的Content-Type改为如下text/css：

  1. fix-css.conf创建一个名为（必须有扩展名）的新文件.conf，其内容如下：

    {
  "format_version": "1.2",
  "target_page": "*://*/*css*",
  "headers": [
    {
      "url_contains": "",
      "action": "modify",
      "header_name": "Content-Type",
      "header_value": "text/css",
      "comment": "fix css",
      "apply_on": "res",
      "status": "on"
    }
  ],
  "debug_mode": false,
  "show_comments": true,
  "use_url_contains": false
}

  2. 通过打开附加用户界面简单修改标头 工具栏按钮 >配置

  3. 单击 ⇲ Import按钮。

  4. .conf在文件对话框中选择文件。

  5. 确认这将删除您的实际配置警告

  6. 点击START右上角的按钮，启用修改。

simple-modify-headers 配置来修复 CSS

回复：Firefox 内部设置

about:config 中没有设置 CSS Content-Type必须是text/css，未知或为空（或在怪异模式下，文件来自同一来源）：

在标准模式下，样式表必须具有这些 MIME 类型之一才能进行处理。在怪异模式下，我们接受任何 MIME 类型，但前提是样式表与请求文档或父表同源。请参阅错误 524223。

答案2

您还可以使用书签小工具将页面引用的 CSS 文件作为<style>标签内联到文档中。这需要每次页面加载时单击一次，但无需其他软件。

先决条件：确保书签工具栏显示

  1. 右键单击 URL 栏旁边的空白处

  2. 将鼠标悬停在书签工具栏

  3. 点击总是显示如果尚未选中。工具栏将出现在 URL 栏下方。

创建书签小程序
  1. 右键单击书签工具栏
  2. 点击添加书签...
  3. 输入名称，例如内联 CSS进入姓名场地
  4. 将以下内容粘贴到网址场地： 
    javascript: (async function () {
  function appendCSS(css) {
    const style = document.createElement("style");
    style.innerText = css;
    document.head.appendChild(style);
  }

  for(const link of document.querySelectorAll('link[rel="stylesheet"][href]')){
    appendCSS(await (await fetch(link.href)).text());
  }
})();
  5. 单击新创建的书签小工具（包含点击后将执行的 JavaScript 代码的书签）

页面应该会立即看起来更好。请注意，它没有错误处理，因此如果没有任何变化，请打开开发人员工具查看潜在错误。

答案3

Content-Type如果通过嵌入在 HTML 中指定了 MIME 类型，则可以使用 Greasemonkey/Tampermonkey 来更改它。

但是，如果浏览器执行 CSS 文件的 GET 操作时服务器报告了此情况，则您必须拦截 GET 请求的答案并在其到达浏览器之前对其进行修改。这需要在浏览器和互联网之间建立一个可以为此进行编程的代理。

快速研究发现 requestly.io 其免费计划可能足以进行此类修改，或者其另一个 备择方案，例如免费 Fiddler。

相关内容