一、 数据协商

分类：

客户端请求：

Accept：

Accept：表明 我想要什么样的数据

Accept-Encoding：数据是什么样的编码方式 进行传输。主要限制 服务端怎样进行数据的压缩。

Accept-Language：根据这个 判断 返回的数据是什么语言。

User-Agent：标识浏览器相关的信息。

服务器返回内容：

Content

Content-Type：选择一种返回的数据格式 进行数据返回。

Content-Encoding：服务端 用了什么样的 压缩方式。

Content-Language：判断通过请求返回的什么语言。

server.js 代码

const http = require('http')

const fs = require('fs')

const zlib = require('zlib')

http.createServer(function (request, response) {

  console.log('request come', request.url)

  const html = fs.readFileSync('test.html')

  response.writeHead(, {

    'Content-Type': 'text/html',

    // 'X-Content-Options': 'nosniff' //告诉浏览器不要随意猜测我返回的数据类型

    'Content-Encoding': 'gzip' //压缩方式

  })

  response.end(zlib.gzipSync(html))

}).listen()

console.log('server listening on 8888')

test.html 代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <form action="/form" id="form" enctype="application/x-www-form-urlencoded">

    <input type="text" name="name">

    <input type="password" name="password">

    <input type="file" name="file">

    <input type="submit">

  </form>

  <script>

    var form = document.getElementById('form')

    form.addEventListener('submit', function (e) {

      e.preventDefault()

      var formData = new FormData(form)

      fetch('/form', {

        method: 'POST',

        body: formData

      })

    })

  </script>

</body>

</html>

请求返回结果：压缩前后

post 数据返回格式：

二、 Redirect

const http = require('http')

http.createServer(function (request, response) {

  console.log('request come', request.url)

  if (request.url === '/') {

    response.writeHead(, {  // or 301 慎用 直接访问 /new 302要先经过服务端的一次跳转 才能访问 /new

      'Location': '/new'

    })

    response.end()

  }

  if (request.url === '/new') {

    response.writeHead(, {

      'Content-Type': 'text/html',

    })

    response.end('<div>this is content</div>')

  }

}).listen()

console.log('server listening on 8888')

访问结果：

三、 CSP     Content-Security-Policy 内容安全策略

作用：

限制资源获取

报告资源获取越权

限制方式：

default-src 限制全局

制定资源类型

server.js 代码

const http = require('http')

const fs = require('fs')

http.createServer(function (request, response) {

  console.log('request come', request.url)

  if (request.url === '/') {

    const html = fs.readFileSync('test.html', 'utf8')

    response.writeHead(, {

      'Content-Type': 'text/html',

      // 'Content-Security-Policy': 'script-src \'self\'; form-action \'self\'; report-uri /report'

        //'script-src \'self\' 只能引用自己的外链 不能引用别的地方的外链 form不能外链

        // 'default-src http:  https:' 默认 从 http加载js

    })

    response.end(html)

  } else {

    response.writeHead(, {

      'Content-Type': 'application/javascript'

    })

    response.end('console.log("loaded script")')

  }

}).listen()

console.log('server listening on 8888')

test.html 代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <meta http-equiv="Content-Security-Policy" content="script-src 'self'; form-action 'self';">

  <title>Document</title>

</head>

<body>

  <div>This is content</div>

  <script>

    console.log('inline js')

  </script>

  <script src="test.js"></script>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/core.js"></script>

</body>

</html>

请求返回结果：

分析结果图：

