用HTML br 替換 換行前先想一想

const setTextLineFeed = text => text.replace(/\n/g,'
');. 將後端傳來包含換行符號的字串，先丟進這個function 處理過，好像很合理。

現在處理 ... SimonAllen技術部落格 Menu Home About Series Tags Archives RSS SignIn 這篇算是一個隨手紀錄，不要輕易用
替換換行↵，先想想有沒有其他的方式。

起因 前陣子在處理前人的Legacycode，有個情境是使用者在後台頁面輸入文章，前端把其show在前台頁面上。

當然後端會在需顯示的前台頁面API將其(字串)發過來，這個字串不包含HTML標籤，可能包含換行符號，為了處理這個狀況，前人寫了個共用function來將換行符號替換成HTML
標籤，例如： constsetTextLineFeed=text=>text.replace(/\n/g,'
'); 將後端傳來包含換行符號的字串，先丟進這個function處理過，好像很合理。

現在處理過的字串多了HTML標籤
，前端開發是用React，為了解決字串多了
標籤並達成換行，原本顯示文字的地方就用了dangerouslySetInnerHTML 這樣寫有什麼問題？ 其實
本身沒什麼問題，有問題是上面這個思路。

replace
後端API發來的response參數可能是這樣 text:"早安↵您好" 預期網頁上看到 早安 您好 而不是 早安↵您好 //or 早安您好 text值本來不包含HTMLTag，為了要處理↵，才用上了自己寫的setTextLineFeed去replace，只不過replace後的text變成 "早安
您好" 顯示方面就必須這樣寫

dangerouslySetInnerHTML 看看官方文件說明 dangerouslySetInnerHTML是React用來替代DOM的innerHTML。

普遍來說，從程式碼中注入HTML是個冒險的行為，你會很輕易地讓使用者暴露在cross-sitescripting(XSS)攻擊風險之下。

所以在React裡你還是可以直接注入HTML，但是你必須使用dangerouslySetInnerHTML，然後傳入一個有__html為key的object 只要用到innerHTML就有XSS風險，尤其不能信任使用者自行輸入的內容。

但是現實世界中，即便用了React開發網站，可能還是有需要用到innerHTML的情境(例如後端發來包含HTML的字串)，說穿了就是React要提醒開發者注意XSS攻擊故意將包好的innerHTML命名這麼長和使用方式改的很迂迴。

該怎麼改？ 總之釐清一下，現在要處理這兩點問題： 文字換行 預防潛在的xss風險 使用CSS處理換行 使用CSSwhite-space、overflow-wrap、word-break可以很好的處理換行 overflow-wrap https://developer.mozilla.org/zh-TW/docs/Web/CSS/overflow-wrap word-break https://developer.mozilla.org/en-US/docs/Web/CSS/word-break white-space https://developer.mozilla.org/zh-TW/docs/Web/CSS/white-space CSS具體用法就不解釋，詳情看文件。

所以setTextLineFeed這個function用不到了，可以拿掉replace
這個動作。

原本這樣寫

改成

{text}

p{ white-space:pre-wrap; } 就好了！ 使用replace替換危險字元 如果不使用CSS解，照舊使用dangerouslySetInnerHTML，那我們需要先濾掉潛在的危險字元才replace換行成
constreplaceXSSText=str=>{ returnstr.replace(/['&/]/g,dangerText=>{ return{ '':'>', "'":''', '/':'/', }[dangerText]; }); }; 不過要注意，若dangerouslySetInnerHTML對象本來本來就包含HTMLTag(不然幹嘛用dangerouslySetInnerHTML)，那用上面這個function去處理就完全沒意義了，會將、'、/顯示出來。

後記 其實這篇技術含量不高，但和周遭一些前端聊到，發現好幾位第一時間都是想replace，也許是我同溫層的問題（汗） 我覺得挺可怕的是：對很多寫JS習慣的前端工程師來說，遇到類似的問題都是習慣性地用JS去處理這件事情，撇開開發上的資安敏感度，CSS能解決的事就應當用CSS才對。

參考 https://zh-hant.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml https://developer.mozilla.org/zh-TW/docs/Web/CSS/overflow-wrap https://developer.mozilla.org/en-US/docs/Web/CSS/word-break https://developer.mozilla.org/zh-TW/docs/Web/CSS/white-space #javascript #React.js #css SimonAllen Follow Following 前端工程師 愛做白日夢的工程師\(^▽^)/ Facebook RelatedPosts ASP.NETCoreWebAPI入門教學-範例檔使用LocalDB練習 TalllKai WhyandHowIstartlearningprogramminglanguage? pei_______ Vue.js學習旅程Mile2–環境建置篇 yuhantaiwan Comments