以下幾點內容將是我接下來要講述的重點:
使用ng-bind指令轉碼HTML
你可以用ng-bind指令來轉碼整個網頁。它將會轉碼所有HTML標簽但是仍然顯示本來的樣子。下列代碼顯示了ng-bind的用法。
下面的圖證明了以上言論。注意在輸入欄中的HTML代碼。它和在HTML頁面中完全一樣。
使用安全的方式插入HTML,也可以使用 ng-bind-html 指令忽略掉諸如“script”這樣的元素
這是解決XSS攻擊的關鍵. 也就是說,你仍然應該關注諸如“img"這樣的元素 ( 作為一部分包含進了白名單中; 還有空元素) 因為它恩能夠在你的web頁面上展示任何圖片 (包括非法的那些), 因此,它也可能會給你的web頁面帶來不利影響. 使用 ng-bind-html 指令皆可以AngularJS諸如“script”這樣的JavaScript標記直接被忽略掉. ng-bind-html 指令會計算表達式,并且用一種安全的方式將結果HTML插入元素中. 對于用戶會輸入包含了HTML內容(比如在評論中)的情況,放到 ng-bind-html指令中可以確保文本被編碼為白名單中的安全HTML字符. 安全字符的白名單被作為 $sanitize 的一部分編碼,下面會講到. 下面這些都被包含進了安全列表中 (直接從源代碼中獲得):
空元素: 代碼如下:area,br,col,hr,img,wbr. 詳細信息請訪問 http://dev.w3.org/html5/spec/Overview.html#void-elements
塊元素: 代碼如下:address,article,aside,blockquote,caption,center,del,dir,div,dl,figure,figcaption,footer,h1,h2,h3,h4,h5,h6,header,hgroup,hr,ins,map,menu,nav,ol,pre,script,section,table,ul
內聯元素: 代碼如下:a,abbr,acronym,b,bdi,bdo,big,br,cite,code,del,dfn,em,font,i,img,ins,kbd,label,map,mark,q,ruby,rp,rt,s,samp,small,span,strike,strong,sub,sup,time,tt,u,var
結尾標記元素: 代碼如下:colgroup,dd,dt,li,p,tbody,td,tfoot,th,thead,tr,rp,rt. 詳細信息請訪問 http://dev.w3.org/html5/spec/Overview.html#optional-tags
下面的這兩個元素 因為其內容不收信任,需要被規避掉. 在這種情況下,如果你想要展示它們,就要使用 $sce 服務,調用Angular 的 trustAsHtml 方法來執行下面提到的元素.
如下呈現的代碼展示了 ng-bind-html 指令的使用.
下面這張圖片展示了當在文本域中輸入HTML代碼,Angular用一種安全的方式插入到DOM時,是什么樣子的. 注意 “img” 元素是上述列表中空元素的一份子. 因為代碼被輸入到了文本域中,作為”img"出現的圖片被放到了受信任的列表(白名單)中。
信任并插入整段HTML
警告: 這很危險,并且可能很容易就最終造成你web站點的污染. 只有當你知道并且充分確認時,你才應該使用 trustAsHtml. 如此,你就有充足的信心認為這段文本是可以被信任的, 你應該使用$sce 服務并且調用 trustAsHtml 方法來講整段HTML插入DOM中。在$sce服務被用來調用 trustAsHtml 方法來信任一段HTML代碼時,請留意HTML和其中的JavaScript代碼塊. 在這種情況下,一段諸如 “” 這樣的代碼被插入了,它最后可能會也給現有的HTML元素加上樣式。這可能不是很好。人們也可能采用那種方式用非法的圖片替換背景圖片.
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com