HTTP 各种特性应用（三）的更多相关文章

  1. mysql三大特性、三范式、五大约束

    1.数据库的三大特性 '实体':表 '属性':表中的数据(字段) '关系':表与表之间的关系 2.数据库设计三大范式 a:确保每列保持原子性(即数据库表中的所有字段值是不可分解的原子值) b:确保表中 ...

  2. AngularJS 的常用特性（三）

    6.表达式  在模板中使用表达式是为了以充分的灵活性在模板.业务逻辑和数据之间建立联系,同时又能避免让业务逻辑渗透到模板中. <div ng-controller="SomeContr ...

  3. Java8新特性（三）——Optional类、接口方法与新时间日期API

    一.Optional容器类 这是一个可以为null的容器对象.如果值存在则isPresent()方法会返回true,调用get()方法会返回该对象. 查看结构图可以看到有如下常用方法: of(T)—— ...

  4. mahout的特性（三）

    mahout的特性 虽然在开源领域中相对较为年轻,但 Mahout 已经提供了大量功能,特别是在集群和CF 方面. Mahout 的主要特性包括: Taste CF.Taste 是 Sean Owen ...

  5. Java 8新特性（三）：Optional类

    在上一篇介绍Stream流式数据处理的文章中提到了Optional类,这是Java 8新增的一个类,用以解决程序中常见的NullPointerException异常问题.本篇文章将详细介绍Option ...

  6. Java8新特性（三）之方法引用和构造器引用

    1.使用场景 当要传递给Lambda体的操作,已经存在实现的方法了,就可以使用方法引用.(抽象方法的参数列表  必须与方法引用方法的参数列表保持一致) 2. 语法 使用操作符[::]将方法名和对象或类 ...

  7. SQL Server 2014 BI新特性（三）Power Query和Power Map功能预览

    Power Query和Power Map是微软前不久在WPC上发布的Power BI中新的针对Excel的功能.借助这两样功能,自助式BI将更方便你发现和处理数据并且丰富数据的可视化功能. Powe ...

  8. Android 5.x特性概览三

    上节,对Material Design样式做了介绍,这节我们介绍Palette. 在Android发展的长河中,UI越来越成为Google的发展重心.上文提到Android 5.x 使用palette ...

  9. SharePoint 2013 新特性 （三） 破改式 —— 设计管理器的使用 [2.HTML变身模板页]

    假设你跟我一样,看到了一个非常漂亮的页面,想把这种风格放到SharePoint里,咋办呢,那肯定得自定义个模板页了,好点是SharePoint Designer搞定,差点就得用Visual Studi ...

  10. SharePoint 2013 新特性 （三） 破改式 —— 设计管理器的使用 [1.设备通道]

    首先,哥们儿们会问,为啥要有设计管理器呢,不是原来就可以编辑页面了么,原来那个编辑不了模板页和布局页,也不能打包,而且也看不到具体HTML代码,不能编辑CSS,当然,你安装的SharePoint De ...

随机推荐

  1. Hellow BeiJing

    DAY1: (#^.^#),今天是9.23日,离出发去北京还有7天,好像一切还是正常的样子. 先发一张图,这就是我们机房的日常: 但是o(￣ヘ￣o#)我听着我耳边的cys童鞋的rap就感觉事情仿佛没辣 ...

  2. Swift编写的一些完整的app

    收集了一些实用swift编写的app,这些demo都是不错的值得学习的. 知乎日报 Swift-ZhihuDaily Swift版知乎日报 参照了YANGReal的糗事百科和uitableview的例 ...

  3. Java学习书目

    Java学习书目 拜读了:http://www.importnew.com/26932.html#comment-636554

  4. RPC架构

    RPC架构 学习了: https://www.cnblogs.com/ChrisMurphy/p/6550184.html RPC架构简介,有一个Java例子: http://blog.csdn.ne ...

  5. CLion注冊码算法逆向分析实录（纯研究）

    声明 CLion程序版权为jetBrains全部.注冊码授权为jetBrains及其付费用户全部,本篇仅仅从兴趣出发,研究其注冊码生成算法. 不会释出不论什么完整的源码. 网上查了下.已有注冊机,所以 ...

  6. Attribute(一)——提前定义特性

    在项目中接触到了Attribute,那么什么是Attribute,有些什么作用呢?这里来了解一下. 一.什么是Attribute Attribute 类将提前定义的系统信息或用户定义的自己定义信息与目 ...

  7. matplotlib 可视化 —— 定制画布风格 Customizing plots with style sheets（plt.style）

    Customizing plots with style sheets - Matplotlib 1.5.1 documentation 1. 使用和显示其他画布风格 >> import ...

  8. 爬虫--pyquery使用

    强大又灵活的网页解析库. 初始化   字符串初始化 html = ''' <div> <ul> <li class="item-0">first ...

  9. ng-show ng-hide ng-if的区别

    用途 ng-show ng-hide ng-if三个都可以用来控制页面DOM元素的显示与隐藏. ng-hide条件为true时,隐藏所在元素,false时显示所在元素. ng-show相反,条件为tr ...

  10. 几个提高效率的PHOTOSHOP秘密快捷键

    1.拖动选择 使用矩形选框工具,在画布上拖动(不要松开鼠标),这时按住空格键,然后移动鼠标,你会发现选区也跟着移动了. 2.左右流量文档 按住Cmd(Ctrl)键,上下滚动鼠标,你会发现文档的滚动条在 ...