angularJS 顯示帶html的文字

2021-09-02 15:13:19 字數 963 閱讀 9984

一般我們寫**的時候需要渲染帶html結構的字串。在使用anjularjs時使用ng-bind-html就可以實現渲染。

但是angularjs繫結的資料都會預設以文字的形式輸出,並不會去識別html標籤,這樣做主要是為了防止html標籤中的注入攻擊,提高了安全性。那麼該如何解決呢。

通常使用這種方法:

靜態頁面:

過濾器配置

return function (html)

}]) 或者

return function (text) ;

}]);

為什麼要這樣做呢,這是因為如果在angularjs中繫結的資料有html標籤時,會被angularjs認為是不安全的而自動過濾掉,為了保留這些標籤就需要開啟非安全模式,這是非常危險的。$sce是angularjs自帶的安全處理模組,因此需要$sce.trustashtml()方法將資料內容以html的形式解析並返回。

幾種繫結方式的對比

(1)ng-bind-html和內建的$sanitize服務

$sanitize會自動對html標籤進行淨化,並會把標籤的屬性以及繫結在元素上的事件都移除,僅保留了標籤和內容。

ng-bind-html指令是通過乙個安全的方式將內容繫結到html元素上,該屬性依賴於$sanitize,需要在專案中引入angular-sanitize.js檔案,並在module定義時注入該服務ngsanitize

使用ng-bind-html容易引起xss(指令碼注入攻擊),這一點一定要注意。

(2)ng-bind-html和$sce.trustashtml()

它不再經過sanitize服務的淨化,直接作為元素的.html()繫結給元素,保留所有的屬性和事件,這一行的內容不依賴於ngsanitize模組,$sce服務是內建的。

(3)ng-bind

繫結的值就作為字串填充到元素裡。

angularjs 許可權控制顯示辦法

在專案中遇到根據使用者不同的角色顯示不同內容的需求?下面是我自己想的一種解決辦法 一 定義使用者角色 使用者角色 service var roleserviceobj 當前角色 var currentrole 資料字典,資料對應的角色 var rolenamedata 設定當前角色 function...

echo顯示帶顏色

不記得從 拷的了,這個是別人部落格上覆制的,作為筆記 echo顯示帶顏色,需要使用引數 e 格式如下 echo e 033 字背景顏色 文字顏色m字串 033 0m 例如 echo e 033 41 37m tonyzhang 033 0m 其中41的位置代表底色,37的位置是代表字的顏色 注 1 ...

angularjs解析帶換行 n的字串

我需要將資料庫中儲存的字串在html頁面上顯示,結果發現字串中的 n在頁面是沒有作用,也就是沒有換行。sce unsafe attempting to use an unsafe value in a safe context.這是因為angularjs為了系統安全著想,在web安全中xss cro...