有人在代码里下毒，啊……
0%

发表于 更新于 Valine：

new Array(8).map(i=>[])这种声明二维数组的方式会报错

改成 new Array(8).fill().map(i=>[])即可

报错的原因是 new Array 产生的数组比较特殊 有length 但是没有内容，所以无法迭代

不过我一般用 Array.form({length:8},i=>[])这么初始化

发表于 更新于 Valine：

目前博客存在的问题

github pages服务部署,国内访问很慢,github防止百度爬虫不收录

解决

使用netlify可以做静态网站的cdn部署

使用方法

  1. 使用github账号登录netlify
  2. 授权netlify访问需要部署的仓库与分支
  1. 如果有自己的域名,在DNS解析服务器上,CNAME解析到netlify提供的域名即可

验证

ping 一下自己的域名,看下真实地址对不对就可以的

netlify官网

https://www.netlify.com/

发表于 更新于 Valine：

babel,垫片是什么?

  1. babel 是用来把ES6,ESNext语法转换成ES5语法的,本身没有垫片的功能
  2. 垫片就是给一些低版本的浏览器实现一些新的API,比如数组的includes find,Promsie等实现
  3. @babel/polifill 这个垫片是babel官方提供的,相当于全量引入了长期支持的API,以及使用了的部分API
    1
    2
    3
    4
    import "@babel/polyfill";
    // 等同于下面两句
    import "core-js/stable";//长期支持的
    import "regenerator-runtime/runtime";//部分使用的
  4. 目前我们一般用 @babel/preset-env根据使用的API动态的使用垫片,项目中没用过的就不用垫了。
  5. core-js是一个专门的垫片仓库
  6. @babel/preset-env 的配置项 useBuiltIns有entry 与 usage两个选项,默认值是false,全量引入，体积最大。
  7. entry需要手动在代码入口加上 import '@babel/polyfill',表示按照目标兼容浏览器版本全量加载，体积小一些。
  8. usage表示根据API按需加载，体积最小。
  9. @babel/preset-env的配置项 corejs:2默认是2.x,如果需要使用core-js@3需要修改这个配置项corejs:3
  10. babel在转换语法的时候会自动生成一些辅助函数,这些辅助函数大量重复存在
  11. core-js的垫片会直接修改API 的原型与全局方法
  12. @babel/plugin-transform-runtime插件会做两件事,第一辅助函数一次性引入,防止重复。第二，垫片作为闭包方法调用，防止全局污染

最佳实践的babel配置

npm i @babel/core、@babel/preset-env @babel/runtime-corejs3 @babel/plugin-transform-runtime

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage"
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3 // 指定 runtime-corejs 的版本，目前有 2 3 两个版本
      }
    ]
  ]
}

总结

core-js 是一个通用的垫片仓库,babel的垫片相关功能依赖core-js

http://www.ruanyifeng.com/blog/2016/01/babel.html

发表于 更新于 Valine：

使用 matchMedia API找到 MediaQueryList 对象

1
2
3
4
let  mqList = window.matchMedia("(prefers-color-scheme:dark)")
if(mqList.matches){//匹配上了,说明windows使用的是黑暗主题模式
  // TODO: 将我们网页的主题设置成暗黑模式
}

参考

  1. 媒体查询的类型 https://developer.mozilla.org/en-US/docs/Web/CSS/@media
  2. matchMediaAPI介绍 https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

发表于 更新于 Valine：

场景

A组: 维护一个UI组件库
B组: 维护一个单页APP,内部有很多公共函数库,业务相关组件
C组: 新建一个单页APP,需要用到A组的UI组件库,B组项目的公共函数库,部分业务组件

前端模块化的现有方案

A组将UI库发布到npm仓库,B组将公共函数库作为单独的npm包发布,业务组件拷贝一份到C组的代码库

问题

  1. B组的改动量大
  2. B组每次公共函数库的改动,需要通知到C组重新发布
  3. 业务组件改动,BC两组都要进行修改

