資訊專欄INFORMATION COLUMN
摘要：我們要像在中對單雙引號轉(zhuǎn)義一樣，對屬性中的單雙引號轉(zhuǎn)義在中輸出預(yù)留符號，可以使用字符實體轉(zhuǎn)義的形式，這里有簡單介紹。
單雙引號 在js代碼中
在js中單、雙引號引起來的是字符串，如果我們要在字符串中使用單、雙引號，需要反斜杠進行轉(zhuǎn)義
let str="user"s name"; // or let str=" user"s name"; // or let str="she said:"...".";
在html代碼中如果在字符串中輸出反斜杠，仍然是用反斜杠轉(zhuǎn)義，即2個反斜杠輸出1個反斜杠
html標(biāo)簽中，屬性值通常用雙引號引起來，也可以使用單引號或不用引號。
這3種寫法都正確，不過通常我們是選擇用雙引號引起來。
如果我們要在屬性值中使用單、雙綽號，我們不能直接寫成下面這樣
這些全部是錯誤的。我們要像在js中對單、雙引號轉(zhuǎn)義一樣，對屬性中的單、雙引號轉(zhuǎn)義
在html中輸出預(yù)留符號，可以使用字符實體轉(zhuǎn)義的形式，這里有簡單介紹：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種選擇
當(dāng)js代碼遇上實體編碼
我們可以通過dom節(jié)點提供的事件寫上調(diào)用js的代碼，如點擊body彈出hello這個字符串，我們可以寫成
click here
如果我們的需求是就彈出一個雙引號呢？
根據(jù)前述規(guī)則，我們要寫成：
click here
當(dāng)然，alert里的單引號也可以使用十進制或十六進制編碼
click here
這樣也是可以的。
是不是有點xss的感覺?
如果我們把彈雙引號的需求改成單引號呢？
click here
如果我們用十進制或十六進制編碼呢？
click here
這樣仍然是不可以的
我們要對js字符串中的單引號進行轉(zhuǎn)義，如
click here
或
click here
前面的onclick="alert(""")"看起來還正常，后面的這個onclick="alert(""")"就有點不直觀了。因為后面這個看上去反斜杠像在轉(zhuǎn)義&這1個字符，而&在js的字符串中并不需要轉(zhuǎn)義的。
動態(tài)輸出如前述的alert彈出的消息，如果是一個變量控制，動態(tài)輸出呢？
click here
那我們這個msg字符串就得注意了，從這個示例來看，這個動態(tài)的msg即出現(xiàn)在屬性onclick中，也出現(xiàn)在alert的單引號開始的字符串中。
我們要對msg中的雙引號轉(zhuǎn)成"或"或"，并對msg中單引號的前面加上一個反斜杠 ?
題外話：對msg中的反斜杠需要做double處理，因為反斜杠在html屬性中并不是特殊的，但在js的字符串中是特殊的。因此正確的做法是對反斜杠及單引號前面各加上一個反斜杠
然而，你并不能保證屬性是用雙引號，alert中的字符串用的是單引號，因為可以寫成下面這樣
click here
?
這種情況我們要對msg中的單引號轉(zhuǎn)成'或'，并對msg中雙引號前面加上一個反斜杠
題外話：同上
看上去要根據(jù)不同的情況做不同的處理，其實也不需要
我們只需要對單、雙引號前面加上一個反斜杠然后再對單、雙引號實體編碼即可。
在js中如果反斜杠后面跟的不需要反斜杠轉(zhuǎn)義的字符，那么這個反斜杠是被丟棄的，因此像
var str="user"s name";
單引號前面多加一個反斜杠也不要緊的。
自動化處理與識別提醒在magix項目中，由于magix-combine的支持，可識別出屬性中js代碼的部分，并自動化處理，如
name這個變量可包含任意的單、雙引號及反斜杠。工具自動識別并處理，開發(fā)者不需要做任何事情。
而對于這樣的寫法：
第一種寫法其實并不正確，但第二種情況看上去又怪怪的。magix-combine工具能識別出來是否需要添加反斜杠，并自動添加處理。
第一種需要添加反斜杠，工具會自動加上，并提醒開發(fā)者這里的寫法是不正確的。
第二種說明開發(fā)者意識到了問題所在，自己處理了，工具就不再處理也不再提醒開發(fā)者。
相關(guān)鏈接:
https://github.com/thx/magix
https://github.com/thx/magix-combine
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50974.html
摘要：或者另一個需求，對編輯器中的文本進行編碼再傳進數(shù)據(jù)庫，或者從庫中讀取的數(shù)據(jù)需要進行解碼才能渲染到網(wǎng)頁上。這時候，我們常常就會使用到轉(zhuǎn)義與反轉(zhuǎn)義，編碼和解碼。 在項目開發(fā)過程中，我會有時候遇上這樣的一個業(yè)務(wù)需求：對從數(shù)據(jù)庫中讀取出來的html數(shù)據(jù)進行反轉(zhuǎn)義，才能在當(dāng)前網(wǎng)頁當(dāng)前進行渲染。 或者另一個需求，對編輯器中的文本進行編碼再傳進數(shù)據(jù)庫，或者從庫中讀取的數(shù)據(jù)需要進行解碼才能渲染到網(wǎng)頁上...
摘要：或者另一個需求，對編輯器中的文本進行編碼再傳進數(shù)據(jù)庫，或者從庫中讀取的數(shù)據(jù)需要進行解碼才能渲染到網(wǎng)頁上。這時候，我們常常就會使用到轉(zhuǎn)義與反轉(zhuǎn)義，編碼和解碼。 在項目開發(fā)過程中，我會有時候遇上這樣的一個業(yè)務(wù)需求：對從數(shù)據(jù)庫中讀取出來的html數(shù)據(jù)進行反轉(zhuǎn)義，才能在當(dāng)前網(wǎng)頁當(dāng)前進行渲染。 或者另一個需求，對編輯器中的文本進行編碼再傳進數(shù)據(jù)庫，或者從庫中讀取的數(shù)據(jù)需要進行解碼才能渲染到網(wǎng)頁上...
摘要：協(xié)議采用了請求響應(yīng)模型。報頭分為通用報頭，請求報頭，響應(yīng)報頭和實體報頭。格式支持比鍵值對復(fù)雜得多的結(jié)構(gòu)化數(shù)據(jù)，這一點也很有用。例如下面這段代碼最終發(fā)送的請求是這種方案，可以方便的提交復(fù)雜的結(jié)構(gòu)化數(shù)據(jù)，特別適合的接口。 一 前言 ----現(xiàn)在搞前端的不學(xué)好http有關(guān)的知識已經(jīng)不行啦～筆者也是后知后覺，在搞node的時候意識到網(wǎng)絡(luò)方面的薄弱，開始學(xué)起http相關(guān)知識。這一篇是非?；A(chǔ)的講...
摘要：當(dāng)然，也可自己寫一個轉(zhuǎn)換函數(shù)，按照一定規(guī)則便行為編碼的字節(jié)，如下例中國結(jié)果中國結(jié)果結(jié)果通過簡單的函數(shù)，就可以完成編碼到編碼的轉(zhuǎn)換，進而完成寬字節(jié)字符到編碼的轉(zhuǎn)換。 前端開發(fā)過程中會接觸各種各樣的編碼，比較常見的主要是 UTF-8 和 HTML 實體編碼，但是 web 前端的世界卻不止這兩種編碼，而且編碼的選擇也會造成一定的問題，如前后端開發(fā)過程中不同編碼的兼容、多字節(jié)編碼可能會造成的 ...
閱讀 1391·2021-09-22 10:02
閱讀 1914·2021-09-08 09:35
閱讀 4065·2021-08-12 13:29
閱讀 2611·2019-08-30 15:55
閱讀 2266·2019-08-30 15:53
閱讀 2304·2019-08-29 17:13
閱讀 2766·2019-08-29 16:31
閱讀 2957·2019-08-29 12:24
