2019-07-02

2019-07-02

[2019-07-31]在GitHub上的提交贡献没有出现在profile页的Contribution统计上
[2019-07-29]lodash严重安全漏洞可触发原型污染
[2019-07-25]Nodejs中, 获取引用模块的文件信息
[2019-07-18]安卓微信小程序, 连代理时webview的https请求发不出去
[2019-07-17]单行文本使用text-align: justify;两端对齐
[2019-07-15]使用小程序插件时, 不能重写小程序全局变量Page
[2019-07-10]后端Set-Cookie如果不指定domain的话, 前端获取不了对应cookie的信息
[2019-07-04]小程序vh适配
[2019-07-03]浏览器跨域: 简单请求和非简单请求
[2019-07-02]线上出bug, 通过报错信息及本地source-map定位问题

[2019-07-31]在GitHub上的提交贡献没有出现在profile页的Contributions统计上

偶尔发现自己的提交并没有算在GitHub统计的Contributions数据里

看了一下提交记录发限一下情况

# 正常的提交记录
funkyLover committed 12 minutes ago
# 没有算Contributions的提交记录
funkyLover authored and funkyLover committed 3 hours ago

搜了一下找到这份GitHub文档https://help.github.com/en/articles/why-are-my-contributions-not-showing-up-on-my-profile

其中针对提交贡献的情况有以下说明

Commits
Commits will appear on your contributions graph if they meet all of the following conditions:

The email address used for the commits is associated with your GitHub account.
The commits were made in a standalone repository, not a fork.
The commits were made:

In the repository's default branch (usually master)
In the gh-pages branch (for repositories with Project Pages sites)

只有满足上述所有条件, 才会算在Contributions里面

最终发现是因为最近在GitHub的个人信息中改了邮件的地址, 和本地git配置中的邮件地址对不上才导致的这个问题

最后改了本地git配置的邮箱地址就解决了

git config --global user.email ahui-lin@qq.com
[2019-07-29]lodash严重安全漏洞可触发原型污染

一开始对这个漏洞没有概念, 只是单纯根据指示升级lodash而已

后面才看到 Lodash 严重安全漏洞背后 你不得不知道的 JavaScript 知识 这篇文章才完全搞懂

详细讲解可以查看原文, 这里仅做一下记录方便自己回顾

原型污染是指攻击者通过某种手段修改 JavaScript 对象的原型（prototype）

const payload = '{"constructor": {"prototype": {"toString": true}}}'

_.defaultsDeep({}, JSON.parse(payload))

对应上例，Object.prototype.toString 就会非常不安全了。

[2019-07-25]Nodejs中, 获取引用模块的文件信息

场景如下

// a.js
module.exports = () => {
  // 在这里如何获取引用a模块的模块b的文件信息, 如b文件的完整路径
}

// b.js
const a = require('path/to/a.js');

a();

在stackoverflow上找到的方案nodejs-get-filename-of-caller-function

function _getCallerFile() {
  var originalFunc = Error.prepareStackTrace;

  var callerfile;
  try {
    var err = new Error();
    var currentfile;

    Error.prepareStackTrace = function(err, stack) {
      return stack;
    };

    currentfile = err.stack.shift().getFileName();

    while (err.stack.length) {
      callerfile = err.stack.shift().getFileName();

      if (currentfile !== callerfile) break;
    }
  } catch (e) {}

  Error.prepareStackTrace = originalFunc;

  return callerfile;
}
[2019-07-18]安卓微信小程序, 连代理时webview的https请求发不出去

出于安全考虑, 从微信7.x版本开始小程序就不再信任用户的本地证书

就是你手机连着代理想再本地调试时, 会发现请求都发不出去

后来好像调整成了开发版和体验版下, 打开调试模式, 就能正常连代理进行

但是webview下如果连了代理, 好像打开调试也没有办法发出https请求, ios下倒是没有问题能正常调试

