在<script>塊中的JavaScript字符串文字中轉義HTML實體

Question

一方面，如果我有

<script>
var s = 'Hello </script>';
console.log(s);
</script>

瀏覽器會提前終止<script>塊，基本上我搞砸了頁面。

另一方面，字符串的值可能來自用戶（例如，通過先前提交的表單，現在字符串最終作為文字插入到<script>塊中），因此您可以期待任何內容字符串，包括惡意形成的標簽。 現在，如果我在生成頁面時使用htmlentities（）轉義字符串文字，則s的值將按字面包含轉義的實體，即s將輸出

Hello </script>

在這種情況下，這不是所希望的行為。

在<script>塊中正確轉義JS字符串的一種方法是，如果它遵循左尖括號，或者只是總是轉義斜杠，則轉義斜杠，即

var s = 'Hello <\/script>';

這似乎工作正常。

然后是HTML事件處理程序中的JS代碼問題，也可以很容易地解決，例如

<div onClick="alert('Hello ">')"></div>

最初看起來有效但在大多數（或所有？）瀏覽器中斷開。 這顯然需要完整的HTML實體編碼。

我的問題是：正確覆蓋上述所有情況的最佳/標准做法是什么 - 即腳本塊中的JS，事件處理程序中的JS - 如果您的JS代碼可以部分地在服務器端生成並且可能包含惡意數據？

Answer 1

以下字符可能會干擾HTML或Javascript解析器，並應在字符串文字中進行轉義： <, >, ", ', \\,和& 。

在使用轉義字符的腳本塊中，正如您所發現的那樣，有效。 連接方法（ </scr' + 'ipt>' ）可能難以閱讀。

var s = 'Hello <\/script>';

對於HTML中的內聯Javascript，您可以使用實體：

<div onClick="alert('Hello &quot;>')">click me</div>

演示： http ： //jsfiddle.net/ThinkingStiff/67RZH/

在<script>塊和內聯Javascript中工作的方法是\\uxxxx ，其中xxxx是十六進制字符代碼。

• < - \<
• > - \>
• " - "
• ' - \'
• \\ - \\
• & - \&

演示： http ： //jsfiddle.net/ThinkingStiff/Vz8n7/

HTML：

<div onClick="alert('Hello \u0022>')">click me</div>

<script>
    var s = 'Hello \u003c/script\u003e';
alert( s );
</script>   

Answer 2

我是這樣做的：

 function encode(r){ return r.replace(/[\\x26\\x0A\\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"}) } var myString='Encode HTML entities!\\n"Safe" escape <script></'+'script> & other tags!'; test.value=encode(myString); testing.innerHTML=encode(myString); /************* * \\x26 is &ampersand (it has to be first), * \\x0A is newline, *************/ 

 <textarea id=test rows="9" cols="55"></textarea> <div id="testing">www.WHAK.com</div> 

Answer 3

（編輯 - 不知何故沒注意到你在你的問題中提到過斜線逃逸......）

好的，所以你知道如何逃避斜線。

在內聯事件處理程序中，您不能在文字中使用邊界字符，因此請使用另一個：

<div onClick='alert("Hello \"")'>test</div>

但這都有助於讓你的生活變得困難。 只是不要使用內聯事件處理程序！ 或者，如果你絕對必須，那么讓他們調用其他地方定義的函數。

一般來說，服務器端代碼編寫javascript的原因很少。 不要從服務器生成腳本 - 而是將數據傳遞給預先編寫的腳本。

（原版的）

您可以使用反斜杠（在其他情況下不是特殊的轉義字符）轉義JS字符串文字中的任何內容：

var s = 'Hello <\/script>';

這也具有使其不被解釋為html的積極效果。 所以你可以用“\\ /”替換“/”，以免產生不良影響。

但是，一般情況下，我擔心您會在javascript中將用戶提交的數據嵌入為字符串文字。 你在服務器上生成javascript代碼嗎？ 為什么不直接將數據作為JSON或HTML“數據”屬性傳遞？

Answer 4

我想說最好的做法是首先避免使用內聯JS 。

將JS代碼放在一個單獨的文件中，並將其包含在src屬性中

<script src="path/to/file.js"></script>

並使用它從內部設置事件處理程序，而不是將它們放在HTML中。

//jquery example
$('div.something').on('click', function(){
    alert('Hello>');
})

Answer 5

大多數人使用這個技巧：

var s = 'Hello </scr' + 'ipt>';