第13期 — 2019-07-29

在浏览器中阅读

周e信

扫描二维码关注微信公众号

Node.js

最全 HTTP 安全响应头设置指南🔗
  • Content-Security-Policy(CSP)CSP 通过指定允许加载哪些资源的形式,来防止跨站脚本注入

  • Strict-Transport-Security(HSTS)该响应报头告诉浏览器,只能通过 HTTPS 访问网站

  • X-Content-Type-Options 该响应报头确保浏览器遵守应用程序设置的 MIME 类型。这有助于防止某些类型的跨站脚本注入攻击。

  • Cache-Control(缓存控制)

  • Expires(过期时间)该响应报头能设置当前请求缓存的过期时间。如果设置了 Cache-Control 的 max-age 响应报头,它将会被忽略,因此,在不考虑使用 Cache-Control 而进行本地缓存测试时,才设置它。

  • X-Frame-Options 该响应报头用来表明站点是否允许在 iFrame 中展示。

  • Access-Control-Allow-Origin 通过该响应报头可以告诉浏览器,允许哪些其他站点的前端 JavaScript 代码对页面发出请求。

  • Set-Cookie 确保 cookie 仅能通过 HTTPS(加密)传送,并且不能通过 JavaScript 访问。

Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnly

  • X-XSS-Protection 该响应报头用来指示浏览器停止执行跨站脚本攻击检测。

Charlie Belmer 译者 刘雅梦

Node.js 12.7.0 发布,服务器端的 JavaScript 运行环境🔗

Node.js 12.7.0 已经发布,Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。更新内容如下:

  • deps: nghttp2 升级到 1.39.1 npm 升级到 6.10.0
  • esm: 实现 pkg-exports 方案。可以将一个新的 "exports" 字段添加到模块的 package.json 文件中,来提供自定义子路径别名 #proposal-pkg-exports
  • http: 新增 response.writableFinished 在 http.ClientRequest "information" 事件中公开 headers, rawHeaders 和其他字段
  • inspector: 新增 inspector.waitForDebugger()
  • policy: 添加 --policy-integrity=sri CLI 选项,以减少策略篡改。如果指定了策略完整性,但策略没有此完整性,则 Node.js 将在运行任何代码之前出错
  • readline,tty: 公开来自编写字符的各种方法的流 API
  • src: 使用 cgroup 获得内存限制。这改进了为 Node.js 进程设置内存上限的方式。在此之前,使用物理内存大小来估计所需的 V8 堆大小。此更改增加了获得 Linux cgroup 设置的内存限制的能力,docker 容器使用该限制来设置资源约束

package exports 示例:

package.json

{
  "name": "@momentjs/moment",
  "version": "0.0.0",
  "type": "module",
  "main": "./dist/index.js",
  "exports": {
    ".": "./src/moment.mjs",
    "./": "./src/util/",
    "./timezones/": "./data/timezones/",
    "./timezones/utc": "./data/timezones/utc/index.mjs"
  }
}

引用

import request from 'request';
// Loads file:///app/node_modules/request/request.mjs

import request from './node_modules/request/request.mjs';
// Loads file:///app/node_modules/request/request.mjs

import request from 'file:///app/node_modules/request/request.mjs';
// Loads file:///app/node_modules/request/request.mjs

import utc from '@momentjs/moment/timezones/utc';
// Loads file:///app/node_modules/@momentjs/moment/timezones/utc/index.mjs

afterer@OSCHINA

Javascript

几个有趣的javascript语法(提议)🔗

Optional Chaining(可选链) for JavaScript

a?.b;
// 等同于
a == null ? undefined : a.b;
// 注意 == null的判断
// null == null  : true
// undefined == null :true
// 0 == null :false
// '' == null :false

Nullish Coalescing(空值合并) for JavaScript

a ?? 'haha';
// 仅当a为null或undefined时返回'haha',否则返回a的值

Pipeline(管道)

//左边输出作为右边第一个输入
function doubleSay(str) {
  return str + ', ' + str;
}
function capitalize(str) {
  return str[0].toUpperCase() + str.substring(1);
}
function exclaim(str) {
  return str + '!';
}
let result = exclaim(capitalize(doubleSay('hello')));
result; //=> "Hello, hello!"
// 等同于
let result = 'hello' |> doubleSay |> capitalize |> exclaim;

result; //=> "Hello, hello!"

