6165金沙总站:http协议:http请求、http响应、间隔时间跳转页面、禁用浏览器缓存

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

6165金沙总站 1

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

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

简单说步骤如下:


c 模拟http请求,如何获取页面中的图片?
1.我编写了一个SOCKET程序,功能类似代理软件,主要是将指定服务器的页面转发到本地。
2.在浏览器访问本地地址时,就会打开指定服务器的页面
3.现在的问题是可以获取到文本数据,如:

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:

6165金沙总站 2

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

6165金沙总站 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 赞 收藏
评论

6165金沙总站 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协议

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />•<html><head></head><body><h1>This a test</h1><p><img src="test.png" width="512" height="512" /> </p></body></html>

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

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

浏览器也可以显示页面,但是图片无法加载
4.请问是什么原因呢?是否是http服务器关闭了这次连接,但是图片却并没有拿到本地导致的?
5.有什么解决办法吗?

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

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

程序已经找到问题了。原来的程序在文本信息发送后,确实会将图片等其他数据传过来。
但是还是找不到什么原因导致的图片传输一半就会关闭连接。
1.目前我的代理程序在windows端工作,使用完成端口,想将远程服务器的页面转发到本地,然后在浏览器可以打开页面。
2.目前的问题是图片会偶尔传输不过来,尺寸小的图片可以传送,但是大尺寸的图片传输一部分后,连接就会关闭.
3.同样的连接模式,在linux平台使用epoll模型,转发数据都正常。
请问可能是哪方面问题呢?

参考链接

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

  1. http协议全称是 超文本传输协议
/*+----------------------------------------------------------------------------------------------+| 在本地PC运行的程序分为服务端与客户端 || || +--------------------------+ +---------------------------------------+ | +---------------------------+| | | | | | | || | 本地客户端 | | 在本地建立的服务端 | | | 192.168.2.19 || | 主要是浏览器 +-----------> | 负责将本地数据转发到远端服务器 +-------------------> | 远端服务器 || | FTP等软件 | | 或者将远端服务器发送过来 | | | 真实的目标地址 || | | | 的数据转发到本地的客户端 | | | || | | <----------+ | <-------------------+ || | | | | | | || +--------------------------+ +---------------------------------------+ | | || | +---------------------------+| |+----------------------------------------------------------------------------------------------+要达到效果是:在浏览器中输入 127.0.0.1:8000打开192.168.2.19的主页面

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 可以获取 请求的资源名

http请求有两种主要的方式

get /
post

get 和post的区别有哪些

1.安全性 get 请求的数据会显示在
地址栏(URL路径中)上, post请求的数据,放在http协议的消息体

2.从可以提交数据的大小看.

2.1  http协议本身并没有限制数据大小.

2.2  浏览器在对get 和post请求做限制, get
请求数据 2k+35  ,post没有限制.

3. get请求可以更好的添加到收藏夹.

现在我们实际使用一些http请求,完成一个防盗链的练习.

☞ http请求不是固定,是根据实际情况的,比如REFEER.

 Http响应(response)

简单定义:
一个Http响应代表服务器给浏览器回送的数据,同时告诉浏览器应当怎样处理数据.

1.基本结构

状态行

消息头信息

                     <–空行

实体信息

快速入门

HTTP/1.1 200 OK           【200 ok 表示客户端请求成功】

Server: Microsoft-IIS/5.0           【表示告诉浏览器 服务器的情况 】

Date: Thu, 13 Jul 2000 05:46:53 GMT 【告诉浏览器 请求的页面 的时间 】

Content-Length: 2291                   【表示回送的数据有 2291个字节】

Content-Type: text/html        【文档类型】

Cache-control: private          【缓存】

hello

6165金沙总站 5

对状态码的说明

6165金沙总站 6

举例说明Http响应的实际应用

302状态码的使用

比如我们现在希望访问a.php 页面,让其自动重定向到b.php

基本用法使用

<?php

      //header(“Location: 新的页面”);

      header(“Location: );

       exit();

      

?>

细节: 302 状态码也可以让其跳转到外网去

404 码

404 最常见的状态码

404一般说就是该页面不存在

304码使用

304 码主要是告诉浏览器,请求的资源不需要更新

<?php

    echo “hello”;

    echo
“<imgsrc=”Sunset.jpg”  width=”100px”>“

?>

上面说明了 304的具体用法

HTTP/1.1 304 Not Modified

Date: Tue, 13 Sep 2011 02:10:38 GMT

Server: Apache/2.2.17 (Win32) PHP/5.3.5

Connection: Keep-Alive

Keep-Alive: timeout=5, max=99

ETag:”12d00000000572c-6f69-3e1d849f35000″

 

下面是比较详细的一个Http响应

Location: http://www.baidu.org/index.php

Server:apache

Content-Encoding: gzip   【内容编码支持gzip压缩算法】

Content-Length: 80      【返回数据大小】

Content-Language: zh-cn

Content-Type: text/html;
charset=GB2312

Last-Modified: Tue, 11 Jul 2000
18:23:51GMT 【表示浏览器请求资源,最新更新时间】

Refresh:1;url=  【告诉浏览器,间隔1秒,重定向到 baidu】

Content-Disposition:
attachment;filename=aaa.zip

Transfer-Encoding: chunked  

Set-Cookie:SS=Q0=5Lb_nQ; path=/search  【讲Cookie】

Expires: -1

Cache-Control:no-cache  

Pragma: no-cache   

Connection: close/Keep-Alive   

Date: Tue, 11 Jul 2000 18:23:51 GMT

演示如何通过Http响应,控制浏览器间隔一定时间去跳转.

<?php

       //header(“Refresh: 3 ;
url=);

       header(“Refresh: 3
;url=);

?>

演示如何通过Http响应控制页面缓存,在默认情况下,浏览器会缓存页面.

<?php

       //通过以下三个header语句来禁用缓存(ajax
),用三句是为了匹配不同的浏览器

      header(“Expires: -1”);

      header(“Cache-Control:
no_cache”);

      header(“Pragma: no-cache”);

       echo”hello!cache”;

?>

You may also like...

发表评论

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

网站地图xml地图