關於Web的安全內容政策 - Content Security Policy (CSP)
閱讀時間約 5 分鐘
我們前面已經介紹過「關於Web的同源政策(Same Origin Policy)」，大致上對於Web的安全政策有一些基本的認識了，那麼在嚴格把關之下，仍需適度的開放約定的來源，此為「Web世界的邦交國政策 — 跨來源資源共用（Cross-Origin Resource Sharing, CORS）」，但是開放的同時，難免遇到一些攻擊，諸如「你的資料如何被偷走？ Web安全篇 - 跨站請求偽造(CSRF )」、「Web世界中潛藏的危機 - 跨網站指令碼(XSS)」這類的攻擊手法，我們也具備一定的知識，接下來就進入到如何制定一些安全內容政策，來防止這類型的攻擊，也就是今天的主題Content Security Policy(CSP)。
文章最後將會提供一套CSP安全檢查工具，保護自身，避免踏入不安全地帶！
其實簡單來說就是白名單的概念，過濾入境人員，避免造成危害，在Web世界中亦是如此，防止載入不安全的內容，就算網站中具有注入腳本的地方也沒有關係，只要不載入或訪問外部資源就相對安全了。
為什麼制定安全政策這麼重要呢？
國家與國家之間雖然可以透過護照來入境，但總不可能所有人都無限制的進入吧！來來往往的人難免存在一些犯罪份子、通緝犯...等，如果未進行管制，那對國家的人民來說勢必會造成人身安全問題，因此對於入境人員就會有安檢機制，不能攜帶槍械、彈炮...等有害物品進入，被管制中的通緝犯也不能任意入境，這些都是基於安全政策，那麼網路世界呢？ 其實Web中就是透過Content Security Policy(CSP)的方式來制定這樣的規則。
可以制定哪些規則呢？
這邊僅著重於概念的描述，因此列出幾個常見的來源白名單配置選項，至於完整選項請參考這裡。
- connect-src： 指定來訪的連接源， websocket、XHR...等。
- script-src：指定外部腳本的來源，通常我們會動態載入外部的腳本，那假設我們僅信任某些網站，就可以將這類網站資源加入白名單。
- image-src: 圖片的來源。
- media-src： <video>、<audio>...等影音來源。
- frame-ancestors： 是否允許網站內嵌。
- 更多規則請查看...
使用範例
以下的表達方式代表我們的腳本只能是相同domain來源，多組規則就使用;隔開。
Content-Security-Policy: script-src 'self'; img-src 'self'
什麼時候使用？
- 互動式網站，例如留言、聊天...等，可以讓使用者輸入的網頁。
- 與金流相關的重要功能。
- 與使用者個人資訊高度相關的頁面。
什麼時候不需要使用？
- 靜態網站：當網站的目標族群僅是提供瀏覽用。
- 不需要登入也沒有Cookie，那麼這類型網站就可以不必使用Content Security Policy (CSP)。
來檢驗我們瀏覽的網站是否足夠安全吧！
Google也非常佛心的提供了一套CSP Evaluator的檢查網站，讓我們將有疑慮的網址透過此工具進行檢查。
舉例來說，我們將「https://translate.google.com.tw/?hl=zh-TW」Google翻譯的網址，丟給工具進行檢查，以下會幫我們檢測出該網站的安全政策規則是否達標。
覺得上述步驟太過於複雜嗎？ 因為上面的方式主要提供給開發者進行檢查自己的網站是否符合安全政策，對於一般使用者來說，假設使用的瀏覽器是chrome，那麼可以安裝這套由上述網站而來的物Chrome Extension CSP Evaluator。
安裝完成後，我們在進入一個網站時，右上角就會有安全等級標示，如果我們想要了解該網站哪些規則未制定，那麼就可以點開來看詳細資訊，不過一般使用者只需要知道以下標示的顏色所代表的意義即可：
資源參考
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
- https://www.imperva.com/learn/application-security/content-security-policy-csp-header/
- https://content-security-policy.com/
📝更多Web相關文章
為什麼會看到廣告
94會員
267內容數
哈囉，我是阿Han，是一位 👩💻 軟體研發工程師，喜歡閱讀、學習、撰寫文章及教學，擅長以圖代文，化繁為簡，除了幫助自己釐清思路之外，也希望藉由圖解的方式幫助大家共同學習，甚至手把手帶您設計出高品質的軟體產品。
留言0
查看全部
阿Han的沙龍 的其他內容
你可能也想看
關於成長－人際篇最近有一些新的覺察，邁入大學的生涯後，更加的明白，有很多的事情需要自己去體會、感受。才能找出屬於自己的最佳解。
大學就是一個小型的社會，多少時間是社交，又多少時間是留給自己，是一個流動的狀態，卻是大部分會給我帶來情緒波動的主因。
最近感悟到，當我在面對與自己完全不同的人時學到了如果對方沒有主動問
2024-06-20
關於閱讀這回事（12）：不純粹的純粹不純粹的閱讀，你必然得到純粹的結論，例如看到討厭的同學發臉文，心裡開始品頭論足，最後得出他失戀失業的無能結論。嗯，或許討厭的同學只是單純實驗做失敗而已。
這年代了解不純粹的純粹很重要，還記得2024總統大選，有許多工程師小草放大自己的專業能力，覺得別人都很笨，用極大的意義解讀其他政治人物的動機？
2024-06-18
關於「送禮」的那些事：離情依依，怕感情變疏遠？畢業禮物、朋友送禮攻略！畢業季，離情依依，怕感情變疏遠！送別禮物特別能延續感情，但要送什麼好呢？讓友情歷久彌堅，分享好朋友送禮攻略！好書推薦「長輩沒教，但你一定要懂的81種送禮大學問」！
2024-06-18
輕小說「關於救下迷路幼女之後，住在隔壁的美少女留學生就開始經常出入我家這件事」ネコクロ集英社WEB小說大獎銀獎作品由集英社 DASH X文庫推出的校園戀愛輕小說「關於救下迷路幼女之後，住在隔壁的美少女留學生就開始經常出入我家這件事」是作家ネコクロ執筆撰寫、畫師綠川葉繪製插畫，因大受歡迎而獲得2021年第二屆集英社WEB小說大獎銀獎，目前在成為小說家吧網站上連載，日文版總共發行2卷，臺版發行至第1卷。故事主要講述
2022-07-23
Web 3.0的去中心化是未來嗎？
關於中心化與去中心化的二三事近期隨著區塊鏈應用越來越多，有些區塊鏈的支持者開始喊出「Web 3.0」的口號。他們認為去中心化的區塊鏈將成為新的 Web 3.0，取代因為網路巨頭而過度集中的 Web 2.0，成為眾人的網路。真的如此嗎？我認為，我們應該可以從歷史的角度回過頭來重新思考「去中心化」與「中心化」的關係。
2022-03-23
關於距離，以及安全的種種。人與人之間，舒適的距離到底該怎麼界定或者維持？
交會之後，錯身朝迥異的方向前進頭也不回？或者並行一段時間、爾後各赴前程就好？
最穩定的，是平行線嗎？
但，有沒有可能，在看不見的方向、角度、維度，根本早就漸行漸遠，甚至，從來沒有靠近過？所有交會與平行，都只是單一介面的表象，或者想像？
俗稱的，冷了。
2021-12-23
關於第四季流年運勢分析書的內容今天是九月七號，發文時間距離二十四節氣中的白露還有幾個小時的時間，趁這時候來說一下，我編寫客戶命書都是從隔一個月開始算起，比方說你八月來找我，內容將會自九月開始。
然而現在距離2022壬寅年的腳步越來越近，從十月開始到農曆年這段也就短短四個月.......
2021-09-07