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