關於 ZAP 弱掃報告的 Secure Header 問題(2)

依照上一篇「關於 ZAP 弱掃報告的 Secure Header 問題(1)」的設定，網頁必定跑版。
如果修改如下：
[code]
script-src 'self' 'unsafe-inline' 'nonce-xxx'; \
style-src 'self' 'unsafe-inline' 'nonce-xxx'; \
[/code]
加上 'unsafe-inline' 可以解決跑版問題，但是 ZAP 弱掃報告會出現兩條缺失：
[code]
script-src unsafe-inline
style-src unsafe-inline
[/code]
這意思就是不能用 unsafe-inline。

當移除 unsafe-inline 之後，如果網頁中有
[code]
<script>...
</script><style type='text/css'>...
</style>[/code]
可以加 nonce 解決：
[code]
<script nonce='xxx'>
...
</script><style type='text/css' nonce='xxx'>...
</style>[/code]
然後要注意以下幾點：
1.網頁原始碼的 HTML 裡頭，不能有 style='...' 或 onClick='...' 等等 event 的設定，這些都會被瀏覽器阻擋，可以使用 class='...'，然後將 css 設定在 style 加 nonce='xxx' 的段落裡頭。
2.如果用 js 執行 obj.innerHTML=s; 或 $(obj).html(s); 動態載入 HTML，則 s 裡頭也不能有 style='...' 或 onClick='...' 等等 event 的設定，這些也會被瀏覽器阻擋，但是 s 裡頭可以使用 class='...'，然後要改用 em=$(s); em.css(...); em.click(...); $(obj).html(em); 才能正常載入。
3.在 js 裡頭不能使用 eval(...); 函式。

由於以下格式無法使用
[code]
<xxx style='display:none;'>[/code]
必須改為以下格式才會隱藏
[code]
<style type='text/css' nonce='xxx'>.linka { display:none; };;</style><xxx class='linka'>[/code]

因此 $('xxx').show(); 會無法直接顯示，必須改為
[code]
$('xxx').removeClass('linka').show();;;[/code]

所有的 form 表單都必須加一個
[code]
<input type=hidden name='CSRFToken' value='xxxx'>[/code]
其中 xxxx 必須隨機產生，通常在 php 用 md5 計算 time()，並且存在 $_SESSION 裡頭
[code]
$_SESSION['CSRFToken'] = md5(time());;;[/code]
等 form submit 之後，在 php 再驗證是否正確。