解决

函数库与业务组件都打成umd模块放到静态资源服务器上,C组以script标签动态引入,以AMD模块的使用方式从window作用域下使用

继而产生的后续问题

  1. 污染window作用域下命名空间
  2. 打出来的umd模块需要是完整的,包含全部依赖,体积很大
  3. 随着要封装暴露的entry越来越多,打包时间越来越长

Module Federation 模块共享解决方案

B组项目修改webpack配置,将公共函数库,公用的业务组件使用ModuleFederationPlugin 插件配置成共享模块

B组项目webpack配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 假设B组的页面部署到 www.baidu.com/businessB/

const {ModuleFederationPlugin}=require("webpack").container
const config = {
   ...otherConfigs
  plugins: [
    new ModuleFederationPlugin({
      name: "appB",
      filename:"remoteEntry.js",
      exposes: {
        './util': './src/util', //需要共享的公共函数库 
        './hero-list': './src/components/hero-list',//需要共享的业务组件 英雄列表
      },
    })
  ]
}

C组使用ModuleFederationPlugin 插件配置配置B组发布到环境上的远程模块

假设C组的页面部署到 www.baidu.com/businessC/

C组项目webpack配置
1
2
3
4
5
6
7
8
9
10
const config = {
   ...otherConfigs
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        appB: "appB@//www.baidu.com/businessB/remoteEntry.js"
      }
    })
  ]
}
C组的主页面
1
2
3
4
<head>
  <script src="/businessB/remoteEntry.js" defer></script>
  <script src="./main.js"></script>
</head>
main.js
1
2
3
(async function(){
  let util = await import('appB/util')
})()
component.vue
1
2
3
4
5
6
7
<script>
export default {
  components:{
    heroList:()=>import("appB/hero-list")
  }
}
</script>

完整的 DEMO

https://stackblitz.com/github/webpack/webpack.js.org/tree/master/examples/module-federation?terminal=start&terminal=

external-remotes-plugin 可以从window作用域下动态获取远程仓库的地址

https://www.npmjs.com/package/external-remotes-plugin

host config
1
2
3
4
5
6
7
8
9
10
11
12
const config = {
   ...otherConfigs
  plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      remotes: {
        app2: "app2@[window.app2Url]/remoteEntry.js"
      }
    }).
    new ExternalTemplateRemotesPlugin(),
  ]
}
host main.js
1
2
3
window.app2Url = "//localhost:3002"; // Whatever the url/logic to determine your remote module is

import("./bootstrap");

发表于 更新于 Valine：

页面跳转的时候,处于异步请求的接口会自动被去取消掉，但是单页应用没有这种机制。我们需要手动实现。
axios是基于Promise的。本身对外暴露了一个 cancelToken的配置项用于取消,实际开发中需要在路由跳转的钩子中使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
     // 处理错误
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

底层实现主要依靠

xhr abort
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/abort

AbortController与fetch
https://developer.mozilla.org/zh-CN/docs/Web/API/AbortController

发表于 更新于 Valine：

原文: https://owasp.org/Top10/zh_TW/

1. 权限失效

  • 横向越权 A用户能查看,编辑B用户的数据
  • 纵向越权,特权提升 租户能看到管理员的数据,普通用户能看到租户的数据,未登录的用户能看到登录用户的功能
  • 通过修改URL,应用状态,不应该访问到的页面可以被访问到,通过API攻击工具,绕过页面鉴权
  • CROS配置错误,可以让未经授权的API存取

2. 加密机制失效

  • 使用了老旧的加密算法
  • 密码多系统重复使用
  • 明文存储密码
  • 以http smtp fpt 等协议明文传输
  • 使用默认密码
  • 密码过期机制
  • 密码没有被加盐加密存储

