fetch http 请求被转成 https ?

问题

fetch 请求一个 http 协议的接口，实际请求出去的接口是 https 协议的？

解决

有两种思路：

• fetch 请求有没有被重写；
• 其他配置影响，让原生 api 出现异常；

经检查，fetch 请求没有被重写，所以就着重看下思路二。经过不断的查找， 发现一个meta 标签：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

原来是因为这个才把 http 自动转化为 https。

内容安全策略 CSP

CSP 通过定义 Content-Security-Policy HTTP 标头，允许创建信任内容的来源白名单，并指示浏览器仅执行或渲染来自这些来源的资源，而不要盲目地信任服务器提供的所有内容。即使攻击者发现漏洞并能够注入脚本，由于此脚本不符合此白名单，也不会执行该脚本。

作用

可显著降低现代浏览器中 XSS 攻击的风险和影响的防护功能。

CSP指令

尽管脚本资源是最显而易见的安全风险，但 CSP 提供了一个丰富的策略指令集，让开发者可以对允许页面加载的资源进行相当精细的控制。其余指令有:

• script-src

  用于控制脚本对于某个特定页面所享有的一组权限。

• base-uri

  用于限制可在页面的 <base> 元素中显示的网址。

• child-src

  用于列出适用于工作线程和嵌入的帧内容的网址。例如: child-src https://youtube.com 将启用来自 YouTube（而非其他来源）的嵌入视频。 使用此指令替代已弃用的 frame-src 指令。

• connect-src

  用于限制可（通过 XHR、WebSockets 和 EventSource）连接的来源。

• font-src

  用于指定可提供网页字体的来源。Google 的网页字体可通过 font-src https://themes.googleusercontent.com 启用。

• form-action

  用于列出可从 <form> 标记提交的有效端点。

• frame-ancestors

  用于指定可嵌入当前页面的来源。此指令适用于 <frame>、<iframe>、<embed> 和 <applet> 标记。此指令不能在 <meta> 标记中使用，并仅适用于非 HTML 资源。

• frame-src

  已弃用。请改用 child-src。

• img-src

  用于定义可从中加载图像的来源。

• media-src

  用于限制允许传输视频和音频的来源。

• object-src

  可对 Flash 和其他插件进行控制。

• plugin-types

  用于限制页面可以调用的插件种类。

• report-uri

  用于指定在违反内容安全政策时浏览器向其发送报告的网址。此指令不能用于 <meta> 标记。

• style-src

  是 script-src 版的样式表。

• upgrade-insecure-requests

  指示 User Agent 将 HTTP 更改为 HTTPS，重写网址架构。 该指令适用于具有大量旧网址（需要重写）的网站。

// header
Content-Security-Policy: upgrade-insecure-requests;

// meta tag
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

请求出去的任何 URL 将在请求发生之前被重写，这意味着没有不安全的请求会触及网络。如果请求的资源通过 HTTPS 实际上不可用，则该请求将失败，而不会返回到 HTTP。

指令使用

默认值

如果没有给一个指令设置具体的值，则默认值是 * 。
font-src '*'表示可以从任意位置加载字体，没有任何限制。

替换默认值

通过指定一个 default-src 指令替换默认行为。 此指令用于定义未指定的大多数指令的默认值。 一般情况下，适用于以 -src 结尾的任意指令。

如果将 default-src 设为 https://example.com，并且您未能指定一个 font-src 指令，那么，您可以从 https://example.com 加载字体，而不能从任何其他地方加载。

以下指令不使用 default-src 作为回退指令。如果不对其进行设置，则等同于允许加载任何内容。

• base-uri
• form-action
• frame-ancestors
• plugin-types
• report-uri
• sandbox

多个指令

可以设置任意数量的指令，只需在 HTTP 标头中列出每条指令，并使用分号将它们隔开。

// header
Content-Security-Policy: default-src https://cdn.example.net; child-src 'none'; object-src 'none'

// meta tag
<meta http-equiv="Content-Security-Policy" content="default-src https://cdn.example.net; child-src none; object-src none">

一个指令多个值

如果想在一条指令中列出所需的特定类型的全部资源， 以空格分割多个值。

// header 正确使用
Content-Security-Policy: script-src https://host1.com https://host2.com

// header 错误使用
// https://host2.com 会被忽略
Content-Security-Policy: script-src https://host1.com; https://host2.com

参考： 内容安全政策