csp(content-security-policy)是乙個http response header, 它描述允許頁面控制使用者**能夠為指定的頁面載入哪些資源, 可防止xss攻擊
使用方式：
content-security-policy: 指令1 指令1的值1 指令1的值2 指令1的值3; 指令2 指令2的值1 指令2的值2
複製**
font-src
frame-src
img-src
script-src
media-src
style-src
...等等，其他參考mdn
複製**
font、iframe、img、script...這些資源，比如有乙個html頁面的response header是:
content-security-policy: img-src a.b.c; script-src 'unsafe-inline' a.b.c; style-src 'self'
複製**
a.b.c域的、a.b.c域的指令碼和行內指令碼(如這些xx-src，一般常見的配置有：
host配置
可精確匹配也可萬用字元匹配：
複製**
最後，有乙個通用化配置——default-src，你給了它什麼值，其他幾個指令就預設什麼值。其他指令如果有設定，那自身的值會覆蓋default-src的值
schema配置
data: => datauri，比如base64
blob: => blob資源
http: => 顧名思義
https: => 顧名思義
...一般是這些比較多，其他參考mdn
複製**
=>描述了。eg：
複製**
self
只能載入自身相同的域資源，其他如data:，blob:就不能了
unsafe-inline上報指令
如果設定了上報指令的上報位址，當頁面有載入不合法的資源，將會往那裡上報。比如
content-security-policy: img-src www.qq.com; report-uri
複製**
www.qq.com之外的的時候，將會阻塞載入，並在控制台報錯，再上報到上報的資料就是這些,瀏覽器幫你拼裝好了。當然，隨便寫的路徑肯定是404的，這個自己起乙個伺服器就可以收到這個上報
目前階段，一般使用report-uri上報，用法是後面接上上報位址。report-to是另乙個上報指令，功能更豐富，使用方式稍微麻煩一點
content-security-policy: report-uri
content-security-policy: report-uri /current_page_report
複製**
csp如何在自己前端專案落地
第一階段
使用content-security-policy-report-only頭而不是直接使用content-security-policy。content-security-policy-report-only顧名思義，只是上報，不會阻塞資源載入。因此頁面改造第一步是先通過僅僅上報的頭來觀察一段時間，看看哪些資源哪些case是不符合csp的，漏掉的加上，不合理的乾掉
初始化資源指令，給default-src乙個'self'，讓資源都預設走本地。其次通過其他方式改變header（我使用了瀏覽器外掛程式的方式，比較簡單暴力。其實還可以自己開個伺服器做**、本地起nginx加頭等等方式都可以），觀察控制台報錯，再把漏掉的資源補齊，如cdn站點、base64的data:、第三方sdk、cos儲存位址等都是最常見的case
補齊資源，讓頁面不再報錯；一些是不太優雅或者有風險的case，自己再另外衡量要不要換另一種方式引入或者去掉
另外，如果有iframe、worker、websocket這些的，也需要配置一下csp
第二階段
觀察一段時間後，自己的上報站點如果有csp報錯，那麼去解決掉，然後繼續觀察一段時間重複同樣的步驟，直到沒有csp錯誤。當上報站點再也沒有csp錯誤或者錯誤比較少能接受範圍內，將content-security-policy-report-only換成content-security-policy再次上線
線上不可能也要人家裝外掛程式啊、**啊，如何修改這個頭
一般頁面就在nginx上對html配response header
location ~* .(html)$
複製**
如果是新需求可能涉及到新的資源引入怎麼辦
確定知道的源，新增header配置；不確定的最好自己設定乙個中轉服務，或者重新思考一下需求/技術方案合理性；實在沒辦法，需要刪除default-src設定，並且img-src需要妥協一下了
如果有新頁面上線且舊頁面已經不使用report-only了怎麼辦
nginx配置一下，不同的頁面使用不同的頭
location /a
location /b
複製**
Web前端的初步了解
git初步了解 github和git 功能使用git的原因 github和git的關係 git是一款免費 開源的分布式版本控制系統，用於敏捷高效地處理任何或小或大的專案 git是乙個開源的分布式版本控制系統，用以有效 高速地處理從很小到非常大的專案版本管理 當團隊合作是，每個人都有各自的分工，git...
前端了解的協作流程
設計師分享的他們的工作流程 解釋一下就是 第一步，視覺設計階段，設計師按寬度750px iphone 6 做設計稿，除外所有設計元素用向量路徑來做。設計定稿後在750px的設計稿上做標註，輸出標註圖。同時等比放大1.5倍生成寬度1125px的設計稿，在1125px的稿子裡切圖。第二步，輸出兩個交付物...
gulpJs前端構建工具的了解
其實掌握四個就夠了 gulp.src 方法正是用來獲取流的，但要注意這個流裡的內容不是原始的檔案流，而是乙個虛擬檔案物件流 vinyl files 這個虛擬檔案物件中儲存著原始檔案的路徑 檔名 內容等資訊，這個我們暫時不用去深入理解，你只需簡單的理解可以用這個方法來讀取你需要操作的檔案就行了。其語法...