Partial Application(偏函数)

const addOne = add.bind(null, 1);
addOne(2); // 3

// 等同于
const addOne = add(1, ?);
addOne(2); // 3

这个和管道配合比较方便

let newScore = player.score
  |> add(7, ?)
  |> clamp(0, 100, ?);

Ka

前端

投稿

rcdexta

简单好用的任意元素拖动,变形,旋转工具🔗

支持原生 javascript,故支持可与任何框架整合。

提供 react 组件。

import Moveable from 'moveable';

const rotatable = new Moveable(document.body, {
  target: document.querySelector('.origin'),
  rotatable: true,
  origin: true
});

Younkue Choi

微软公布WebView2-基于CHROME的windows控件🔗

WebView2 基于 chrome,主要目的是用于在 Windows 系统原生程序中运行 web 内容。 这就官方提供了一个 hybrid(混合)程序的解决方案,类似于 ios 里的 webview。

目前预览版只支持 Win32 的 window10 版本。稍后会提供对 Windows 7+,Windows Server 2012 R2+, UWP, WFP, 和 WinForms 的支持。

Dylan Schiemann 摘译 Ka

tabulator 强大的不依赖 jquery 的表格组件🔗
  • 可整合到任何其他框架(react,vue,angular...)
  • 支持表内编辑
  • 支持排序
  • 支持过滤
  • 支持分页
  • 支持导出 csv
  • 支持列计算
  • 支持行选择
  • 支持响应式
  • 支持 IE

不依赖 jquery, 支持 npm npm install tabulator-tables --save

在线 demo

Oli Folkerd 编辑 Ka

React Hooks 使用秘笈集合🔗

Gabe Ragland

使用 pgBackRest 备份到 AWS S3🔗

pgBackRest 是 postgres 备份工具。

示例使用MinIO模拟 AWS S3 服务。

pgBackRest 配置:

[global]
repo1-path=/repo
repo1-type=s3
repo1-s3-endpoint=minio.local
repo1-s3-bucket=pgbackrest
repo1-s3-verify-tls=n
repo1-s3-key=accessKey
repo1-s3-key-secret=superSECRETkey
repo1-s3-region=eu-west-3

repo1-retention-full=1
process-max=2
log-level-console=info
log-level-file=debug
start-fast=y
delta=y

[my_stanza]
pg1-path=/var/lib/pgsql/11/data

备份 sudo -iu postgres pgbackrest --stanza=my_stanza --type=full backup

Stefan Fercot 摘译 Ka

vuetify-Material的Vue组件库🔗

✨ (2 万)还是比 elementUI(~4 万) 差不多 2 万。

Vuetify.js

简单可用的异步加载 css 的方法🔗
<link
  rel="stylesheet"
  href="/path/to/my.css"
  media="print"
  onload="this.media='all'"
/>
  • media="print"让浏览器认为此样式与渲染无关,则不等它加载完即进行下一步,达到异步加载的目的。
  • onload="this.media='all'" 当加载完后,运用到所有媒体,包括 screen,则应用了样式。

现比于rel=preload

  • rel=preload浏览器支持尚未完善
  • rel=preload优先级非常高,副作用大

如果想异步加载又想使用较高的优先级,则可混合使用:

<link rel="preload" href="/path/to/my.css" as="style" />
<link
  rel="stylesheet"
  href="/path/to/my.css"
  media="print"
  onload="this.media='all'"
/>

以前一直以为 css 是异步加载,javascript 是同步加载。实际上,css 也是同步加载,只不过下载完后对它的处理不会阻塞文档渲染。详情参见浅析前端页面渲染机制

SCOTT JEHL 编辑 Ka

react-border-wrapper 美观的边框组件🔗

在线 demo

<BorderWrapper
  borderColour="#00b88"
  borderWidth="50px"
  borderRadius="15px"
  borderType="solid"
  innerPadding="30px"
  topElement="{topElement}"
  topPosition="{0.05}"
  topOffset="22px"
  topGap="5px"
  rightElement="{rightElement}"
  rightPosition="{10}"
  rightOffset="22px"
  rightGap="4px"
  bottomElement="{bottomElement}"
  bottomPosition="{0}"
  bottomOffset="22px"
  bottomGap="4px"
  leftElement="{leftElement}"
  leftPosition="{0.9}"
  leftOffset="22px"
  leftGap="4px"
