HTML内のテキスト
CoddyのNode.jsジャーニー「Expressの基礎」セクションの一部。レッスン 9/23。
訪問者は、HTMLがマークアップとして扱う文字を入力できます。タイトルに<b>が含まれている場合、それをページに直接配置するとタグになります。エスケープすると、これらの文字はブラウザーに表示されるテキストになります。
escapeHtml('<b>Lunch</b>');
// <b>Lunch</b>このヘルパーは&を&に変換し、ブラウザーにはアンパサンドとして表示されます。二重引用符は"になります。アポストロフィは変更されません。誰が書いたかにかかわらず、挿入するすべてのテキスト値を、自分で用意したHTMLで囲む前にエスケープしてください。ページ全体をエスケープすると、見出しタグもテキストとして表示されてしまいます。このヘルパーを書く必要はありません。重要なのは、どこで使うかを判断することです。
URLでは、スペースは%20、アンパサンドは%26、山括弧は%3Cと%3Eで表します。これらのエンコードにより、タイトルのテキストとクエリ構文を分離できます。
チャレンジ
簡単exercise.jsを編集してください。タイトルを独自の見出しタグ内に配置する前に、用意されているヘルパーを使ってください。完成した見出しをhtmlで返してください。
実行を試す: GET /result?title=Fish%20%26%20Chipsは{"html":"<h1>Fish & Chips</h1>"}を返します。/result?title=%3Cb%3ELunch%3C%2Fb%3Eも試してください。挿入されたタイトルはテキストでなければならず、見出しはマークアップのままにしてください。
自分で試してみよう
import { escapeHtml } from './html.js';
export function exercise({ title }) {
return { html: `<h1>${title}</h1>` };
}
Expressの基礎のすべてのレッスン
自分で練習してみよう: Expressプレイグラウンド