瀏覽器沒法區分JS的來源,有的JS是來自應用自己的,而有的則有可能來自惡意注入。因爲瀏覽器沒法區分JS的來源,這可能會被XSS攻擊所利用。javascript
例如在一個博客網站,發表一篇包含惡意腳本的<script>
標籤的文章,這篇文章會保存在服務器中。當其餘人訪問這篇文章時,會在訪問者的瀏覽器中執行惡意的腳本。由於瀏覽器沒法區分JS代碼是好的,仍是壞的。瀏覽器都會下載並執行JS。css
Content-Security-Policy 的 HTTP Header 能夠指示瀏覽器只信任指定白名單的JS源。即便經過XSS攻擊注入了惡意的腳本文件,瀏覽器也不會執行。html
server { listen 8090; server_name localhost; root /Users/zhangyue/Desktop/csp; index index.html; add_header Content-Security-Policy "script-src 'self';"; location ~* \.(?:js|css)$ { expires 7d; add_header Cache-Control no-store; } }
jqeury的cdn能夠正常被加載java
添加CSP後,瀏覽器只會拋出一個錯誤,不會執行任何白名單以外的JS代碼nginx
除了javascript外,CSP還能夠對網站的其餘的資源進行限制web
# img-src 爲圖片資源增長白名單 server { add_header Content-Security-Policy "script-src 'self';"; # 只容許http://photocdn.sohu.com; 和 當面域名下的圖片進行加載 add_header Content-Security-Policy "img-src 'self' http://photocdn.sohu.com;"; }
可是值得注意的是,若是你不在nginx中對具體(css,js,image……)的資源做出限制,那麼就表明不限制資源的來源。默承認以加載任何來源的資源。shell
使用 default-src 能夠爲沒有指定白名單的資源,提供一個默認的白名單。瀏覽器
server { listen 8090; server_name localhost; index index.html; # default-src 爲沒有提供的資源提供了白名單: 'self',只容許加載當前域名下的資源 add_header Content-Security-Policy "script-src 'self';img-src 'self' http://photocdn.sohu.com;default-src 'self'"; }
除了經過配置Nginx,爲頁面添加CSP。還能夠經過 meta 標籤的http-equiv的屬性,添加頁面添加CSP。http-equiv能夠爲content屬性值提供,提供http頭。安全
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 添加CSP --> <meta http-equiv="Content-Security-Policy" content="script-src 'self';img-src 'self' http://photocdn.sohu.com;default-src 'self'"> <title>Document</title> </head> <body> </body> </html>
設置CSP,默認是靜止內聯JS代碼執行的。若是必定要執行內聯的JS代碼,能夠將 script-src 設置爲 'unsafe-inline' ,以容許內聯JS的執行。服務器
server { listen 8090; server_name localhost; index index.html; # 容許內聯js和本域名下的js執行 add_header Content-Security-Policy "script-src 'self' 'unsafe-inline';"; }
若是你擔憂內聯腳本的JS注入,可是又須要內聯JS的執行。可使用nonce屬性。CSP Header會返回一個隨機字符串,當它與script標籤的nonce屬性相匹配時,說明這段內聯的js是安全的,是能夠執行的。
可是這個隨機字符串,應當是惟一,不該該是寫死的。下面的例子,只是爲了說明。若是是固定的nonce值,那麼nonce沒有任何意義,由於攻擊者能夠將本身注入的script標籤也添加上相同的nonce值。
server { listen 8090; server_name localhost; index index.html; # 一個隨機的字符串 add_header Content-Security-Policy "script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa' 'self';"; }