http之CSP

littlebirdflying發表於2018-09-22
HTTP

CSP 的概念

Content-Security-Policy 內容安全策略

讓網站變得更加安全

詳細資料

mdn csp

作用

限制資源獲取

報告資源獲取越權

限制方式

default-src限制全域性

制定資源型別

資源型別

connect-src

img-src

font-src

media-src

frame-src

script-src

manifest-src

style-src

一些案例

限制內聯指令碼

在 web 領域，xss 可以通過注入指令碼的方式進行攻擊

const http = require('http')
const fs = require('fs')

http.createServer(function (request, response) {
  console.log('request come', request.url)

  if (request.url === '/') {
    const html = fs.readFileSync('test.html', 'utf8')
    response.writeHead(200, {
      'Content-Type': 'text/html',
      'Content-Security-Policy': 'default-src http: https:' // 只能通過http或https的方式載入
    })
    response.end(html)
  } else {
    response.writeHead(200, {
      'Content-Type': 'application/javascript'
    })
    response.end('console.log("loaded script")')
  }
}).listen(8888)

console.log('server listening on 8888')
複製程式碼
<body>
  <div>This is content</div>
  <!-- 內聯指令碼 -->
  <script>
    console.log('inline js')
  </script>
</body>
</html>
複製程式碼

控制檯報錯

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src http: https:". Either the 'unsafe-inline' keyword, a hash ('sha256-KU4m2rqHAFwi569te1RE5P3qW1O/qJ+m+gVo66Frm4k='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

限制外鏈載入 script

限制外連結在 的 script 通過哪些域名進行載入

如，限制只能通過本域名進行載入 外鏈 script

// server.js
'Content-Security-Policy': 'script-src \'self\'' // 限制外鏈 script 只能是本域名下的
複製程式碼
// test.html
<script src="test.js"></script>  本域名下的可以使用
<script src="https://cdn.bootcss.com/jquery/3.3.1/core.js"></script>
複製程式碼

8888埠訪問，可以看到報錯資訊

Refused to load the script 'https://cdn.bootcss.com/jquery/3.3.1/core.js' because it violates the following Content Security Policy directive: "script-src 'self'".

檢視 network，發現在瀏覽器端就被 block掉了，沒有傳送請求。

http之CSP

限制指定某個網站

'Content-Security-Policy': 'script-src \'self\' https://cdn.bootcss.com' // 限制外鏈 script 只能是本域名下的，允許指定域名script載入
複製程式碼

這樣就沒有報錯資訊了，network 看到 core.js載入成功

限制 form 表單提交範圍

form 不接受 default-src 的限制，可以通過 form-action來限制。

下例中 form 會調轉到 baidu.com，通過 form-action限制瀏覽器會報錯。

// server.js
'Content-Security-Policy': 'script-src \'self\'; form-action \'self\'' // 限制表單提交只能在本域下
複製程式碼
// test.html
<form action="http://baidu.com">
    <button type="submit">click me</button>
  </form>
複製程式碼

報錯資訊

Refused to send form data to 'http://baidu.com/' because it violates the following Content Security Policy directive: "form-action 'self'".

限制圖片連結

通過全侷限制 default-src 就可以實現

'Content-Security-Policy': 'default-src \'self\'; form-action \'self\'' 
複製程式碼

限制 ajax 請求

通過 connect-src

'Content-Security-Policy': 'connect-src \'self\'; form-action \'self\'; report-uri / report' 
    })
複製程式碼
<script> 
    fetch('http://baidu.com')
  </script>

複製程式碼

報錯資訊

Refused to connect to 'http://baidu.com/' because it violates the following Content Security Policy directive: "connect-src 'self'".

彙報

// server.js
'Content-Security-Policy': 'default-src \'self\'; form-action \'self\'; report-uri / report' 
複製程式碼

network檢視，傳送的內容，是 標準的 csp report 的內容。

http之CSP

允許載入但彙報

使用 'Content-Security-Policy-Report-Only'

// server.js
'Content-Security-Policy-Report-Only': 'default-src \'self\'; form-action \'self\'; report-uri / report' 
複製程式碼

資源會正常載入，但是彙報 Report-Only相關的錯誤提醒

在 html 中使用 csp

和在服務端使用效果相同，最好在服務端做。

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; form-action 'self';">
複製程式碼

report-uri 不允許在 html 的 meta 中使用，只能在服務端通過 head 進行設定。

相關文章