澳门新浦京8455com有限公司欢迎您!

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

时间:2019-12-09 02:35

让浏览器不再显示 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改造之后,我们可以在很多页面中看到如下警报:

澳门新浦京8455com 1

很多运营对 https 没有技术概念,在填入的数据中不免出现 http 的资源,体系庞大,出现疏忽和漏洞也是不可避免的。

WebView不支持Https请求(需认证),这个时候我们可以通过重写onReceivedSslError这个方法并执行handler.proceed
()这个方法,可以达到页面展示的效果


简单说步骤如下:

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:

澳门新浦京8455com 2

不过让人不解的是,这个资源发出了两次请求,猜测是浏览器实现的 bug:

澳门新浦京8455com 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 赞 收藏 评论

澳门新浦京8455com 4

clipboard.png

http协议

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树和设置布局。

1. http协议是建立在  tcp/ip协议基础上.

从上面的步骤不难看出,css放在头部,js放在尾部对页面优化的提升作用。 css并不阻塞dom解析(css只会阻塞渲染,css加载慢会让页面一开始很丑,但是不影响用户看,但是丑对用户就是一种伤害....), 而js会(除非少部分影响页面构建的js,剩下的js应该在底部加载执行)。

2. 我们的web开发数据的传输都是依赖于http协议.

现在的浏览器很聪明,并不是解析到html的script或者link标签再去下载静态资源, 这些都在浏览器dom解析到之前被定位出来提前下载。 另外js的执行会被之前cssom的生成(css文件下载并解析)所阻断。

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

参考链接

浏览器的工作原理:新式网络浏览器幕后揭秘
原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的
浏览器渲染页面原理
JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制
浏览器渲染机制——一定要放在body底部的js引用

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来获取我们需要的信息

澳门新浦京8455com,重要的有:

HTTP_HOST

REMOTE_ADDR 访问该页面的ip

DOCUMENT_ROOT  可以获取 apche的主目录

REQUEST_URI 可以获取 请求的资源名