#ブラウザのJavaScript #JavaScript #暗号 #セキュリティ

Web Crypto API - Web APIs | MDN

以下のように、GitHub Actionsの公式ページに書かれている。

このような使用制限違反や、GitHub Actionsの悪用を防ぐために、GitHubはGitHub Actionsの使用を監視する場合があります。

引用元: GitHub Actionsについて - GitHub ヘルプ

公開しているリポジトリなら元々誰でもログ見れると思うし、シークレットな環境変数とか以外なら基本的に見られても問題ないはず。

だが、GitHubもGitHub Actionsを使って悪いこと（GitHub Actionsでの許されない行為 - マイニング、コンピューティングなど）を見張るためにも監視が必要なのは納得できる。人が見ることもありそう。プライベートリポジトリでも勿論監視したいと思っていると思う。プライベートほど悪いことされそう。そうなってくるとプライバシー的な問題もある。

#GitHub_Actions

この（https://github.com/nwtgck/github-actions-use/runs/428417078?check_suite_focus=true）GitHub Actionsに関して、以下の値が入っていた。本当は/runs/以降の値が入っていることを期待したが、そうはなっていなかった。

GITHUB_RUN_ID: 35211189

GITHUB_RUN_NUMBER: 68

以下コードで検証した。

#GitHub_Actions

法律違反、またはそれ以外で当社の利用規約またはコミュニティガイドラインに反しているコンテンツまたは行為

クリプトマイニング

サーバーレスコンピューティング

GitHub ユーザまたは GitHub サービスを危険にさらす行為

#GitHub_Actions

JavaScript Action/TypeScript Actionなら、

以下のようにするのが良さそう。"ブランチ名"は変数にしてそれと同じ時に実行されるようにできる。

もしくは、

@actions/githubを使って以下のように書ける。

#Piping_Server #まとめ

Piping Serverの活用事例とか。

「pipnig server」でググったりして見つけたものTwitterで検索したもの。

どこに行ったか分からなくなっちゃわないように一箇所にメモしたいという目的。

Piping Server を介した双方向パイプによる，任意のネットワークコネクションの確立 - Qiita

#DefinitelyTyped #GitHub #Qiita投稿

Qiita投稿：

（ほぼ同じ投稿だが、ここのほうが経緯がより詳細ないので、経緯だけは残したほうがいい部分。削除テンプレートに関してもQiitaでは触れてない。テンプレートはPR出す人が読んだほうがいいものなはずなので。）

（これはまとまったら、Qiitaに投稿するはず（これは多くの人が知ったほうがハッピーなはず））

（PRがマージされてないので、内容は完璧に正しいことを保証してない。とりあえずどういう流れだったかを書く）

#GItHub #GitHub_Release #制限

公式のドキュメント:

公式のドキュメントによると、

全体（トータル）でのサイズの制限はない

1つのファイルは2GBより小さくないといけない

#GitHub

以下のようなURLを指定するとすっきりとしたリポジトリ一覧が得られる

https://github.com/ユーザー名/repositories

具体例：

普通にとどれるだとアバターアイコンの主張が強すぎたり、

#制作物

ブラウザ上でRuby(厳密にはOpal)やJavaScript (ES2017)が動かせる環境。

プログラムがすべてURL上に載る。そのため、サービス停止などでもプログラムは無事。

このサービス停止でもコードが失われないようにすることが、Nippの一番の目的。

日本語記事

#Dependabot #GitHub #npm

以下が該当コミット

https://github.com/nwtgck/fakelish-web/pull/3/commits/da0ccc28321c5913a1b739d20ed9b5ef1b5b66c5

以下が該当PR