已反馈官方, 坐等修复

[2019-07-17]单行文本使用text-align: justify;两端对齐

css规范中可以使用text-align: justify;来是文本两端对齐, 但是其是作用于多行文本, 且最后一行不生效

而如果是单行文本需要两端对齐, 因其只有单行, 是第一行也是最后一行, 所以单纯设置该属性是没有效果的

目前副作用比较小的做法, 是使用伪元素添加一行空行, 使单行文本变成多行文本且非最后一行

/* https://stackoverflow.com/questions/17538151/how-to-make-text-take-full-width-of-its-container */
div {
  text-align: justify;
  /* 需要注意, 因为使用伪元素添加一个空行, 会是容器高度增加, 如果不希望高度增加的, 需要显式设置height */
  height: 20px;
}

div:after {
  content: "";
  display: inline-block;
  width: 100%;
}
[2019-07-15]使用小程序插件时, 不能重写小程序全局变量Page

很多情况下我们会重写Page变量好注入我们自己的逻辑

但是在使用小程序插件的情况下, 小程序会报错提示不能重写

如mta的小程序上报sdk, 会重写Page注入生命周期函数进行页面PV/UV统计

这个时候可能就会导致MTA统计的数据不准确等问题

[2019-07-10]后端Set-Cookie如果不指定domain的话, 前端获取不了对应cookie的信息

发现这个问题是在调试时候, 为了清除登录态在Chrome开发工具上删除了所有的cookie

但是很奇怪的发现前端发起的请求中依然有cookie信息

后来定位到是后端在Set-Cookie时并没有指定domain

如果没有指定domain的话, 在开发者工具下也不会展示对应的cookie, 使用document.cookie也无法获取到

[2019-07-04]小程序vh适配

对于单屏页面的适配方案, 可以通过vh来解决

设计以iphone7与iphone X为标准输出标注稿

小程序判断是否为全面屏, 字号不做适配, 但涉及布局的margin/padding等, 按需切换成vh/vw

/* 怕出现不支持vh的设备, 采用了较为稳妥的方式 */
.title {
    margin-top: 10rpx;
    margin-top: 0.74vh; /* 10 / 13.34 */
}

.fullscreen .title {
    margin-top: 15rpx;
    margin-top: 1.12vh; /* 1.12 / 13.34 */
}

这样可以适配绝大部分主流屏幕, 包括早期虽然屏幕宽高比为9:16, 但有虚拟按键的安卓机

如果还要适配iphone4(为你默哀), 则还需要设计输出小屏手机的标注稿

[2019-07-03]浏览器跨域: 简单请求和非简单请求

当前端进行跨域请求时, 浏览器针对简单请求和非简单请求有不同的处理

如果为简单请求, 浏览器会把直接发送, 而如果是非简单请求, 浏览器会先发一个OPTIONS请求确认服务器支持CORS, OPTIONS请求成功之后才会帮我们发出真正的业务请求

而只要满足以下所有条件即为简单请求

  1. 请求方式只能是: GET, POST, HEAD
  2. 不得人为设置下面集合以外的HTTP请求头字段
    • Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Date, Viewport-Width, Width
  3. Content-Type只能取以下值
    • application/x-www-form-urlencoded, multipart/form-data, text/plain
  4. 请求中的任意XMLHttpRequestUpload对象均没有注册任何事件监听器
  5. 请求中没有使用ReadableStream对象
[2019-07-02]线上出bug, 通过报错信息及本地source-map定位问题

前端代码上线时不能把source-map同时上线, 因为source-map里包含了源码的信息, 只要通过工具就可以还原源码, 造成源码泄露

一般而言都需要搭配监控体系来完成生产, 生产环境报错会记录到监控后台, 获取到错误堆栈信息再通过source-map的api即可定位源码信息

大家可以查阅《线上出bug了？别怕，这么定位！》这篇文章后半部分内容.