{〈defer〉}{script 要素}{HTML 属性}=}(3)
{defer 属性}{希哲15年4月1日の開発}{描画速度}{二度手間}{link rel="preload"}{速度差}{DOM 構築}{Document.readyState}{Node.appendChild()}{デルン初期実装}...=}(53)

{希哲15年4月1日17歩 K#F85E/A-E74C-FE68}

Aejs@icl() とその周辺見直し

いったん終了。

デルン初期実装からか,@icl() では Document.write() 相当の @doc.wr() を使って script 要素を書き出していたが,これは様々な面で好ましくない。こんな実装にした経緯失念したが,装体書で同じようなことをする @apd_ss()@elm.bld..apd()Node.appendChild())を使っているところをみるに,テンプレート上で書き出し位置を指定しやすいといった理由があったのだろう。

特に,昨日まで Aejs にあった干渉不具合を回避するのに有用ではあったが,もはや不要なのでここで周辺とともに整理しておいた。

まず,@icl() を @elm.bld..apd() を利用した実装にし,スクリプト調整を行なった。AdSense より前の位置に配置していたため,これを body 要素末尾のその他ライブラリ前に移動した。非同期になったことで DOMContentLoaded が終わっている可能性があるため,Document.readyState を利用して DOM 構築完了後であれば即実行する処理を @() に加えた。

更に,各スクリプトに defer 属性を付け,直書きしている部分は addEventListener() で DOMContentLoaded を待ってから実行するようにした。ここはスクリプトを通さず捌き手側で直接書き出してもいいかと思ったが,試してみたところ大して速度差が無かったため,現状維持とした。

更に,link rel="preload"導入,ついでに cfg.vs で設定していた隠し破りテンプレート側で設定し,@icl() や @apd_ss() に引数として渡すようにした。テンプレート側で直接記述している URI に利用出来ず,修正作業でよく二度手間が発生していた。

ここまでの作業で体感的描画速度向上が見られた。ただし,速くなった分描画過程が見えてしまうようになったため,明日装体書調整を行うことにした。

未出振るい

=}
{希哲15年2月28日の開発}{実装方針}{allow-scripts}{ブラウザ対応状況}{スクリプト禁止}{予約接頭子}{on- 属性}{自輪郭}{他輪郭}{HTML タグ切り替え}...=}(59)

{希哲15年2月28日2歩 K#F85E/A-E74C-D345}

少し忘れていたが,第三次宣伝攻勢を始める前にもう一つやっておくべきこととして,HTML タグ切り替えがあったため再検討この描出を見て必要性再認識した。

考えてみれば,HTML タグを使うつもりがなくても引用で入ってしまう可能性がある。誤った HTML放置されていれば用者にとってはもちろん SEO 上の障害にもなる。

基本的な方針はデライト公式で書いた通りだが,実装にあたっては若干の課題も残っていた。

他輪郭描写原則として HTML タグ無効化するとして,有効化した際にスクリプトだけ無効化するというのは意外に難しい

script 要素禁止するだけでは十分でなく,on- 属性iframe 要素等の抜け道も塞がなくてはならない。

on- 属性 に関しては,on で始まる属性を一律削除するか non- にでも置換してしまうことを考えたが,そもそも on- が HTML において予約接頭子なのかよく分からない。

いずれにせよ,HTML拡張性や近年の仕様変更の激しさを考えると,ブラックリスト的な検査は避けたい。

ここで iframe 要素sandbox 属性が使えることに気付いた。これならスクリプト禁止意図明示出来る。ブラウザ対応状況も悪くない。

スクリプトのみならず,iframe なら誤った HTML によってページ全体の領当てが影響を受けることも簡単に避けられる。自輪郭では allow-scripts を加えるだけでスクリプトを許可出来る。

いっそのこと全ての描写部砂房にして原則タグ有効に出来れば話は簡単だが,iframe 要素は色々な意味で重くSEO にも向かない。タグを悪用した迷惑行為フィッシング等の可能性が完全になくなるわけでもなく,iframe 以前にタグの処理は重いのでやはり原則無効化,有効化時のみ iframe に置換するというのが現実解だろう。

これで実装方針は固まった。実装自体は半日もあれば出来るだろう。

{HTML タグ切り替え}{ご回答ありがとうございます!}{埋め込み}{有効化}{有効}{スクリプト}{レイアウト}{HTML タグ}{画像}{検討}...=}(18)

{<script> の有効・無効切り替えについて K#9-C7C6/A-A429}

ご要望ありがとうございます!

実は、script タグに限らず HTML タグ全般に関して、使い方次第でページ全体のレイアウトを乱すことが出来てしまうという問題があるため、ご提案のように自分の輪郭に関しては有効にし、他人の輪郭に関しては注意表示をして有効・無効を切り替えられる、という仕様検討しているところでした。実装自体の目処はついています。

確かに、自分の輪郭であればスクリプトも使える方が可能性は広がると思います。ここは少し迷いがあったところなので後押しになりました。

ご提案も加味して、自分の輪郭に関しては script タグも含めて有効、他人の輪郭に関しては注意表示をした上で script タグを除いて有効化出来る、という方向で実装を予定します。

なかなか手が回らないのですが、現状 HTML でしか出来ないような装飾に関しては Markdown などを参考に記法の拡充を急ぎたいと考えています。

また、例えば YouTubeTwitter などの埋め込みに関しては、画像と同じように URI の先頭に + 記号を加えることで自動展開するような実装を予定しています。

{あれ}{希哲14年9月11日}{希哲14年9月11日のツイスト}{ツイスト}{きっかけ}{script 要素}{禁止}=}(7)
{デライト}{あれ}{あれ}{画像埋め込み}{希哲14年7月13日}{輪結}{手定め}{script 要素}{URI}=}(9)

{希哲14年7月13日手定め K#F85E/A-5B28-CFDC}

手定め。書き方は [Ctrl] + ダブルクリックして見てね。「使い方」も更新しました。

URI に名前を付けて輪結

輪郭見本

URI だけを書いて輪結

https://dlt.kitetu.com/img/xmp_bln.png

URI の先頭に + を付けて画像埋め込み

script は禁止
<script>alert('これが表示されたらご報告下さい。');</script>