p要素のテキストをスタイリングで動的に設定したいのですが、その方法がわかりません。
これが私のHTML要素です： <p id="delete-speaker-info-message"> </p>
テキストを設定するための現在のコードは次のとおりです。
document.getElementById("delete-speaker-info-message").innerHTML = `Are you sure you want to delete <b>${speakerName}</b> from <b>${eventName}</b>? This cannot be undone.`
上記のコードは機能しますが、speakerNameとeventNameの値はユーザーが入力するため、エスケープする必要があります。innerTextがこれを実行できることは知っていますが、太字のタグもエスケープします。これを行う方法があると確信していますが、オンラインで見つけることができませんでした。助けてくれてありがとう！
最善の策は、テンプレートライブラリを使用することです。自分でロールしようとすると、おそらくそれを台無しにして、XSSの脆弱性になってしまうでしょう。あなたが知らないことを考えるハッカーは常にそこにいます。ライブラリを使用すると、htmlテンプレートを作成したり、変数を渡して安全に補間したりすることもできます。
ReactやAngularのような大きなフレームワークを使用していないようですので、Lodashのtemplate機能が最善の策だと思います。これが彼らのドキュメントからの例です：
// Use the HTML "escape" delimiter to escape data property values.
var compiled = _.template('<b><%- value %></b>');
compiled({ 'value': '<script>' });
// => '<b><script></b>'
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加