[https://github.com/nwtgck/fakelish-web/pull/3/

#命名

自分が作るリポジトリとかの命名規則とかそうしている理由について。

なぜサフィックスか？

以下のような命名にする理由

oo-ooo-haskell

#GitHub #API

https://api.github.com/

短いのにいつも忘れるし、APIをググるとURLの情報がなくて困るのでメモ。

#GitHub_API #GitHub

?access_token=を使えばいい

例：

curl -I https://api.github.com/repos/nwtgck/piping-server?access_token=xxxxxx

#emoji #Nipp #GitHub

新2020/2/8:

旧:

#GitHub #サービス

#Windows #コマンド #PowerShell

参考: https://doc.rust-jp.rs/the-rust-programming-language-ja/1.6/book/testing.html

#Python

Python 3.5以上だと以下のpathlibの.rglob()が使える。

参考: python - How to use glob() to find files recursively? - Stack Overflow

pathlib.Path(...).rglob(...)はgeneratorを返してくれる。上記ではすぐに出力のためにリストにしている。

PosixPathを文字列に変換する

#Windows #コマンドプロンプト

以下のコマンドで2000バイトのmyfileが生成される。

参考: Generating Random Files in Windows - Stack Overflow

#CVE-2020-0601 #Windows #脆弱性 #セキュリティ #楕円曲線 #数学

Windows CryptoAPIの脆弱性によるECC証明書の偽造(CVE-2020-0601) - ぼちぼち日記

「仕組み知りたいな」って思っていたのですごくありがたい記事。

関連: 今すぐWindows 10をアプデして！NSAすら警戒するヤバい脆弱性 - ライブドアニュース

データ転送をするためのサーバー。

サーバーを経由するのは、あらゆる環境でNAT超えを実現するため

HTTPを使うのは、多くのデバイスに対応するため

何らかの連絡先を知らなくても転送できるようにアカウントなし。

データは保存されずストリーミングされ必要以上に情報を取らない。

#楕円曲線ディフィー・ヘルマン鍵共有 #Web_Crypto #JavaScript #セキュリティ #TypeScript #ブラウザのJavaScript

window.cryptoを使ってブラウザで鍵の生成、共有・暗号化をするときに使える例。

TypeScriptで書いてるので、型を消去すればJavaScriptでも使える。

以下のrawとdecryptedが同じ[1, 2, 3]になることが確認できればOK。厳密には型がUint8ArrayとArrayBufferで違うが、合わせたくなったときに簡単に合わせられるのでここでは簡単のために触れない。

途中に出てくるaPublicKeyJWKやbPublicKeyJWKはJSONで、JSON.stringify()すればネットワーク経由で渡せる。bRemotePublicKeyはネットワーク経由で渡ってきたものを使ってると解釈すればOK。

#Web_Crypto #ブラウザのJavaScript #セキュリティ

やりたいこと

ブラウザのJavaScriptだけでWeb Cryptoを使って安全にパスワードによる暗号化をしたい。

Web CryptoはWeb標準の機能で動く。

やりかた

#Web_Crypto #SHA256 #ダイジェスト #メッセージダイジェスト #ハッシュ #ブラウザのJavaScript

やりたいこと

サードパーティー製のライブラリを使わずに標準のライブラリだけでハッシュを計算したい。

Web標準で使えるWeb Cryptoを使えばできる。

方法

#ブラウザのJavaScript

主要なブラウザでTransformStreamが存在しない場合がある（Safariなど）

暗号化・復号をストリーミングしながらできない

ReadableStreamとかを暗号化する機能をWeb CryptoやStreams APIで標準提供されていない

ストリーミングしながら暗号化・復号したい！ - Firefox Sendのストリーム暗号化の裏側を活用するの方法を使うと可能ではある

[SecureContext]属性

以下は例。

引用元: Secure Contexts

以下はWeb Cryptoの例。interfaceの上についている。

これはcrypto.subtle自体がSecure contextsではないと使えないからだと思う。

#Web_Crypto

diafygi/webcrypto-examples: Web Cryptography API Examples Demo: https://diafygi.github.io/webcrypto-examples/

#Web_Crypto

It sounds like deriveKey is just a composition of deriveBits and importKey. There is no cryptographic difference between ‘generating an AES256-CTR key’ and ‘generating 256 bits uniformly at random’—this is at most an API distinction.

引用元: key derivation - Web Crypto API - deriveKey vs. deriveBits? - Cryptography Stack Exchange

「deriveKeyはderiveBitsとimportKeyの組み合わせのようだ」言っていると思うのでderiveKeyは内部でderiveBitsを使っている思う。バイト列から適切に整形してkeyに変換するのは自然なことなので納得がいく。

#Web_Crypto #ライブラリ

PeculiarVentures/webcrypto-liner: webcrypto-liner is a polyfill that let's down-level User Agents (like IE/Edge) use libraries that depend on WebCrypto. (Keywords: Javascript, WebCrypto, Shim, Polyfill)

で実際に現在のブラウザでの対応が見れる。

<script src="src/webcrypto-liner.min.js"></script>がソースにあるのでこのライブラリが使われた状態での対応状態が分かるのだと思う。

ECDHでの鍵導出をEdgeでもやりたい。

#Web_Crypto #AES-GCM #セキュリティ

Nipp:

動きが分かりやすいものの一部はここにまとまってるかも知れない:

Scala

Akka HTTP/Slick/JGitを使ったMarkdownでノートが取れるサーバーサイド（非オープン）

Akka HTTPを用いたHTTPベースのファイル転送サーバー

GitHub:

やりたいこと

元々「Vue + TypeScriptで非同期な算出プロパティを使いたい！ - Promiseとかasync-await - Qiita」を使ってTypeScript + Vue でvue-async-computedに対応している状態。

vue-async-computedは3.8.1 で TypeScriptに対応した。

厳密には3.8.0で対応したけどtypesディレクトリがpublishされていない不具合があった。

詳細:

#TypeScript #DefinitelyTyped #Node.js #HTTP/2 #思考

（思考がついているのは、解決したわけではないから）

まず、Node.jsのhttp2にはCompatibility APIが用意されている。

これのおかげで、JavaScriptでNode.jsを使うときには、同じハンドラーをhttp2.createServer()に渡せば、HTTP/2対応できる互換性がある。ただ、ダックタイピングで実現している（全JavaScriptそうかもだけど）ので、執筆時のTypeScriptの型定義だと、ハンドラーの型が合わなくて、コンパイルエラーする。

執筆時のDefinitelyTypedだと、http.createServer(handler)とhttp2.createServer(handler)の型定義で使われているhandlerに互換性がない。

#Mocha #Node.js #アロー関数 #arrow_function #TypeScript

理由

Machaコンテキストを使う場合に正しく動かないからとのこと。

なぜ使ってほしくないかの公式による説明：

アロー関数使ってもいいかどうか？

#TypeScript #型安全

以下のような感じで、Jsonの型が欲しくなるときがある。

標準で提供してないか調べたら、GitHubにissueがあった。

2015年に作られて、まだopenの様子。

#TypeScript #Mocha #tsconfig.json

以下のように環境変数TS_NODE_COMPILER_OPTIONSを変更すればOK.

参考：

#TypeScript #Union_Type

確か、良くない例をどこかの型定義で見て、意図的にやっていると思い、それに近い型定義を追加するときに真似て分けて書いた。以下の型定義だった。

どういう意図かは分からなくてもなるべく従うほうが良いと思った。すぐに思いつくのは一行を長くしないようにして可動性を向上すること。だが、ある引数がUnion Typeでまとめられると明示がより可読性が高いとも思うので、これらの判断は難しいなとも思っていた。

個人的にはUnion Typeを使うほうが好み。そしてMicrosoft公式もUnion Typeを使うようにと言っている。

#TypeScript

TSJS-lib-generatorで管理されている。

このリポジトリを変更すべきぽい。

経緯

ReadableStreamReadResult<T>を更新したかった。

#Piping_Server #TypeScript

はじめに

Piping Serer、作り始めはとってもシンプルだったけど、

ユーザーのコネクション切れたときの処理や

ブラウザ用に伝えないといけないHTTPヘッダ

#TSLint #TypeScript

ググるのでメモ。

#TSLint #TypeScript

ググるのでメモ。

#TSLint #TypeScript

#TSLint #TypeScript

53:3 Declaration of private instance field not a ...とかとTSLintのエラーするときに、disableにするキーワードを毎回調べてるの面倒だし、何度も使わないやつは忘れるし、ESLintでもTypeScript対応する噂聞いて覚える意欲があるわけではないので、キーワード表示してほしい。キーワードが正式名所かはわからない。no-consoleみたいなものを指している。

#TSLint #TypeScript

#TypeScript

ここのハンドブックに紹介されているDiff型は、標準にないので自分でコピペして使う感じになる。

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html

でもDiffは使うごとにコピペするのはあまり好ましくないので、探してみるとExcludeという名前で存在している。

以下のDiffとExcludeの型を見てわかるように同じ定義。

#TypeScript

方法

こちらのStack Overflowの回答がシンプル。安全性の強化のためKを改良している。後述する。

reactjs - TypeScript: remove key from type/subtraction type - Stack Overflow

PickとExcludeはTypeScript標準定義されている。

#TypeScript

https://www.typescriptlang.org/play/#src=type%20NonEmpty<T>%20%3D%20%5BT%2C%20...T%5B%5D%5D%3B%0A%0Aconst%20a1%3A%20NonEmpty<number>%20%3D%20%5B1%2C%202%2C%203%5D%3B%0Aconst%20a2%3A%20NonEmpty<number>%20%3D%20%5B1%5D%3B%0Aconst%20a3%3A%20NonEmpty<number>%20%3D%20%5B%5D%3B%20%2F%2F%20compile%20error%20GOOD!%0A

元:

#TypeScript

WIP

実際にmatmulを呼び出すコードを書くと"Type instantiation is excessively deep and possibly infinite."というコンパイルエラーを起こす

matmulの実装

もと：https://twitter.com/nwtgck/status/1136458154290470912

#PWA #Service_Worker #Vue

Keep in mind that the skipWaiting option is not available when the workbox plugin mode is set to InjectManifest.

引用元: javascript - Vue PWA not getting new content after refresh - Stack Overflow

実際に、workboxPluginMode: 'InjectManifest'で上記のように.workboxOptions.skipWaiting: trueを指定すると以下のようにエラーする。

#icon #アイコン #マテリアルデザイン

以下でインストール。

mdi-accountの代わりにimport { mdiAccount } from '@mdi/js'のように必要なアイコンを適宜インポートできる。

bundleのサイズに削減にもなって初期描画が早くなりそう。

You can custom import only the icons you use granting a much smaller bundle size.

#Vue_CLI #Vue #Service_Worker

Vue CLIを4にあげてから生成したWebアプリをビルドして手に入れた自動生成のService Workerのコード。

#Vue_CLI #Vue #Service_Worker #自動生成

#vue-filepond #FilePond #Vue #ブラウザのJavaScript

以下で出来る。

<file-pond :allow-paste="true" />。

FilePond自体には、allowPasteという存在がある。

filepond/options.js at 4536ded0d51cd81afdf1dbaefa602a9a5958bf79 · pqina/filepond

#Vue

複数のタグをまとめたいけど、<span>や<div>を使いたくない時の方法。

<template>は別にトップレベルでなくても使える。

参考: 条件付きレンダリング - vue.js

例：https://codepen.io/nwtgck/pen/pooxeqQ?editors=1011

「A Guide to inject variable into your code using webpack」を参考にしている。

この方法はVue(Webpack)でビルド決定したいJavaScriptのコードがある時に使える。

やり方

以下のようにvue.config.jsを書き加えれば、MY_VARというグローバル変数がビルド時に決まってランタイムで使える。

新しいプラグインなどをインストールする必要はない。

#Service_Worker #npm #PWA

やりたいこと

Service Workerでロジックを書く機会が多くなってくると既存のnpmパッケージをimportして使いたくなる。

ここではVueと@vue/cli-plugin-pwaを使っているプロジェクトでそれを実現できたのでそれについて書く。

やりかた

#vue-cli #vue #Nullish_Coalescing

公式リリースノート:

Release v4.2.0 · vuejs/vue-cli

'@babel/plugin-proposal-nullish-coalescing-operator' プラグインを抜いた時の変更:

build(deps-dev): bump @vue/cli-ooo from 4.2.2 by nwtgck · Pull Request #235 · nwtgck/piping-ui-web

#Vuetify #Vue #ダークテーマ

以下がとてもシンプルで参考になる。

1.5系: Dark Theme Switch - Vuetify v. 1.5.x

2系 Dark Theme Switch - Vuetify v. 2+

Vuetify 2だと<v-app :dark="true">は機能していないように見える。

#Vuetify #Vue #color #色 #definition

vuetify/colors.ts at 3a9fdc292af97c98be91c014bde1fac40a96e865 · vuetifyjs/vuetify

#Vuetify #Vue

class="ma-0"やclass="pa-0"を使う。

参考: javascript - How to remove padding or margin in Vuetify? - Stack Overflow

#sass-loader #Sass #Vuetify

bulletmark commented 21 days ago

I'm just a simple regular user of vue-cli. I updated my project today to 4.0.1 but I get a yellow warning on npm run serve saying "A new version of sass-loader is available. Please upgrade for best experience." So I upgrade sass-loader@7.3.1->8.0.0 but then I get crashes same as @pdoria above.

I added that css stanza to my vue-config.js but it does not fix the problem.

#Vuetify #SCSS #SASS #ダークテーマ

やりたいこと

Vuetify 2.2.5でダークテーマの黒がより黒くなった。

個人的にマットな感じの前のダークテーマが好みでVuetifyを気に入っていたところがあるのでVuetify 2.2.5でも以前のダークテーマの色になるようにSCSSを書き換えたい。

情報集めていたページはここ: Vuetify 2.1.8からVuetify 2.2.5での変更でダークテーマの黒がすごく黒くなった件に対する情報を集める

Vuetify 2.2.6がリリースされて公式のリリースノートでこのページでやりたいことをするためのスニペットが公開された。

Release v2.2.6 · vuetifyjs/vuetify

もしかすると「Vuetify 2.2.5でダークテーマがより黒くなったのを元に戻すためのSCSSの書き換え」のときのissueが要因の一つになっているかもしれない。（他のところでも同じように意見があった可能性はある）

'app-bar': #212121だとまだ黒すぎだたので#424242にしている。だが2.2.5で上記のスニペットを適用するとapp-barが黒すぎたりはしない。でも2.2.6で適用すると黒すぎる状態になる。詳しい理由は不明だが2.2.6の何らかの変更でこういう影響が出ている様子。また今後のリリースで解決する可能性もある。