/>

Christopher Powroznik

web share api 已在ios上可用🔗

Web Share API目前在safari浏览器上已实现。

它必须要通过用户操作来触发(例如点击按钮)。 分享的站点必须是https。

function shareSite() {
    navigator.share({
        title: document.title,
        text: 'Hello World',
        url: 'https://mewebsite.com',
    })
    .then(() => {
        console.log('Share completed successfuly')
    })
    .catch((error) => { console.log(`share failed: ${error}`) });        
}

Guy Nesher 摘译 Ka

数据库

直接在 DNA 上执行 SQL 操作,已通过 PostgreSQL 验证🔗

法国通信系统工程师学校与研究中心(Eurecom)数据科学系助理教授 Appuswamy 和伦敦帝国理工学院 SCALE 实验室负责人 Heinis 等人近期发表了一篇关于在 DBMS 存储层操作 DNA 的论文《OligoArchive: Using DNA in the DBMS storage hierarchy》。

研究人员通过为 PostgreSQL 构建归档和恢复工具(pgoligodump 与 pgoligorestore)证明 OligoArchive 可以在实践中实现,这些工具执行模式识别编码和解码 DNA 上的关系数据,并使用这些工具将 12KB TPC-H 数据库归档到 DNA,进行体外计算,并将其恢复。

论文中的实验表明,使用合成 DNA 存档和恢复数据不仅可行,而且还可以利用数据库知识经验优化 DNA 编码和解码过程,甚至直接在 DNA 上执行 SQL 操作。

小编指出,未来最快的 cpu 还是基于人造脑的生物工程脑。

h4cd@OSCHINA

是时候使用BRIN索引了🔗

BRIN 索引(块范围索引,Block Range Indexes)是 PostgreSQL 9.5 版本新增的索引类型。该索引维护每一定范围内数据块的最大最小值和其他一些统计数据,当数据库查询时可根据索引的统计信息筛选出不符合查询条件的数据块,以避免全表扫描,提高性能和减少 IO。和 BTree 索引比较所占用的空间足够小,因此 BRIN 索引一般用于线性相关较强字段的精确和范围查询,如在一张很大的日志表中通过 id 或时间查询。

postgres=# create index testtab_date_brin_idx  on testtab using brin (date);
CREATE INDEX

适用于键为按顺序增长的数据。

Jobin Augustine

数据库工具SQL Fiddle, DB Fiddle🔗

SQL Fiddle, DB Fiddle 与 jsFiddle CodePen 类似,可以在浏览器上创建关系数据库 MySql,Oracle,Postgres,MSSQL,SQLite 的代码并运行,无需注册可直接分享。

SQL Fiddle 支持 MySql,Oracle,Postgres,MSSQL

DB Fidle 支持 MySql,Postgres,SQLite

目前都没有内嵌网页内部分享的特性。

Ka

MongoDB Atlas 正在整合 Transform 和 Vault🔗

整合 Transform 以加强 continuous delivery(可持续发布)能力。

整合 Vault 加强用户敏感资源的安全性。

Melissa Plunkett 摘译 Ka

其他

广告

美国网站,app 残疾人辅助功能相关诉讼增加一倍🔗

2018 年针对网站和 APP 的与美国残疾人法(Americans with Disabilities Act (ADA))相关的诉讼增长了近一倍。

WCAG 2.0 AA 要求网站提供:

  • 音频和视频的字幕
  • 机器可读文本和屏幕内容的音频描述
  • 完全键盘可操作
  • 最小对比度图片和文本
  • 可修改背景色,字体大小,字色

Ashima Dayal, Vivien Byrwa 和 Maxine Sharavsky 摘译 Ka

轻松一刻

轻松一刻

编辑 Ka

Mongo官方Golang驱动更新🔗

新版本为 1.0.4

包括:

  • 修复读取整个文件一次后,下次读取没有返回 EOF 的 bug。

  • 修复在旧版本服务器上使用指针连接泄漏的 bug

  • 修复查询错误没有包装为mongo.CommandError的 bug

  • 修复在旧版本服务器上使用 ListCollections 没有过滤索引的 bug

  • 指定连接字符串指向需要验证的数据库但没有指明凭据时的行为。(原文 Specified behavior where connection string contains authentication database but no credentials.)

编辑 Ka

扫描二维码关注微信公众号
本期阅读量