CSP script-src unsafe-inline | 亂馬客

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

前言

同事詢問了一個 ZAP Scanning Report 中風險的問題， Medium script-src CSP: script-src unsafe-inline
因為web.config中設定了 Content Security Policy 的值，如下，

<system.webServer>
    <httpProtocol>
        <customHeaders>
        <add name="Content-Security-Policy" value="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

研究

因為 Razor View 中會使用到 inline 的 Javascript ，所以在 CSP 的 script-src 會加上 unsafe-inline 。
但 OWASP ZAP 覺得它不安全。那怎麼辦呢?
當然就要將它拿掉啦~ 所以將它拿掉後，原本 inline 的 js 就不 work 了。
而在 Console 中有請我們改用 hash or nonce 的方式。

Refused to execute inline script because it violates the following Content Security Policy directive: “script-src ‘self’ ‘unsafe-eval’”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-AVYwM+H46yBZAmewbW/qx/Gh1U6eAlJqAcgD+cPIMvk=’), or a nonce (‘nonce-…’) is required to enable inline execution.

最簡單的方式就是使用 nonce- 的方式，
所以就在 CSP 中加入 ‘nonce-cm1vaw==’ 如下，

<system.webServer>
    <httpProtocol>
        <customHeaders>
        <add name="Content-Security-Policy" value="default-src *; script-src 'self' 'nonce-cm1vaw==' 'unsafe-eval'; style-src 'self' 'nonce-cm1vaw==';" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

Inline JavaScript 就加上 nonce 如下，

1
2
3

<script nonce="cm1vaw==">
	doWhatever();
</script>

這樣設定後 in-line 就解決了，但 Console 在 modernizr-2.8.3.js:134 出現 4 個錯誤，

modernizr-2.8.3.js:134 Refused to apply inline style because it violates the following Content Security Policy directive: “style-src ‘self’ ‘nonce-cm1vaw==’”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-CwE3Bg0VYQOIdNAkbB/Btdkhul49qZuwgNCMPgNY5zw=’), or a nonce (‘nonce-…’) is required to enable inline execution.
modernizr-2.8.3.js:134 Refused to apply inline style because it violates the following Content Security Policy directive: “style-src ‘self’ ‘nonce-cm1vaw==’”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-MZKTI0Eg1N13tshpFaVW65co/LeICXq4hyVx6GWVlK0=’), or a nonce (‘nonce-…’) is required to enable inline execution.
modernizr-2.8.3.js:134 Refused to apply inline style because it violates the following Content Security Policy directive: “style-src ‘self’ ‘nonce-cm1vaw==’”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-LpfmXS+4ZtL2uPRZgkoR29Ghbxcfime/CsD/4w5VujE=’), or a nonce (‘nonce-…’) is required to enable inline execution.
modernizr-2.8.3.js:134 Refused to apply inline style because it violates the following Content Security Policy directive: “style-src ‘self’ ‘nonce-cm1vaw==’”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-YJO/M9OgDKEBRKGqp4Zd07dzlagbB+qmKgThG52u/Mk=’), or a nonce (‘nonce-…’) is required to enable inline execution.

查看了一下，因為 modernizr-2.8.3.js 有使用到 inline style，而剛才的設定中，把 style-src 中的 ‘unsafe-inline’ 也改成用 nonce-的方式，所以Browser就跟我們說，要加入 nonce or hash 的方式，它有4個，把那4個 sha256 加進去也可以，但要加4個。
所以還是使用 nonce- 的方式會比較容易，只是這樣要改 modernizr-2.8.3.js 。
在第 121 行，原本是

1	style = ['','<style id="s', mod, '">', rule, '</style>'].join('');

它是 inline 的 style ，所以要加上 nonce- ，改成如下，

1	style = ['', '<style id="s', mod, '" nonce=\"cm1vaw==\">', rule, '</style>'].join('');

這樣就都 ok 了。

註: 用了 nonce-value 後，就不需再加 strict-dynamic

回顧

在上面透過 nonce-value 來取代 unsafe-inline 解決資安Report的問題。
而 CSP 中的 default-src *; 是將全部的CSP集合設為 * ，可參考 CSP: default-src 的範例說明。
筆者認為，如果對 CSP 的各項集合不是很熟悉的話，先一個一個來設定，例如，我一開始會先設定 frame-src ‘self’ 。
如果需要再針對 script-src or style-src 再加進去設定。
像有的黑箱工具會檢查有沒有 CSP ( Missing Content Security Policy 的 Issue)，這時設定 frame-src ‘self’ 就 PASS 了，也不會影響到原有其他的行為。
也可以將要設定的值，設定在 Content-Security-Policy-Report-Only 中，這樣 Console 會出現錯誤，但不會影響正常的執行。

<system.webServer>
    <httpProtocol>
        <customHeaders>
        <add name="Content-Security-Policy" value="frame-src 'self';" />
        <add name="Content-Security-Policy-Report-Only" value="default-src 'self';" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

以上針對 CSP 的設定希望對大家有幫助，有任何問題也請跟我連絡討論。

參考資料

CSP: default-src
Using a nonce with CSP Script
CSP Inline Styles
Content-Security-Policy-Report-Only

缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是yilia根目录）执行以下命令：
npm i hexo-generator-json-content --save

3、在根目录_config.yml里添加配置： jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true