在「Gg / 如何在Gmail撰寫Html內容的信件」的第2個方法
利用瀏覽器的檢查與編輯HTML功能
貼入編輯好的Html內容
後來想到既然可以直接編輯HTML內容
那可不可以用動態書籤的方式來貼入Html內容
這個Javascript程式碼很簡單、也很常見
原理就是選取到目標網頁物件，再利用innerHTML方法寫入內容
所以要先知道Gmail信件內容的元素名稱
還是用相同的方式-利用瀏覽器的檢查功能
id 雖然是唯一值，但可能每次都不一樣，因此改用class
其中有個 editable的class屬性
感覺就是編輯信件內容用的
搜尋網頁Html原始碼也確實只有這裡有class為editable的元素
接下來在Codepen測試程式碼
See the Pen
gmail editable by 莊幸諺 (@trico109748007)
on CodePen.
程式碼執行沒問題之後就改寫成動態書籤
執行時，不出意外出了意外
瀏覽器報錯
This document requires 'TrustedHTML' assignment.
萬事求google大神
爬文之後，在這篇文章「[Day9] 最新的 XSS 防禦：Trusted Types 與內建的 Sanitizer API」
可以知道這是chrome瀏覽器的安全設定，用來避免XSS攻擊
處理的方式是建立Trusted Types policy來處理innerHTML寫入的內容
再參考這篇「getting error this document requires trustedhtml assignment in chrome」的方法
利用trustedTypes.createPolicy建立一個
新的 Trusted Types policy(名稱可以自訂，這裡是forceInner)
用其中的createHTML建立一個函式來處理Html內容
不過這個範例其實完全沒有做任何過濾處理
只是建立一個箭頭函式，將傳入的資料(to_escape)再回傳出去
1 2 3 |
var escapeHTMLPolicy = trustedTypes.createPolicy("forceInner", { createHTML: (to_escape) =>{return to_escape;} //箭頭函式 當箭頭函式裡的內容只有'return'的時候，我們可以拿掉return和外面的大括號 }); |
正規的用法可以參考「TrustedHTML」的說明資料
修改後的程式碼如下
See the Pen
gmail editable fix by 莊幸諺 (@trico109748007)
on CodePen.
改寫成動態書籤，再測試就成功寫入內容了
輸入純文字
輸入Html格式