3. 注入攻击

  • 使用者提供的数据应该被处理,验证,过滤后保存
  • 查询参数没有被转义,尽量做到无参数调用
  • ORM 对象查询参数注入
  • SQL注入

4. 不安全设计

  • 使用安全问题找回密码,可能问题不止本人一个人知道
  • 预定团体票折扣,没有设置最大人数限制，而且押金只需要支付15人。被人恶意一次性订购了600张电影票，或者全部的电影票
  • 订票软件没有防机器人抢票，票都被黄牛抢了

5. 安全配置错误

  • 启用或安装了不必要的功能（例如，不必要的端口、服务、页面、帐户或权限）。
  • 启用了默认账户密码，且未被修改
  • 云服务配置错误
  • 错误堆栈直接暴露到客户端，比如默认的500返回
  • 对于已升级的新系统，最新的安全功能处于禁用状态或未安全配置。
  • 应用程序服务器、应用程序框架（例如，Struts、Spring、ASP.NET）、库、数据库等中的安全性设置未设置为安全值。
  • 服务器不发送安全标头或指令，或者它们未设置为安全值。

6. 危险或过时的组件

  • 定期升级，维护软件依赖
  • 删除未使用的依赖项
  • 测试软件升级后的兼容性
  • 使用官方安全来源获取组件
  • 订阅使用组件的安全漏洞的邮件警报

7. 认证和验证机制失效

  • 密码被暴力破解,自动攻击
  • 默认密码、弱密码、
  • 在url中公开会话标识符
  • 成功登录后重用会话标识符
  • 会话失效后,SSO没有注销登录

8. 软件及数据完整性失效

  • 使用三方CDN,不安全的CI/CD管道,但是三方依赖被修改了,使用数字签名来避免

  • npm Maven 使用受信赖的源

  • 使用软件供应链安全工具 OWASP CycloneDX

  • 代码检查

  • CI/CD过程的权限控制,隔离控制,比如特定程序才有执行权限,目录权限

  • 未被签名或者未被加密的序列化数据发送到不受信任的客户端(比如使用了云服务的静态资源托管,上传完成后应该把文件签名保存下来,下载之前应该比对签名后,再发送到客户端)

    9. 安全日志记录及监控失效

  • 确保所有登录、访问控制和服务器端输入验证失败都可以使用足够的用户上下文进行记录，以识别可疑或恶意帐户，并保留足够的时间以允许延迟取证分析。

  • 确保以日志管理解决方案可以轻松使用的格式生成日志。

  • 确保对日志数据进行正确编码，以防止对日志记录或监视系统进行注入或攻击。

  • 确保高价值事务具有具有完整性控制的审计跟踪，以防止篡改或删除，例如仅追加数据库表或类似内容。

  • DevSecOps 团队应建立有效的监视和警报，以便快速检测和响应可疑活动。

  • 建立或采用事件响应和恢复计划，例如美国国家标准与技术研究院 （NIST） 800-61r2 或更高版本。

10.服务器端请求伪造(SSRF)

服务器A与服务器B在内网连接,服务器A对外提供服务,且有SSRF漏洞,攻击者通过服务器A获取服务器B的相关信息。

危害

  • 利用file协议读取本地文件
  • 对服务器所在内网、本地进行端口扫描，获取一些服务的banner信息
  • 攻击运行在内网或本地的应用程序
  • 对内网web应用进行指纹识别，识别企业内部的资产信息
  • 攻击内外网的web应用，主要是使用HTTP GET请求就可以实现的攻击

协议

  • file协议： 只能读取当前被攻击机的文件，内网机器文件不能读取

  • dict协议：泄露安装软件版本信息，查看端口，操作内网redis服务等

  • gopher协议：gopher支持发出GET、POST请求。可以先截获get请求包和post请求包，再构造成符合gopher协议的请求。gopher协议是ssrf利用中一个最强大的协议(俗称万能协议)。可用于反弹shell

  • http/s协议：探测内网主机存活

发表于 更新于 Valine：

