浏览器显示页面的流程,让浏览器不再显示

让浏览器不再突显 https 页面中的 http 请求警报

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

初稿出处:
浏览器显示页面的流程,让浏览器不再显示。李靖(@Barret李靖)   

HTTPS 是 HTTP over Secure Socket Layer,以安全为对象的 HTTP 通道,所以在
HTTPS 承载的页面上分裂意出现 http 请求,一旦现身就是投石问路或报错:

Mixed Content: The page at ‘‘ was loaded over
HTTPS, but requested an insecure image ‘’.
This content should also be served over HTTPS.

HTTPS改造之后,我们可以在众多页面中见到如下警报:

图片 1

许多营业对 https 没有技术概念,在填写的数目中难免出现 http
的资源,连串庞大,出现疏忽和尾巴也是不可幸免的。

WebView不匡助Https请求(需认证),那个时候大家得以经过重写onReceivedSslError这一个艺术并举办handler.proceed
()那几个方法,可以达到页面突显的效果

不难易行说步骤如下:


CSP设置upgrade-insecure-requests

好在 W3C 工作组考虑到了俺们升级 HTTPS 的困难,在 2015 年 十一月份就出了一个 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

clipboard.png

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树和安装布局。

http协议

从下面的步子简单看出,css放在头顶,js放在底部对页面优化的晋级效益。
css并不打断dom解析(css只会堵塞渲染,css加载慢会让页面一开头很丑,但是不影响用户看,然而丑对用户就是一种加害….),
而js会(除非少部分震慑页面构建的js,剩下的js应该在尾部加载执行)。

1.
http探讨是两手空空在  tcp/ip协议基础上.

现今的浏览器很聪明伶俐,并不是分析到html的script或者link标签再去下载静态资源,
这几个都在浏览器dom解析到以前被固化出来提前下载。
此外js的施行会被在此之前cssom的生成(css文件下载并分析)所阻断。

2.
大家的web开发数据的传输都是凭借于http协议.

参考链接

浏览器的行事原理:新式网络浏览器幕后揭开
原来 CSS 与 JS 是这么过不去 DOM
解析和渲染的
浏览器渲染页面原理
JS 一定要放在 Body
的最底部么?聊聊浏览器的渲染机制
浏览器渲染机制——一定要放在body尾部的js引用

  1. http协议全称是 超文本传输协议

http协议的-http请求(request)

骨干构造

请求行

消息头

                         
<—-空行

音信体(实体内容)

举例:

GET/test/hello.html HTTP/1.1   

【表示发送的get请求,
请求资源是/test/hello.html 】

Accept:
*/* 【表示客户端可以承受其余数据】

Referer:  【1.意味着自己是从什么地方来】

Accept-Language:zh-cn 【页面语言】

User-Agent:Mozilla/4.0  【告诉服务本身的浏览器的基石,操作系统】

Accept-Encoding:gzip,
deflate 【表示接受什么的数据压缩格式.】

Host:localhost:80 【主机:80】

Connection:Keep-Alive 
   【表示毫不霎时断掉大家的请求.】

现今我们想明白,客户端究竟给服务器发送的情节

一旦本身那一个http1.php. 不希望 192.168.1.33
这一个用户访问.

在劳务器端,我们得以经过$_SERVER来获取大家必要的新闻

重中之重的有:

HTTP_HOST

REMOTE_ADDR 访问该页面的ip

DOCUMENT_ROOT  可以取得
apche的主目录

亚洲必赢手机入口 ,REQUEST_URI 可以获得 请求的资源名

发表评论

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

网站地图xml地图