The fetch http request is converted to https?

problem

fetch requests an http protocol interface, but the actual requested interface is https protocol?

solve

There are two ways of thinking:

• Has the fetch request been rewritten;
• Other configuration influences, causing abnormalities in the native api;

After inspection, the fetch request has not been rewritten, so I will focus on the second idea. After constant searching, a meta tag was found:

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

It turns out that http is automatically converted to https because of this.

Content Security Policy CSP

CSP defines the Content-Security-Policy HTTP header to allow the creation of a whitelist of trusted content sources, and instructs the browser to only execute or render resources from these sources, instead of blindly trusting all content provided by the server. Even if an attacker finds a vulnerability and is able to inject a script, the script will not be executed because the script does not meet the whitelist.

effect

A protection function that can significantly reduce the risk and impact of XSS attacks in modern browsers.

CSP instruction

Although script resources are the most obvious security risk, CSP provides a rich set of policy instructions that allow developers to exercise fairly fine-grained control over the resources that are allowed to load the page. The remaining instructions are:

• script-src

  Used to control the set of permissions that the script has for a particular page.

• base-uri

  Used to limit <base> element of the page.

• child-src

  Used to list URLs applicable to worker threads and embedded frame content. For example: child-src https://youtube.com will enable embedded videos from YouTube (not other sources). Use this instruction to replace the deprecated frame-src instruction.

• connect-src

  Used to limit the sources that can be connected (via XHR, WebSockets and EventSource).

• font-src

  Used to specify the source that can provide web fonts. Google’s web fonts can be enabled font-src https://themes.googleusercontent.com

• form-action

  Used to list valid endpoints that <form>

• frame-ancestors

  Used to specify the source that can be embedded in the current page. This instruction is applicable to the <frame> , <iframe> , <embed> and <applet> . This directive cannot be used in the <meta> tag, and only applies to non-HTML resources.

• frame-src

  Deprecated. Please use child-src .

• img-src

  Used to define the source from which images can be loaded.

• media-src

  Used to restrict the sources that are allowed to transmit video and audio.

• object-src

  Can control Flash and other plug-ins.

• plugin-types

  Used to limit the types of plug-ins that the page can call.

• report-uri

  Used to specify the URL that the browser will send a report to when the content security policy is violated. This instruction cannot be used for the <meta> tag.

• style-src

  It is the style sheet script-src

• upgrade-insecure-requests

  Instruct the User Agent to change HTTP to HTTPS and rewrite the URL structure. This directive is suitable for websites with a large number of old URLs (required to be rewritten).

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

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

Any URL requested will be rewritten before the request occurs, which means that no unsafe requests will touch the network. If the requested resource is not actually available via HTTPS, the request will fail without returning to HTTP.

Instruction use

default value

If no specific value is set for a command, the default value is * .
font-src '*' means that fonts can be loaded from any location without any restrictions.

replaces the default value

Replace the default behavior by specifying a default-src This directive is used to define the default value of most directives that are not specified. Generally, it is applicable to any instruction ending -src

If you set default-src to https://example.com and you fail to specify a font-src command, then you can https://example.com , but not from anywhere else.

The following instructions do not use default-src as a fallback instruction. If you do not set it, it is equivalent to allowing any content to be loaded.

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

multiple instructions

You can set any number of instructions, just list each instruction in the HTTP header and separate them with a semicolon.

// 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">

One instruction with multiple values

If you want to list all resources of a specific type required in one command, separate multiple values with spaces.

// 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

Reference: Content Security Policy