---
# System prepended metadata

title: '[資訊安全] CSP'
tags: [資訊安全, CSP]

---

# [資訊安全] CSP
###### tags: `資訊安全` `CSP`
[TOC]

防範 XSS
要防範 XSS 最基本的作法對於所有不信任來源的 input 都要以 encode 後的方式呈現在瀏覽器上，而不是直接讓他執行：

避免讓使用者在 input 中可以直接輸入 HTML
驗證：使用者輸入的內容後，才把資料存入資料庫，例如，過濾掉 \<script> 這類到標籤
消毒：在將資料庫的內容呈現給使用者前，先對這些內容進行消毒（sanitize），例如將內容中的 HTML Body 和 attribute 內的 HTML Entities 都進行編碼

* XSS Filter 字串過濾
* Cookie設為HttpOnly

## Content-Security-Policy (CSP)
* Content-Security-Policy
* Content-Security-Policy-Report-Only
* X-Content-Security-Policy
* X-Content-Security-Policy-Report-Only
* X-WebKit-CSP
* X-WebKit-CSP-Report-Only
### HTTP Header 設定

* HTTP Header 加入
```!
Content-Security-Policy: {Policy}
```
當有不符合安全政策的情況，瀏覽器就會提報錯誤，**並終止該行為執行**

* HTTP Header 加入
```!
Content-Security-Policy-Report-Only: {Policy}
```
當有不符合安全政策的情況，瀏覽器就會提報錯誤，**但會繼續執行**

* 在 HTML \<head> 區塊加入
```html!
<head>
    <meta http-equiv="Content-Security-Policy" content="{Policy}">
</head>
```
當有不符合安全政策的情況，瀏覽器就會提報錯誤，**並終止該行為執行**

### 常用指令

| 指令 | 說明 |
|-|-|
|default-src|預設所有類型的載入都使用這個規則|
|connect-src|載入 Ajax、Web Socket 套用的規則|
|font-src|載入字型套用的規則|
|frame-src|載入 IFrame 套用的規則|
|img-src|載入圖片套用的規則|
|media-src|載入影音標籤套用的規則。如：\<audio>、\<video>等|
|object-src|載入非影音標籤物件套用的規則。如：\<object>、\<embed>及\<applet>等|
|script-src|載入 JavaScript 套用的規則|
|style-src|載入 Stylesheets (CSS) 套用的規則|

其他指令: [W3C 的 CSP 規範](https://w3c.github.io/webappsec-csp/#csp-directives)

### X-Frame-Options

不支援多個網域，如果要設定多個網域，需要搭配 CSP 的 frame-ancestors 使用。

限制符合同源政策的網頁才能用IFrame、Frame或Object內嵌這個網頁
```
x-frame-options: SAMEORIGIN
```

```
content-security-policy: frame-ancestors 'self' [url]
x-frame-options: ALLOW-FROM [url]
```
* `DENY` 無法被崁入到任何frame
* `SAMEORIGIN` 僅允許父層為同源的框架崁入頁面
* `ALLOW-FROM domain` 僅允許指定的url崁入頁面

資料來源:
[The clickjacking attack](https://javascript.info/clickjacking)

## Referrer-Policy
         阻止 Referer 送出過多的資訊。
可以由 response HTTP header 或 meta 對整個頁面設定，也能藉由 rel、referrerpolicy 屬性對 a、img、link 等單一 element 做部分設定
### \<link>, \<a>, \<area>, \<form> 標籤上的 rel
```html!
<meta name="referrer" content="no-referrer">
<a href="https://www.example.com/index.html" rel="noreferrer">
<a href="https://www.example.com/index.html" referrerpolicy="no-referrer">
```

* `nooppener` 可以阻擋新開的網站使用 `window.opener` (註: 可以將原始網站跳轉至其他網頁，也可以取得原始網站的內容)
* `norefferer` 不管如何都不傳送 Referer，對於原本的網站沒有影響，但會影響新網站的流量分析和 SEO
* `unsafe-url` 不管如何都正常送出 Referer。
* `origin` 只送出 origin，也就是只送 protocol、port、host。
    ```
    https://www.example.com/index.html?id=123

    Referer: https://www.example.com/
    ```


參考資料:
[HTML attribute: rel | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
[為什麼target="_blank"要加 rel="noreferrer noopener"？](https://codeewander.github.io/docs/html/noreferrer-noopener)



---
參考資料: 
[X-Frame-Options 回應標頭 | MDN](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Headers/X-Frame-Options)
[[Day27] ASP.NET Core 2 系列 - 網頁內容安全政策 (Content Security Policy)](https://ithelp.ithome.com.tw/articles/10196896)
[Content-Security-Policy - HTTP Headers 的資安議題 (2)](https://devco.re/blog/2014/04/08/security-issues-of-http-headers-2-content-security-policy/)

[google檢測CSP工具](https://csp-evaluator.withgoogle.com/)
[Content Security Policy (CSP) 筆記](https://hackmd.io/@Eotones/BkOX6u5kX)
[零基礎資安系列（三）-網站安全三本柱（Secure & SameSite & HttpOnly）](https://tech-blog.cymetrics.io/posts/jo/zerobased-secure-samesite-httponly/)
