ポストjQueryの要件

jQueryからの脱却が叫ばれる所以はクエリによりカプセル化の境界を簡単に逸脱する局所性のなさ、また要素やコンポーネント間の連携を求めるにはクエリでは対象の存在も同一性も不確実すぎるなどの理由から大規模なコードベースを構築できないためです。これを克服しようとするとクエリを取り除かなければなりませんが取り除いただけでは使い物にならないのでクエリの代わりになるDOM制御方法を用意しなければなりません。加えてjQueryはDOMの構築も苦手なのでここも補ってやらねばなりません。

これをどのように解決するかというと、静的型付き言語でのみ利用できるアプローチですがDOM構造を静的に型付けし、型をたどってのみ目的とする要素を操作できるようにする方法が考えられます。正しいパスは型によって示され、間違ったパスは型によってエラーとなり、対象の存在と同一性が保証されます。TypeScriptでは以下のような定義と操作が可能です。構造には文字列、配列、任意のフィールドを持つ構造体のいずれかを選択できます。

import TypedHTML from 'typed-dom';

const component = TypedHTML.article({ id: 'id' }, {
  style: TypedHTML.style(`$scope ul { width: 100px; }`),
  title: TypedHTML.h1(`title` as string),
  content: TypedHTML.ul([
    TypedHTML.li(`item` as string),
    TypedHTML.li(`item`),
  ])
});
// inspect
component.element.outerHTML; // '<article id="id"><style>#id ul { width: 100px; }</style><h1>title</h1><ul><li>item</li><li>item</li></ul></article>'
component.children.title.element.outerHTML; // '<h1>title</h1>'
component.children.title.children; // 'title'
component.children.content.element.outerHTML; // '<ul><li>item</li><li>item</li></ul>'
component.children.content.children[0].children; // 'item'

// update
// - text
component.children.title.children = 'Title';
component.children.title.element.outerHTML; // '<h1>Title</h1>'

// - struct
component.children.content.children = [
  TypedHTML.li('Item')
];
component.children.content.element.outerHTML; // '<ul><li>Item</li></ul>'

// - TypedHTML
component.children.title = TypedHTML.h1('Title!');
component.children.content = TypedHTML.ul([
  TypedHTML.li('Item!')
]);
component.element.outerHTML; // '<article id="id"><style>#id ul { width: 100px; }</style><h1>Title!</h1><ul><li>Item!</li></ul></article>'

HTML以下のDOMを完全に静的型付けすることも可能です。ただし実際には末端の要素へのパスが長くなりすぎるため適切な単位で抽象化することになります。

ポストjQueryにはこのようにクエリを除去しカプセル化を守るライブラリが求められます。なお仮想DOMについてはDOMをコンポーネントなど大きな単位で更新するコストを下げるための技術なので最小コストで更新できるのであれば不要です。

github.com

広告を非表示にする

TypeScriptでIDなどの特別な数値や文字列を型安全な専用の属性付きプリミティブ型にする

TypeScriptでIDやエンコーディングなど特別なセマンティクスを持つ値にプリミティブ型を維持したまま個別の属性を与えることで型安全な専用の値を作る。言語の型システムをどのように機能させているかについての説明は省略する。

IDは次のように作れる。

namespace Identifier {
  declare class Event<T extends string> {
    private IDENTITY: T;
  }
  export type Number = Event<any> & number;

  export type Id = Event<'Id'> & number;
}

export type EventId = Identifier.Id;

export function makeEventId(id: Identifier.Number): void
export function makeEventId(id: number): EventId
export function makeEventId(id: number): EventId {
  assert(Number.isFinite(id));
  assert(Math.floor(id) === id);
  assert(id >= 0);
  return <EventId>id;
}

IDのように特定のセマンティクス内で識別する値はIDという属性でなくセマンティクスを構成するドメインを主体として型を設計する。ゆえに型はDomain<Attribute>となりAttribute<Domain>とはならない。

エンコーディングは次のように表現できる。

// ./attribute/encode.ts
export declare class Encoded {
  private ENCODE;
}
// ./attribute/normalize.ts
export declare class Normalized {
  private NORMALIZE;
}
// ./domain/url.ts
import { Encoded } from '../attribute/encode';
import { Normalized } from '../attribute/normalize';

namespace Identifier {
  declare class Url<T> {
    private IDENTITY: T;
  }

  export type URL<T> = Url<T> & string;
}

type Url<T> = Identifier.URL<T>;


// https://www.ietf.org/rfc/rfc3986.txt

export type StandardUrl = Url<Normalized & Encoded>;

export function standardizeUrl(url: Url<any>): void
export function standardizeUrl(url: string): StandardUrl
export function standardizeUrl(url: string): StandardUrl {
  return encode(normalize(url));
}


