HTMLリンクでjavascript変数を使用するときの適切な構文

Question

単純なhtml（php）リンクとJS変数を組み合わせようとしています。これは私が持っているものですが、構文が間違っています。提案？

$.each(playlist, function(index, val) { 
    playlistHtml += "<form name="form" method="post" action="../_inc/process_track_move.php?track="+val.sources[0].title" 
}); 

Answer 1

あなたのように、二重引用符内の引用符を選抜すべきです。間違ってしまうのは簡単です。あなたのケースでは、たとえあなたのコードが働いていても、エンコーディングエラーやXSSのセキュリティ問題が属性値を適切にエンコードしないため、脆弱になります。

より安全な選択肢は、必要な要素を作成するためにDOM API、フレームワーク、またはデフォルトセーフテンプレートエンジンを使用することです。自動的にエンコード属性値を管理します。

ここでは、生のHTMLの代わりにDOM APIを使用する方法について説明します。

var playlist = document.createElement('div'); // or document.querySelector('#playlist')? 

$.each(playlist, function(index, val) { 
    var form = document.createElement('form'); 
    form.setAttribute('name', 'form'); 
    form.setAttribute('method', 'post'); 
    form.setAttribute('action', '../_inc/process_track_move.php?track=' + val.sources[0].title); 
    playlist.appendChild(form); 
}); 

playlistHtml += playlist.innerHTML; 

作成した要素をドキュメントに直接追加することも、元のようにHTML文字列に変換することもできます。

生のHTML連結を本当に使用する必要がある場合は、+のHTMLにテキスト文字列を書くことはできません。セキュリティの脆弱性やエラーを避けるためには、最初にHTMLとしてエンコードする必要があります。最低でも、それはこのように機能を使用することを意味：

function textToHtml(s) { 
    return s 
     .replace(/&/g, '&') 
     .replace(/</g, '&lt;') 
     .replace(/>/g, '&gt;') 
     .replace(/"/g, '&quot;') 
     .replace(/'/g, '&#39;'); 
} 

それらを正しく構文解析するためにあなたはまた、\"として、あなたの文字列の中" Sをエスケープする必要があります。これは、私たちを与える： "これは文字列ではない実際の値となってしまいます+ ../_inc/process_track_move.php?track= + - >"

playlistHtml += "<form name=\"form\" method=\"post\" action=\"../_inc/process_track_move.php?track=" + textToHtml(val.sources[0].title) + "\"></form>"; 

Answer 2

回答とともに、提案：あなたは一重引用符と二重引用符の両方を使用する必要があります。 提案：ロジックからリンクを外すために変数を使用してください。この方法を見て編集する方が簡単です。これは必須ではありませんが、あなたが戻ってきたときに読みやすくします。

この例は、提供した内容に基づいています。

$.each(playlist, function(index, val) { 
    var baseLink = "../_inc/process_track_move.php?rack="; 
    playlistHtml += 
"<form name='form' method='post' 
action='" + baseLink + val.sources[0].title + "'"; 
}); 

これは、フォームリンクを閉じたかったと仮定しているだけです。

$.each(playlist, function(index, val) { 
    var baseLink = "../_inc/process_track_move.php?rack="; 
    playlistHtml += 
"<form name='form' method='post' 
action='" + baseLink + val.sources[0].title + "'></form>"; 
}); 

Answer 3

あなたはJavaScriptで手動で生のHTMLを組み立てるべきではない、一般的に

$.each(playlist, function(index, val) { 
    playlistHtml += "<form name='form' method='post' action=' ../_inc/process_track_move.php?track='+val.sources[0].title" 
});