html實體編碼遇上js代碼

史占廣發布于2019-08-01 17:08 / 1952人閱讀

摘要：我們要像在中對單雙引號轉義一樣，對屬性中的單雙引號轉義在中輸出預留符號，可以使用字符實體轉義的形式，這里有簡單介紹。

單雙引號 在js代碼中

在js中單、雙引號引起來的是字符串，如果我們要在字符串中使用單、雙引號，需要反斜杠進行轉義

let str="user"s name";
// or
let str=" user"s name";
// or
let str="she said:"...".";

如果在字符串中輸出反斜杠，仍然是用反斜杠轉義，即2個反斜杠輸出1個反斜杠

在html代碼中

html標簽中，屬性值通常用雙引號引起來，也可以使用單引號或不用引號。

這3種寫法都正確，不過通常我們是選擇用雙引號引起來。
如果我們要在屬性值中使用單、雙綽號，我們不能直接寫成下面這樣

這些全部是錯誤的。我們要像在js中對單、雙引號轉義一樣，對屬性中的單、雙引號轉義

在html中輸出預留符號，可以使用字符實體轉義的形式，這里有簡單介紹：http://www.w3school.com.cn/html/html_entities.asp。即想輸出一個雙引號可以使用"的形式，

除此之外，html還支持十進制與十六進制編碼的形式輸出字符，如我們知道字符a的ascii碼的十進制是97　十六進制是61
所以我們在頁面body中輸出一個字符a，有以下3種形式


  a
  a
  a

同樣，單雙引號也有十進制(單：39，雙：34)與十六進制（單：27，雙：22），所以我們在屬性中輸出一個單引號有2種選擇，十進制與十六進制

而輸出一個雙引號則有3種選擇

當js代碼遇上實體編碼

我們可以通過dom節點提供的事件寫上調用js的代碼，如點擊body彈出hello這個字符串，我們可以寫成


click here

如果我們的需求是就彈出一個雙引號呢？
根據前述規則，我們要寫成：


click here

當然，alert里的單引號也可以使用十進制或十六進制編碼


click here

這樣也是可以的。
是不是有點xss的感覺?

如果我們把彈雙引號的需求改成單引號呢？


click here

如果我們用十進制或十六進制編碼呢？


click here

這樣仍然是不可以的

我們要對js字符串中的單引號進行轉義，如


click here

或


click here

前面的onclick="alert(""")"看起來還正常，后面的這個onclick="alert(""")"就有點不直觀了。因為后面這個看上去反斜杠像在轉義&這1個字符，而&在js的字符串中并不需要轉義的。

動態輸出

如前述的alert彈出的消息，如果是一個變量控制，動態輸出呢？


click here

那我們這個msg字符串就得注意了，從這個示例來看，這個動態的msg即出現在屬性onclick中，也出現在alert的單引號開始的字符串中。

我們要對msg中的雙引號轉成"或"或"，并對msg中單引號的前面加上一個反斜杠　?

題外話：對msg中的反斜杠需要做double處理，因為反斜杠在html屬性中并不是特殊的，但在js的字符串中是特殊的。因此正確的做法是對反斜杠及單引號前面各加上一個反斜杠

然而，你并不能保證屬性是用雙引號，alert中的字符串用的是單引號，因為可以寫成下面這樣


click here

這種情況我們要對msg中的單引號轉成'或'，并對msg中雙引號前面加上一個反斜杠

題外話：同上

看上去要根據不同的情況做不同的處理，其實也不需要
我們只需要對單、雙引號前面加上一個反斜杠然后再對單、雙引號實體編碼即可。

在js中如果反斜杠后面跟的不需要反斜杠轉義的字符，那么這個反斜杠是被丟棄的，因此像

var str="user"s name";

單引號前面多加一個反斜杠也不要緊的。

自動化處理與識別提醒

在magix項目中，由于magix-combine的支持，可識別出屬性中js代碼的部分，并自動化處理，如

name這個變量可包含任意的單、雙引號及反斜杠。工具自動識別并處理，開發者不需要做任何事情。

而對于這樣的寫法：

第一種寫法其實并不正確，但第二種情況看上去又怪怪的。magix-combine工具能識別出來是否需要添加反斜杠，并自動添加處理。
第一種需要添加反斜杠，工具會自動加上，并提醒開發者這里的寫法是不正確的。
第二種說明開發者意識到了問題所在，自己處理了，工具就不再處理也不再提醒開發者。

相關鏈接:

https://github.com/thx/magix
https://github.com/thx/magix-combine

GPU云服務器云服務器 html的js代碼 js寫html代碼 html實體 html實體=

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/50974.html

js對html轉義和反轉義以及編碼和解碼

摘要：或者另一個需求，對編輯器中的文本進行編碼再傳進數據庫，或者從庫中讀取的數據需要進行解碼才能渲染到網頁上。這時候，我們常常就會使用到轉義與反轉義，編碼和解碼。在項目開發過程中，我會有時候遇上這樣的一個業務需求：對從數據庫中讀取出來的html數據進行反轉義，才能在當前網頁當前進行渲染。或者另一個需求，對編輯器中的文本進行編碼再傳進數據庫，或者從庫中讀取的數據需要進行解碼才能渲染到網頁上...

skinner 2019-08-02 16:15 評論0 收藏0
js對html轉義和反轉義以及編碼和解碼

摘要：或者另一個需求，對編輯器中的文本進行編碼再傳進數據庫，或者從庫中讀取的數據需要進行解碼才能渲染到網頁上。這時候，我們常常就會使用到轉義與反轉義，編碼和解碼。在項目開發過程中，我會有時候遇上這樣的一個業務需求：對從數據庫中讀取出來的html數據進行反轉義，才能在當前網頁當前進行渲染。或者另一個需求，對編輯器中的文本進行編碼再傳進數據庫，或者從庫中讀取的數據需要進行解碼才能渲染到網頁上...

_ipo 2019-08-23 17:17 評論0 收藏0
Http請求中的Content-Type

摘要：協議采用了請求響應模型。報頭分為通用報頭，請求報頭，響應報頭和實體報頭。格式支持比鍵值對復雜得多的結構化數據，這一點也很有用。例如下面這段代碼最終發送的請求是這種方案，可以方便的提交復雜的結構化數據，特別適合的接口。一前言 ----現在搞前端的不學好http有關的知識已經不行啦～筆者也是后知后覺，在搞node的時候意識到網絡方面的薄弱，開始學起http相關知識。這一篇是非常基礎的講...

Betta 2019-08-26 11:32 評論0 收藏0
前端開發中的字符編碼

摘要：當然，也可自己寫一個轉換函數，按照一定規則便行為編碼的字節，如下例中國結果中國結果結果通過簡單的函數，就可以完成編碼到編碼的轉換，進而完成寬字節字符到編碼的轉換。前端開發過程中會接觸各種各樣的編碼，比較常見的主要是 UTF-8 和 HTML 實體編碼，但是 web 前端的世界卻不止這兩種編碼，而且編碼的選擇也會造成一定的問題，如前后端開發過程中不同編碼的兼容、多字節編碼可能會造成的 ...

Rindia 2019-08-19 18:16 評論0 收藏0