一??Content Security Policy? CSP

中文翻譯

①? 背景引入

++++++++++++  "重點提煉"  ++++++++++++

1) CSP最初被設計用來'減少XSS跨站點腳本攻擊',該規(guī)范后續(xù)版本還可防止其他如點擊劫持形式的攻擊

2) CSP 的實質就是'白名單'制度

  [1]、網站開發(fā)者'明確'告訴客戶端,'哪些外部資源'可以'加載'和'執(zhí)行',等同于提供白名單

  [2]、它的實現和執(zhí)行全部'由瀏覽器完成',開發(fā)者只需'提供CSP頭配置'

  備注： 取決于'瀏覽器'的'支持'程度

  [3]、來限制'哪些外部資源(如JavaScript、CSS、圖像等)'可以'被加載',從'哪些url'加載

3) 大大增強了'網頁的安全性',攻擊者即使發(fā)現了漏洞,'也沒法'注入腳本

②? 啟用CSP的兩種方法

方式1：  --> 添加'響應頭',注意"單雙引號"嵌套

  add_header Content-Security-Policy "script-src 'self'; object-src 'none'";

方式2：  --> html中'head標簽'內嵌'meta標簽'

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; img-src https://*; child-src 'none';" />

優(yōu)先級： 如果 HTTP 頭與 Meta 定義'同時'存在,則'優(yōu)先采用 HTTP 中'的定義

③? ?CSP語法

1) default-src是'CSP指令',多個指令之間用'英文分號;'分割;

2) 'self'是'source'值,'多個'指令值用'英文空格'分割

④? CSP指令匯總? 各個指令的解讀

實質： '資源類型' 限制選項,掌握'常見'的即可

1) script-src：定義'js文件'的過濾策略

2) style-src： 樣式表'css'

3) img-src：   圖像'各種格式'

4) media-src： 媒體文件'音頻和視頻' --> 如' <audio>, <video>'等元素

5) font-src：  字體文件

6) object-src：插件'比如 Flash'

7) child-src： 框架

8) frame-src： 嵌入的'子frame'資源 '比如<frame>、<iframe>、<embed>'

9) connect-src：定義請求連接文件的過濾策略 '（通過 XHR、WebSockets、EventSource等）'

   script-src * 'self' 'unsafe-eval' 'unsafe-inline' blob: data: gap:;

10) worker-src：worker腳本 --> "了解"

11) manifest-src：'manifest 文件'

12) default-src 'self'  用來設置上面'各個選項'的'默認'值 --> "當前域名",需要'加引號'

 備注： 如果同時設置某個單項限制'比如font-src'和'default-src',前者會'覆蓋'后者

+++++++++++  "其它"  +++++++++++

base-uri：限制'<base#href>'

form-action：限制'<form#action>'

重點1：如果同一個限制選項'使用多次',只有'第一次'會生效

重點2：由于 img-src '不存在',它使用的是 'default-src';如果'存在',則會'覆蓋'

Content Security Policy (CSP)中blob:的用法?? object-src blob? blob協(xié)議

⑤ scp官網default-src指令解讀? ?default-src指令

⑥????CSP 常用source值

+++++++ "(1) host-source"  +++++++

備注： '推薦'完整的白名單,盡量不只使用'協(xié)議'或'通配符'

source相關參考?

每個'CSP限制選項'可以設置'以下幾種值',這些值就構成了'白名單'。

1) 多個主機名：example.org https://example.com:443

2) 帶url：example.org/resources/js/

3) 通配符：*.example.org,*://*.example.com:*'（表示任意協(xié)議、任意子域名、任意端口）'

4) 關鍵字'self'：當前域名,需要'加引號'

5) 關鍵字'none'：'禁止'加載任何外部資源,需要加'引號'

+++++++ "(2) scheme-source"  +++++++

?data:協(xié)議

+++++++ "(2) 'self'"  +++++++

1) 只能'加載本域'資源

2) chrome瀏覽器隨對'self'不包含'blob:' 協(xié)議

??

組織內聯(lián)代碼執(zhí)行和eval功能?

⑦? 報錯匯總

?connect-src報錯??https://*不生效使用https:? 其它報錯? ?Refused to load the image 'blob:

1） 加載視頻'失敗'  --> 沒有指定"connect-src 'self'",繼承'默認值self'

  Refused to connect to 'blob:http://XXX' because it violates '違反' the \

    following Content Security Policy directive: "connect-src 'self'"  \

    Note that 'connect-src' was not explicitly set, \  'connect-src沒有指定'

      so 'default-src' is used as a fallback.  '回退使用default-src的值'

  1) the 'violated directive' is "connect-src 'self'",

  2) but your <meta CSP> contains 'connect-src * blob: data: gap:';

2)  image報錯  --> '由于*不包含blob:'

  Refused to load the image 'blob:'

  [1]、將 'img-src blob:' 添加到 Content-Security-Policy 值

  [2]、或者將 'blob:' 添加到現有的 'default-src' 值

vue項目構建后CSP報錯解決辦法?? CSP 256報錯? ?CSP常見報錯匯總

重要圖片的base64編碼?data:image

⑧? 參考鏈接

阮神Content Security Policy 入門教程

內容安全策略

CSP內容安全策略

Chrome插件modheader,通過隨意設置響應頭來測試CSP

CSP在前端項目落地的兩個階段文章來源地址http://www.zghlxwxcb.cn/news/detail-471982.html

到了這里，關于安全頭響應頭(一)Content-Security-Policy的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！