next的极简风我还是挺喜欢的，但是不喜欢这个黑白主题，死气沉沉的，我想给他换个色调。

  1. 首先找到喜欢的色调图片
  2. https://coolors.co/ 打开调色网站
  3. 修改主题配置
    source/_data/next.yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    custom_file_path:
      #head: source/_data/head.njk
      #header: source/_data/header.njk
      #sidebar: source/_data/sidebar.njk
      #postMeta: source/_data/post-meta.njk
      #postBodyEnd: source/_data/post-body-end.njk
      #footer: source/_data/footer.njk
      #bodyEnd: source/_data/body-end.njk
      variable: source/_data/variables.styl
      #mixin: source/_data/mixins.styl
      #style: source/_data/styles.styl
  4. 新建文件 source/_data/variables.styl
  5. 下面是默认色
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    :root {
      --body-bg-color: #f5f5d5;
      --content-bg-color: #f5f5d5;
      --card-bg-color: #f5f5f5;
      --text-color: #555;
      --blockquote-color: #666;
      --link-color: #555;
      --link-hover-color: #222;
      --brand-color: #fff;
      --brand-hover-color: #fff;
      --table-row-odd-bg-color: #f9f9f9;
      --table-row-hover-bg-color: #f5f5f5;
      --menu-item-bg-color: #f5f5f5;
      --btn-default-bg: #fff;
      --btn-default-color: #555;
      --btn-default-border-color: #555;
      --btn-default-hover-bg: #222;
      --btn-default-hover-color: #fff;
      --btn-default-hover-border-color: #222;
    }

修改后面这个文件就行了,但是我还没想好合适的颜色

source/_data/variables.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$body-bg-color   = #BEE7E9 
$content-bg-color   = #a1e6e9  
// $card-bg-color   = #
// $text-color   = #
// $blockquote-color   = #
// $link-color   = #
// $link-hover-color   = #e4393c
// $brand-color   = #
// $brand-hover-color   = #
// $table-row-odd-bg-color   = #
// $table-row-hover-bg-color   = #
// $menu-item-bg-color   = #
// $btn-default-bg   = #
// $btn-default-color   = #
// $btn-default-border-color   = #
// $btn-default-hover-bg   = #
// $btn-default-hover-color   = #
// $btn-default-hover-border-color   = #

发表于 更新于 Valine：

妹妹经常外出做音乐表演，需要伴奏，但是从酷狗下载的音乐很多都没有纯伴奏版本，全民K歌这种软件也没有这种伴奏下载的功能。

作为一个程序员哥哥，妹妹的请求总不能说不会搞吧！！也不想花钱买，于是找了下资源。

网上找了这两个可以用来分离原声与伴奏。

开源音频分轨 Python https://github.com/deezer/spleeter

在线分轨网站（推荐） https://ezstems.com/ 这个应该是用上面的技术搞得，本来还有个网站的，收藏夹没找到，下次找到了再分享出来！！

发表于 更新于 Valine：

https://baijiahao.baidu.com/s?id=1714115486438973511&wfr=spider&for=pc

前端能用到的

Svelte

编译时前端框架，拥有SSR的性能，但是不需要服务器,编译结果仍然是纯粹的静态资源。

vue的petite-vue项目也值得关注下，我觉得也够用了。由于web component 标准慢慢被主流浏览器支持，后面的趋势应该是各种框架都编译成 web component，进行发布。

FastAPI

用于快速构建API，完全兼容 openAPI Python项目

Apache Superset

作为企业数据收集与展示仓库，支持很多图表，开箱即用。突然发现里面的功能很多跟三朵云里面数据集的功能一致呀！我们SE在这上面找设计灵感？？

PostHog

监控软件，应该跟打点埋码相关吧，另外推荐个异常监控系统 哨兵 sentry

剩下的都是些 AI 深度学习 集群 分布式 数据管理相关的开源项目了。