fetch使用http请求被转成https ?

更新日期: 2021-07-22阅读: 1.5k标签: fetch

问题

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
来自:https://segmentfault.com/a/1190000040388867


链接: https://www.fly63.com/article/detial/10548

Fetch -- http请求的另一种姿势

传统Ajax是利用XMLHttpRequest(XHR)发送请求获取数据,不注重分离的原则。而Fetch API是基于Promise设计,专为解决XHR问题而出现。fetch API看起来简单,却是js语法不断增强提高带来的改善。

JavaScript中fetch接口的用法使用

fetch就是XMLHttpRequest的一种替代方案。如果有人问你,除了Ajax获取后台数据之外,还有没有其他的替代方案?这是你就可以回答,除了XMLHttpRequest对象来获取后台的数据之外,还可以使用一种更优的解决方案fetch。

当fetch遇到302状态码,会发生什么?

当fetch遇到302状态码,会发生什么?fetch不能拦截302,浏览器会自动从302响应的头信息的重定向地址中取到数据。针对认证的情况,后端可以返回401状态码,让前端去检查返回的状态码并据此执行相应操作。

Fetch使用

Fetch API 提供了一个获取资源的接口(包括跨域请求)。任何使用 过 XMLHttpRequest 的人都能轻松上手,但新的API提供了更强大和 灵活的功能集。Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义。

fetch使用的常见问题及其解决办法

fetch默认不携带cookie配置其 credentials 项,其有3个值:omit: 默认值,忽略cookie的发送;same-origin: 表示cookie只能同域发送,不能跨域发送;include: cookie既可以同域发送,也可以跨域发送

fetch API

fetch:一个获取资源的接口,类似于ajax,是基于 Promise之上设计,旧版本IE 完全不支持,须借助 polyfill来兼容,提供了对 Request 和 Response 对象的通用定义

fetch使用,ajax替代方案

Fetch 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。

TypeScript Fetch封装使用

Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源

通过fetch发送 post 请求下载文件

最近遇到一个下载的需求,由于 url 参数太长(常用的下载方法 a 标签或者 location.href 的方法都是 get 请求,get 请求参数长度有限制),无法下载,考虑了好几种方案,最终还是觉得通过 ajax 的 POST 方法进行下载,比较容易实现

Js中使用fetch进行异步请求

在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。 现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!