菜单

吃浏览器不再显得 https 页面中之 http 请求警报

2018年11月15日 - Html/Html5

给浏览器不再显得 https 页面中之 http 请求警报

2015/08/26 · 基础技术 ·
HTTPS,
浏览器

初稿出处:
李靖(@Barret李靖)   

HTTPS 是 HTTP over Secure Socket Layer,以安啊目标的 HTTP 通道,所以在
HTTPS 承载的页面及无允出现 http 请求,一旦出现就是是提醒或报错:

Mixed Content: The page at ‘https://www.taobao.com/‘ was loaded over
HTTPS, but requested an insecure image ‘http://g.alicdn.com/s.gif’.
This content should also be served over HTTPS.

HTTPS改造后,我们得以当成千上万页面中见到如下警报:

图片 1

重重营业对 https 没有技术概念,在填充的数码被难免出现 http
的资源,体系大,出现疏忽与尾巴也是不可避免的。

简单易行说步骤如下:

CSP设置upgrade-insecure-requests

好以 W3C 工作组考虑到了咱升级 HTTPS 的紧巴巴,在 2015 年 4
月份即令时有发生了一个 Upgrade Insecure Requests 的草案,他的用意就是给浏览器自动升级要。

在咱们服务器的响应头中加入:

header(“Content-Security-Policy: upgrade-insecure-requests”);

1
header("Content-Security-Policy: upgrade-insecure-requests");

咱俩的页面是 https 的,而者页面被包含了大气底 http
资源(图片、iframe等),页面一旦发觉存在上述响应头,会于加载 http
资源时自动替换成 https 请求。可以查 google
提供的一个 demo:

图片 2

但受丁非清除的凡,这个资源有了区区差呼吁,猜测是浏览器实现的 bug:

图片 3

自然,如果我们不便民在服务器/Nginx
上操作,也可以页面被参加 meta 头:

XHTML

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

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

当前支持这装置的还只有 chrome 43.0,不过我深信,CSP 将变成未来 web
前端安全努力关怀以及采用的情节。而 upgrade-insecure-requests 草案也会见火速进入
RFC 模式。

从今 W3C
工作组于有底 example,可以见到,这个装置不见面对别国的
a 链接做处理,所以可以放心使用。

1 赞 收藏
评论

图片 4

1: 浏览器拿到html之后,开始解析html,生成dom tree
2:
在dom解析被,遇到js的外链或者script代码,浏览器会停止dom解析,在形成js代码下载执行下,再持续分析。
遇到css的外链或者css的代码, 浏览器会连续分析dom,
并且会下载css,并行解析css生成cssom tree (dom 和 cssom是互为的)
3: dom tree 和 cssom tree 会合并生成render
tree(渲染树),浏览器layout并paint,
这是一个渐进的经过。为直达更好之用户体验,render引擎会力求尽快以内容显示在屏幕及。它不用等及整个
HTML 文档解析了之后,就见面起构建render树和安布局。

自地方的步子不难看出,css放在头部,js放在尾部对页面优化的升级作用。
css并无打断dom解析(css只会堵塞渲染,css加载慢会给页面一开始很丑,但是非影响用户看,但是丑对用户就是是一致栽伤害….),
而js会(除非少部分震慑页面构建的js,剩下的js应该当底部加载执行)。

现之浏览器很明白,并无是分析及html的script或者link标签还失下载静态资源,
这些还在浏览器dom解析及前为固化出提前下载。
另外js的行会为事先cssom的转(css文件下充斥并分析)所阻断。

参考链接

浏览器的劳作原理:新式网络浏览器幕后揭开
本来 CSS 与 JS 是这么不通 DOM
解析和渲染之
浏览器渲染页面原理
JS 一定要在 Body
的绝的部么?聊聊浏览器的渲染机制
浏览器渲染机制——一定要是在body底部的js引用

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图