前端将http加载自动改为https

最近在做一个vue项目,遇到了一些问题,在这里记录下来:

在vue项目中,引入了一个外部的css样式,但是该样式是http的,在调试过程中发现该http链接已经失效,换成https就可以正常加载了。但是我不知道项目中是否还有其他的引入外部资源的链接,所以在index.html中加了一行meta标签:

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

该标签的意思是将站内加载的资源自动将http转为https,这样就可以省事多了

接下来就是该部署项目了,我将打包好的项目放在服务器上,在谷歌,火狐浏览器上访问均是一片空白,但是在ie上却是加载出项目首页了(此时我对于IE的看法竟然有了转变^_^)。然后查找另外两个浏览器为什么显示一片空白,发现所加载的css与js文件全是通过https加载的,这就很纳闷了,在浏览器直接访问该静态资源(http)是可以的,也就是不能以https加载静态资源。想了半天,找了半天,才想起来是上面的meta标签的问题,将其注释掉就可以在谷歌和火狐正常访问了(此时我又开始鄙视IE了Ծ‸Ծ。。。)

好了,找到问题了,接下来就是上网看看“Content-Security-Policy”的作用是什么:

CSP 的实质就是白名单制度,开发者明确告诉客户端,哪些外部资源可以加载和执行,等同于提供白名单。它的实现和执行全部由浏览器完成,开发者只需提供配置。

CSP 大大增强了网页的安全性。攻击者即使发现了漏洞,也没法注入脚本,除非还控制了一台列入了白名单的可信主机。

两种方法可以启用 CSP。一种是通过 HTTP 头信息的Content-Security-Policy的字段。

① 本网站名称及网址:分享源码网 | ShareCode.SITE。
② 本网站资源来源于网络收集,如有侵权,请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流,请不要用于商业用途,否则后果自负。
④ 如果你也有好源码或者教程,可以联系小编,有钻石奖励和额外收入。
⑤ 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需。
⑦ 本站资源大多存储在云盘,如发现链接失效请反馈我们会第一时间更新。

分享源码网 » 前端将http加载自动改为https

提供优质的资源集合

加入VIP 联系我们