這是可怕的兔子洞
Content-Security-Policy (CSP) —— 是我在這兩個禮拜裏學到,叫作惡夢的代名詞。

本來我是跟著 webpagetest.org 的清單進行著各種優化,到最後一個項目裏看到了 CSP 這個條件,查了一下覺得不就只是在 header 上加個一兩句嗎?這簡單啦。於是隨便弄了出來。

兩天後發現 Google Recaptcha 壞掉了,然後又發現因為寫 blog 的時候,間中我會插一點 script 和 style,這些也被 CSP 列為 inline 然後擋掉了。

那我在 default-src 上面加個 unsafe-inline 好了,結果又因為 Google Recaptcha 有獨立的 script-srcframe-src 等 policy,所以 script / style 等都不會套用到 default-src 上。

沒辦法,只好在 script-src 上加 unsafe-inline 吧。弄了一會突然如夢初醒 —— 既然全部都 unsafe-inline ,那我上 CSP 幹嘛啊?

而且 mdn 上也這樣寫道
Unsafe inline styles
Note: Disallowing inline styles and inline scripts is one of the biggest security wins CSP provides. However, if you absolutely have to use it, there are a few mechanisms that will allow them.

於是又著手設計會懂得根據內容動態加插 CSP 規則的機制。然後發現 blog 的  BBCode Parser 寫得糟透了,結果重寫了一遍

~兩天後~

好吧,這次真的弄好了吧?文章裏的 <script> 跟 <style> 會自動上 nonce 了,沒問題了吧?

還沒!原來 Blog 主頁的頭像居然是用 inline 貼上去的!這下頭痛了,要怎麼避免 inline 呢?想了幾分鐘決定整合在主要 style 的 nonce 裏面去。

還沒!以前的文章有部份圖片直接嵌入了 <svg> ,而且裏面有一大堆 inline style,這些也要算!於是花了雨天遂‧篇‧文‧章另外截圖並重新上載,再修改內文……

新的 BBCode Parser bug 掉了,部份文字被吃掉了沒吐出來!

Y-Youtube 跟 Vimeo 的文章被檔掉了!

這該死的 CSP,啊啊呀呀呀AAAAaaaaaa……

……

如各位所見,小弟廢了九牛二虎之力讓這玩意上了 CSP,是説這只是個 blog 根本不需要什麼 CSP 啦!但既然開了坑就只能跳了。

累死了,現在寫這篇文章的途中也發現好些地方 bug 掉了得停來修。今次應該沒了吧?
Profile picture
斟酌 鵬兄
Mon Apr 11 2022 12:48:05 GMT+0000 (Coordinated Universal Time)
Last modified: Mon Apr 11 2022 12:48:12 GMT+0000 (Coordinated Universal Time)
Comments
No comments here.
Do you even comment?
website: 
Not a valid website
Invalid email format
Please enter your email
*Name: 
Please enter a name
Submit
抱歉,Google Recaptcha 服務被牆掉了,所以不能回覆了