dart:htmlのsetInnerHtmlでタグを追加する

#tech
#dart

dart:html では以下のようなコードで HTML 要素を追加できる。

import dart:html

void main() {
  document.body.setInnerHtml('<a href="https://twitter.com/horimislime">')
}

しかしこのコードだと以下のようなログが出力されタグが消されてしまう。

Removing disallowed attribute <A href="https://twitter.com/horimislime">

対処法としては setInnerHtml の引数に指定できる NodeValidator で該当のタグを許可リストに含める必要がある。
a タグのように src でリンク先を指定する場合は UrlPolicy の設定も必要。デフォルトでは same origin 以外へのリンクは許可されておらず、バリデーションで要素が消されてしまう。

UriPolicy constructor - UriPolicy class - dart:html library - Dart API

静的なリンクを貼りたい場合 URL のバリデーションも不要なので、以下のような実装をすればいい。

import dart:html

class CustomUriPolicy implements UriPolicy {
  @override
  bool allowsUri(String uri) => true;
}

final NodeValidatorBuilder htmlValidator = NodeValidatorBuilder
  .common()
  ..allowElement('a',
      attributes: ['href'],
      uriPolicy: CustomUriPolicy())
  ..allowElement('img', 
      attributes: ['src'], 
      uriPolicy: CustomUriPolicy());

void main() {
  document.body.setInnerHtml('<a href="https://twitter.com/horimislime">', validator: htmlValidator)
}

デフォルトだと結構制約が厳しく多くのタグがバリデーションに引っかかるので、色々設定する必要があった。

Tweet