type EncodedUrl = Url<Encoded>;

function encode(url: EncodedUrl): void
function encode<T>(url: Url<T>): Url<T & Encoded>
function encode(url: string): EncodedUrl
function encode(url: string): EncodedUrl {
  return <EncodedUrl>url
    // Trim
    .trim()
    // Percent-encoding
    .replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]?|[\uDC00-\uDFFF]/g, str =>
      str.length === 2
        ? str
        : '')
    .replace(/%(?![0-9A-F]{2})|[^%\[\]]+/ig, encodeURI)
    .replace(/\?[^#]+/, query =>
      '?' +
      query.slice(1)
        .replace(/%[0-9A-F]{2}|[^=&]/ig, str =>
          str.length < 3
            ? encodeURIComponent(str)
            : str))
    .replace(/#.+/, fragment =>
      '#' +
      fragment.slice(1)
        .replace(/%[0-9A-F]{2}|./ig, str =>
          str.length < 3
            ? encodeURIComponent(str)
            : str))
    .replace(/%[0-9A-F]{2}/ig, str => str.toUpperCase());
}


type NormalizedUrl = Url<Normalized>;

function normalize(url: string): NormalizedUrl
function normalize(url: string): NormalizedUrl {
  // Absolute path
  const parser = document.createElement('a');
  parser.href = url || location.href;
  return <NormalizedUrl>parser.href
    // Remove the default port
    .replace(/^([^:/?#]+:\/\/[^/?#]*?):(?:80)?(?=$|[/?#])/, '$1')
    // Fill the root path
    .replace(/^([^:/?#]+:\/\/[^/?#]*)\/?/, '$1/')
    // Use uppercase letters within percent-encoding triplets
    .replace(/%[0-9A-F]{2}/ig, str => str.toUpperCase());
}

Urlとその正規化は公開・一般化されたドメイン横断の知識であるためここではUrlを属性でなくドメインとして定義した。移動距離が長い場合は転送用のオブジェクトで包んでもいいだろう。

これらの手法は以下のライブラリで使われており、具体的な組み込み方と使用方法を確認できる。

github.com github.com

IndexedDBの安全な永続化リソース管理戦略 ~ 有効期限と容量制限

IndexedDBはキャッシュによる通信の削減の用途に非常に魅力的だが、クライアント/ユーザー側にサーバー/サービス提供者側から管理・修正不能な状態を作るリスクがあり、最悪の場合クライアント/ユーザー側でキャッシュを削除しない限りサービスが利用不能となる可能性がある。これはサービスの規模および継続性に比例して許容できないリスクとなる。

このためIndexedDBをプロダクションで使うためには開発者から認識されず、または無視される管理外データを自動的に削除する機能が不可欠となる。これは通常、有効期限の機能追加により解決できる。また容量(件数)制限も非常に有用である。有効期限と容量制限は管理外データ、ひいてはこれを管理する問題のサイズに上限を与え、管理可能なサイズに縮小する。

永続データの終末処理はこれまで開発者がすべてのデータを把握して明示的に削除する必要があったが、使わないデータも古いデータも自動的に消えるなら管理は不要となり、終末処理はただ管理を放棄するだけよくなる。このような運用環境では開発者は任意のバージョンのデータだけ考慮すれば済み、それ以外は放置か削除で足りるため永続化リソースの利用コストが大幅に削減される。

このように有効期限と容量制限(超過データの自動削除)の制約を与えることでサーバー管理下にない永続化リソースも相当程度安全かつ低コストで利用できるものとなる。複雑なバージョン管理に由来するバリデーションやマイグレーションの失敗もブラウザの再起動によりバージョンを最新にそろえればほとんど解決するので、サポートも通常のバグ対応の範疇に収まり容易となる。ここまでくるともはや永続化リソースのために必要な特別な対応は任意のバージョン間でのマイグレーション名前空間の競合の回避程度しかなく、永続化リソースを使用するハードルは非常に低い。

IndexedDBはサーバー管理下にない永続化リソースの制御の難しさから採用しづらいものであったが、有効期限と容量制限の制約を自律させることで採用を検討できる安全性が得られる。以下のライブラリはこの2つの制約を実装したものである。

github.com

CSS in JSで作るStyled Componentsの最小デザイン

CSS in JSでStyled ComponentsをAngularやReactといったフレームワークなしで作る最小デザインを例示する。

次のようなHTMLで表されるDOM ComponentにCSSを適用したいとする。

<article id="id">
  <h1>Title</h1>
  <ul>
    <li>item</li>
    <li>item</li>
  </ul>
</article>

単純にidで絞り込んだCSSを記述したstyle要素があればCSSを不足なく利用できる。

<article id="id">
  <style>#id ul { width: 100px; }</style>
  <h1>Title</h1>
  <ul>
    <li>item</li>
    <li>item</li>
  </ul>
</article>

このHTML(DOM Component)を生成する方法は次のように考えられる。

import TypedHTML from 'typed-dom';

const component = TypedHTML.article({ id: 'id' }, {
  style: TypedHTML.style(`#id ul { width: 100px; }`),
  title: TypedHTML.h1(`title`),
  content: TypedHTML.ul([
    TypedHTML.li(`item`),
    TypedHTML.li(`item`),
  ])
});

idを自動で埋め込めるようにするとミスを防ぐことができ、モジュラリティも得られる。

import TypedHTML from 'typed-dom';

const component = TypedHTML.article({ id: 'id' }, {
  style: TypedHTML.style(`$scope ul { width: 100px; }`),
  title: TypedHTML.h1(`title`),
  content: TypedHTML.ul([
    TypedHTML.li(`item`),
    TypedHTML.li(`item`),
  ])
});

固定idの直接指定は次のように

class Component {
  constructor(private readonly parent: HTMLElement) {
    this.parent.appendChild(this.element);
  }
  private readonly element = TypedHTML.div({ id: 'id' }, [
    TypedHTML.style(`$scope { position: relative; }`)
  ]).element;
  private readonly children = Object.freeze({
    list: new MicroComponent(this.element)
  });
  destroy() {
    this.element.remove();
  }
}

一時idの生成は次のように行える。

class MicroComponent {
  constructor(private readonly parent: HTMLElement) {
    this.parent.appendChild(this.dom.element);
  }
  private readonly dom = TypedHTML.div({ id: `${this.parent.id}-list-${Date.now()}-${Math.random() * 1e9 | 0}` }, {
    style: TypedHTML.style(`$scope ul { width: 100px; }`),
    content: TypedHTML.ul([
      TypedHTML.li(`item`)
    ])
  });
}

以上のようにCSS in JSでStyled Componentsを作るには単にscopeを作る要素を指定するセレクタの埋め込みとCSSを定義するstyle要素の同梱の2機能さえあれば最小構成として十分であり、面倒なフレームワークに抱き合わせられずに簡単に導入できる。

github.com

なおこのライブラリは以下のようにDOM構造の静的型を生成し内部構造を可視化、開発支援するものであり、付属機能としてCSS in JSをサポートしている。

TypedHTMLElement<"article", HTMLElement, {
  style: TypedHTMLElement<"style", HTMLStyleElement, string>;
  title: TypedHTMLElement<"h1", HTMLHeadingElement, string>;
  content: TypedHTMLElement<"ul", HTMLUListElement, TypedHTMLElement<"li", HTMLLIElement, string>[]>;
}>;

XSS安全なMarkdownパーサーの要件と実装例

Markdownでユーザー入力を処理するならばXSS対策は不可欠であり、最高のXSS安全性を持つMarkdownパーサーを求めるならば少なくともDOMを生成して返すものでなければならない。

HTML文字列を返すものは基本的に安全性を担保せず呼び出す側に無害化の責務を負わせるものであり、仮にパーサー側でサニタイズを行って安全性を保証しようと試みても難しい。

ユーザー入力の無害化は特定の文字または文字列を禁止するブラックリスト方式ではほぼ不可能であり、一般的にホワイトリストで安全を確認した文字列をもとに自身で入出力を再構築するのがユーザー入力の唯一安全な受け入れ方法である。

これはHTMLとDOMのいずれでも可能だが、HTMLではエスケープの有無および種類の判断にヒューマンエラーが入りやすくDOMよりも安全性が劣る。エスケープの対象の識別は自身の部分的理解に基づくブラックリスト方式のフィルタリングであり、よほど範囲が限られ対応が確立されてない限りエスケープにより安全を確保することはできない。

一方DOMではdocument.createTextNodeelement.setAttributeを使うことでエスケープ(サニタイズ)処理をブラウザに丸投げできるのでエスケープの知識が必要なく、これでXSS脆弱性があればブラウザのバグというレベルにまで安全性を上げることができる。

仮にHTMLの出力を使うならばこのような安全なDOM構築を行うHTMLパーサーを噛ませる必要がある。加えて、有効だが危険な入力の除去も別途行う必要がある。

DOMを返すMarkdownパーサーはこの安全なHTMLパーサーを融合させたものであり、単体で安全性を担保する。ユーザー入力を受け入れる安全なMarkdownパーサーとはこのようなものでなければならない。よって、安全なMarkdownパーサーというものはサーバーでなくブラウザで動作するJavaScriptライブラリに限られる。

この要件を満たすMarkdownパーサーを探していたのだが、どうやらないようなので自身で実装することにした。

Securemark - secure markdown renderer working on browsers for user input data

このライブラリは上記の点を踏まえてXSS安全に設計、実装されており、100%安全で脆弱性のないMarkdownパーサーになっているはずだ。脆弱性の報告はもちろん歓迎する。上記のサイト上で攻撃コードを試せるので攻撃に成功したらIssueを投げてもらって構わない。

github.com


参考

shubs.io

Cross-site Scripting (XSS) - OWASP

[https://www.owasp.org/index.php/XSS(Cross_Site_Scripting)Prevention_Cheat_Sheet:title]

XSS Filter Evasion Cheat Sheet - OWASP

Promiseの失敗文脈を使ってはならない理由と組み込み関数では使っていい理由

Promiseのthenメソッドの第二引数およびcatchメソッドのコールバックの呼び出しで表現される失敗文脈、これは原則として使ってはならない。 ネイティブの組み込み関数が使っているからといって真似してPromise値を返し失敗文脈を持つ関数を作ってはならない。

Promiseの失敗文脈には任意の回復可能または予測された失敗と予期せぬ例外を区別できない(例外を強制的に失敗に戻す)欠陥がある。 このためPromiseの失敗文脈の型を定義しようという試みは基本的に無意味だ。 仮に失敗文脈に混入した例外を除去しようとすると以下のようになる。

Promise.resolve()
  .catch(reason => {
    if (reason instanceof Error) throw reason;
    // ...
  });

特定のエラー値を返す場合は以下のようになる。

Promise.resolve()
  .catch(reason => {
    if (reason instanceof Error && reason instanceof DOMError === false) throw reason;
    // ...
  });

とてもバカバカしい。すべての失敗文脈にこの一行が入ったJavaScriptの世界を想像すると頭が痛くなる。 早い話がnullの失敗を繰り返しているのだ。 よってPromiseは原則として失敗を成功文脈で扱い、失敗文脈は例外のみを扱う例外文脈として設計しなければならない。 成否はタプルによる多値で表現し、最初の要素に成否判定のフラグを入れるフォーマットを推奨する。 オブジェクトによる多値は個別に構造を記憶する無駄な労力を要し、生成コストも配列より高いため推奨しない。

new Promise(resolve => resolve([arr.length > 0, arr.pop(), arr]));

一方で組み込み関数が失敗文脈で失敗を表現することは必ずしも間違いではない。 組み込み関数は言語処理系が実装する関数ゆえに絶対に予期せぬ例外を混入させない設計と信頼性確保が可能だからである。 組み込み関数が失敗文脈に例外を含まない(特定のエラー値のみを返す場合を含む)と宣言したらそれは間違いなく含まないとみなせる。 成否表現のフォーマットを強制的に統一させるためといった都合もあるだろう。 同様の意図からライブラリの公開するインターフェイスが失敗文脈の使用を選択する場合もある。 しかしもし失敗と例外が入り混じった失敗文脈を作る関数があればそれはやはり設計が悪い。

対してユーザーの作る失敗文脈付き(Promise値を返す)関数で組み込み関数と同じ信頼性の関数を作ることは容易ではない。 コードサイズが大きくなればなるほどバグにより例外が混入するリスクが増える。 よって失敗文脈を使用する関数を新たに作る場合、その関数は失敗文脈の信頼性を確保するために、低水準で最小単位の関数でなければならない。

単に非同期だからPromiseを使う、Promiseだから失敗を失敗文脈に分離するといった思考論法で作られたPromiseチェインが、要求される失敗文脈の信頼性を自然と備えていることは期待できない。 ゆえに、Promise値を返す組み込み関数を模倣して自身で失敗文脈を持つPromiseチェインや関数を作ることは基本的にアンチパターンである。

async/awaitにおいても同じポリシーが適用でき、async/awaitは原則としてtry-catch文を使用せずに使えるように設計すべきである。 Promiseの失敗文脈を例外文脈として設計した場合、async/awaitのtry-catch文が自然に適合することにも注目してもらいたい。

また、awaitを囲むtryブロックにはawait以外の同期的処理を含めずawaitの失敗文脈の捕捉のみに責務を限定すべきである。 同期処理において捕捉しない例外を非同期処理に限って捕捉しなければならない理由はない。

await sleep(1);
var n = 100;
try {
  await sleep(n);
}
catch (err) {
  throw err;
}

Gitクライアントに保存したsshパスワードを消す方法

git config --unset-all credential.helper
git config --global --unset-all credential.helper
git config --system --unset-all credential.helper

stackoverflow.com