HTMX入門
configurationオプション
HTMXは、セキュリティに関連する構成オプションも提供します。
htmx.config.SelfRequestsonly- Trueに設定されている場合、現在のドキュメントと同じドメインにのみリクエストが許可されますhtmx.config.allowscripttags- htmxは、ロードされる新しいコンテンツにある<script>タグを有効なものとして処理します。無効にしたい場合この構成変数をfalseに設定できます。htmx.config.historycachesize- ０を設定することで、localStorageキャッシュにHTMLを保存しないようにできます。htmx.config.alloweval- falseに設定することができ、その場合はevalに依存するHTMXのすべての機能を無効にすることができます。
hx-disable
HTMXがアプリケーションをさらに保護するために提供するツールの一つがhx-disableです。
この属性は、特定の要素および内のすべての要素でのすべてのHTMX属性の処理を無効化します。
無効化したいコンテンツの周りにhx-disable属性を使用して、divを配置することでHTMXは無効化されます。
<div hx-disable> <%= raw(user_content) %> </div>
そのほかのオプション
| Config Variable | Info |
|---|---|
htmx.config.historyEnabled |
htmxの履歴をONにします。デフォルトはTrueです。 |
htmx.config.historyCacheSize |
htmxの履歴のキャッシュサイズを指定します。0にすることで実質的にキャッシュを保存できなくなります。 |
htmx.config.refreshOnHistoryMiss |
defaults to false, if set to true htmx will issue a full page refresh on history misses rather than use an AJAX request |
htmx.config.defaultSwapStyle |
postやgetメソッドを呼び出したときに返却されるHTMLの埋め込み方法を指定します。デフォルトはinnerHTMLです。 |
htmx.config.defaultSwapDelay |
postやgetメソッドを呼び出したときにhtmlが埋め込まれるまでの遅延秒数。デフォルトは0 |
htmx.config.defaultSettleDelay |
デフォルトは20 |
htmx.config.includeIndicatorStyles |
デフォルトはtrue（インジケータースタイルが読み込まれるかどうかを決定） |
htmx.config.indicatorClass |
デフォルトはhtmx-indicator |
htmx.config.requestClass |
デフォルトはhtmx-request |
htmx.config.addedClass |
デフォルトはhtmx-added |
htmx.config.settlingClass |
デフォルトはhtmx-settling |
htmx.config.swappingClass |
デフォルトはhtmx-swapping |
htmx.config.allowEval |
htmxのevalの使用を無効にするために使用できる。デフォルトはtrue |
htmx.config.allowScriptTags |
デフォルトはtrue、htmxが新しいコンテンツに含まれるスクリプトタグを処理するかどうかを決定 |
htmx.config.inlineScriptNonce |
デフォルトは''（インラインスクリプトにnonceが追加されないことを意味する） |
htmx.config.attributesToSettle |
デフォルトは["class", "style", "width", "height"]、セトリングフェーズでセトルする属性 |
htmx.config.useTemplateFragments |
デフォルトはfalse、サーバーからコンテンツを解析するためのHTMLテンプレートタグ（IE11非対応！） |
htmx.config.wsReconnectDelay |
デフォルトはfull-jitter |
htmx.config.wsBinaryType |
デフォルトはblob、WebSocket接続を介して受信されるバイナリデータのタイプ |
htmx.config.disableSelector |
デフォルトは[hx-disable], [data-hx-disable]、この属性がある要素または親要素をhtmxが処理しないようにする |
htmx.config.withCredentials |
デフォルトはfalse、クッキー、認証ヘッダー、TLSクライアント証明書などの資格情報を使用してクロスサイトのアクセス制御リクエストを許可 |
htmx.config.timeout |
デフォルトは0、リクエストが自動的に終了するまでのミリ秒数 |
htmx.config.scrollBehavior |
デフォルトは‘smooth’、ページ遷移時のブーストリンクの動作。許可される値はautoとsmooth。smoothはページトップへのスムーススクロール、autoは通常のリンクの動作 |
htmx.config.defaultFocusScroll |
フォーカスされた要素がビューにスクロールされるかどうか。デフォルトはfalseで、フォーカススクロールスワップ修飾子でオーバーライド可能 |
htmx.config.getCacheBusterParam |
デフォルトはfalse、trueに設定するとhtmxはGETリクエストにターゲット要素をorg.htmx.cache-buster=targetElementId形式で追加 |
htmx.config.globalViewTransitions |
trueに設定すると、htmxは新しいコンテンツをスワップする際にView Transitions APIを使用 |
htmx.config.methodsThatUseUrlParams |
デフォルトは["get"]、これらのメソッドでリクエストをURLにエンコードするようにhtmxがフォーマット |
htmx.config.selfRequestsOnly |
デフォルトはfalse、trueに設定すると、現在のドキュメントと同じドメインへのAJAXリクエストのみを許可 |
htmx.config.ignoreTitle |
デフォルトはfalse、trueに設定すると、htmxは新しいコンテンツにtitleタグが見つかった場合にドキュメントのタイトルを更新しない |
htmx.config.scrollIntoViewOnBoost |
デフォルトはtrue、ブーストされた要素のターゲットがビューポートにスクロールされるかどうか。ブーストされた要素にhx-targetが省略されている場合、ターゲットはbodyがデフォルトとなり、ページがトップにスクロール |
htmx.config.triggerSpecsCache |
デフォルトはnull、パース性能を向上させるために評価されたトリガー仕様をキャッシュに保存。メモリ使用量が増える。単純なオブジェクトを定義してクリアされないキャッシュを使用するか、プロキシオブジェクトを使用して独自のシステムを実装可能 |
JavaScriptで直接設定するか、メタタグを使用できます。
<meta name="htmx-config" content='{"defaultSwapStyle":"outerHTML"}'>
page:https://minegishirei.hatenablog.com/entry/2024/05/21/183135
