javascript && jQuery 實現html轉義

2501207950 發布于2019-08-20 16:27 / 1851人閱讀

摘要：解決方案實現轉義解碼獲取實體借助和函數來轉譯方法獲取設置的是匹配元素的文本內容，且會將中的預留字符如大于號轉換成字符實體，以便于正確顯示方法是獲取設置匹配元素的內容。實現轉譯編碼解碼

背景：

做快站項目遇到的一個bug，一圖勝千言，bug如下圖：

這個問題只在某些帳號下出現，絕大數其他帳號都是正常的，正常情況下是這個樣子的：

為啥會因帳號而已呢？猜測是因為前端渲染模板所用的數據惹得禍 :（

分析

查看DOM結構：

正常情況下，藍框內的所有li標簽應該都在紅筐內。

再看渲染模板用的數據：

果然，數據里面含有html標簽，可我在渲染模板之前沒有做轉義處理，恩，XSS攻擊就是這么來的。

解決方案

jQuery 實現html轉義

function htmlEncode(value){  
  return $("").text(value).html();  
}  
//Html解碼獲取Html實體  
function htmlDecode(value){  
  return $("").html(value).text();  
}

借助text()和html()函數來轉譯html
text() : 方法獲取/設置的是匹配元素的文本內容，且會將HTML中的預留字符（如大于號（>））轉換成html字符實體，以便于正確顯示.
html(): 方法是獲取/設置匹配元素的html內容。

javascript 實現html轉譯

//編碼
function html_encode(str)  
    {  
        var s = "";  
        if (str.length == 0) return "";  
        s = str.replace(/&/g, ">");  
        s = s.replace(//g, ">");  
        s = s.replace(/ /g, " ");  
        s = s.replace(/"/g, """);  
        s = s.replace(/"/g, """);  
        s = s.replace(/
/g, "
");  
        return s;  
    }  
  
//解碼  
function html_decode(str)  
{  
    var s = "";  
    if (str.length == 0) return "";  
    s = str.replace(/>/g, "&");  
    s = s.replace(//g, ">");  
    s = s.replace(/ /g, " ");  
    s = s.replace(/"/g, """);  
    s = s.replace(/"/g, """);  
    s = s.replace(/
/g, "
");  
    return s;  
}

GPU云服務器云服務器 html不轉義&lt jsp &amp轉義符 jquery&ampamp html &lthr&gt

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

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

庫&amp;插件&amp;框架&amp;工具

摘要：一些有用的一些有用的，包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享淺談前端線上部署與運維說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與SRE對接、一起完...

Codeing_ls 2019-08-01 18:22 評論0 收藏0
庫&amp;插件&amp;框架&amp;工具

摘要：一些有用的一些有用的，包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享淺談前端線上部署與運維說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與SRE對接、一起完...

xiaowugui666 2019-08-21 18:43 評論0 收藏0
ES6 Features系列：Template Strings &amp; Tagged Templ

摘要：由兩部分組成模板起始符，稱為沉音符反引號，其內容被識別為字符串模板。其實這是通過屬性操作中的結果，也就是說屬性將對控制符進行轉義從而實現按照普通字符輸出。的語法是緊跟在后面，兩者間不能有空格或制表符等。 1. Brief ES6(ECMAScript 6th edition)于2015年7月份發布，雖然各大瀏覽器仍未全面支持ES6，但我們可以在后端通過Node.js 0.12和io....

MyFaith 2019-08-21 10:34 評論0 收藏0
用JavaScript來實現Tab點擊切換

　　現在很多都用到Tab 選項卡切換效果，例如點擊切換、滑動切換、延遲切換、自動切換等多種效果，本篇文章講述的就是通過原生 Jquery 來實現 Tab 點擊切換的效果。　　例如：　　html　　<body> 　　<divstyle="position:relative;margin-top:56px;display:flex;justify-content:space...

3403771864 2022-10-24 21:40 評論0 收藏0