【Azure 應用服務】App Service 通過配置web.config來新增請求返回的響應頭(Response Header)

路邊兩盞燈發表於2021-08-01
APPWebHeader

問題描述

在Azure App Service上部署了站點，想要在網站的響應頭中加一個欄位(Cache-Control)，並設定為固定值(Cache-Control：no-store)

效果類似於本地IIS中設定IIS響應標頭

【Azure 應用服務】App Service 通過配置web.config來新增請求返回的響應頭(Response Header)

 

 有時，也會根據不同的安全要求，需要新增Response Header，如下：

#Adding security headers

X-Frame-Options "SAMEORIGIN"
X-Xss-Protection "1; mode=block"
X-Permitted-Cross-Domain-Policies "none"
X-Content-Type-Options "nosniff"
Expect-CT "max-age=86400, enforce"
Referrer-Policy "strict-origin-when-cross-origin"
Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
Content-Security-Policy "block-all-mixed-content; frame-ancestors 'self'; form-action 'self'; object-src 'none'; base-uri 'self';"
Permissions-Policy "accelerometer=(self), camera=(self), geolocation=(self), gyroscope=(self), magnetometer=(self), microphone=(self), payment=(self), usb=(self)"

 

問題解決

在App Service的web.config檔案中新增配置Cache-Control為no-store，可以登入到 kudu( https://<your site name>.scm.chinacloudsites.cn/DebugConsole ) 站點檢視 wwwroot 下是否存在 web.config 檔案，如果沒有可以新建一個，web.config配置參考如下：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
          <httpProtocol>
      <customHeaders>
        <clear />
        <add name="Cache-Control" value="no-store" />    
      </customHeaders>
    </httpProtocol>
    </system.webServer>
</configuration>

 

同理，如果是需要加上安全相關的Header，追加即可。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
          <httpProtocol>
      <customHeaders>
        <clear />
        <add name="Cache-Control" value="no-store" />    
        
        <!-- #Adding security headers -->
        <add name="X-Frame-Options" value="SAMEORIGIN" />   
        <add name="X-Xss-Protection" value="1; mode=block" />   
        <add name="X-Permitted-Cross-Domain-Policies" value="none" />   
        <add name="X-Content-Type-Options" value="nosniff" />   
        <add name="Expect-CT" value="max-age=86400, enforce" />   
        <add name="Referrer-Policy" value="strict-origin-when-cross-origin" />   
        <add name="Strict-Transport-Security" value="max-age=31536000; includeSubDomains; preload" />   
        <add name="Content-Security-Policy" value="block-all-mixed-content; frame-ancestors 'self'; form-action 'self'; object-src 'none'; base-uri 'self';" />   
        <add name="Permissions-Policy" value="accelerometer=(self), camera=(self), geolocation=(self), gyroscope=(self), magnetometer=(self), microphone=(self), payment=(self), usb=(self)" />   
      </customHeaders>
    </httpProtocol>
    </system.webServer>
</configuration>

HTTP 訊息頭允許客戶端和伺服器通過 request和 response傳遞附加資訊。一個請求頭由名稱（不區分大小寫）後跟一個冒號“：”，冒號後跟具體的值（不帶換行符）組成。該值前面的引導空白會被忽略。

  • X-Frame-Options : 用來給瀏覽器 指示允許一個頁面 可否在 <frame>, <iframe>, <embed> 或者 <object> 中展現的標記。站點可以通過確保網站沒有被嵌入到別人的站點裡面，從而避免 clickjacking 攻擊。 SAMEORIGIN 表示該頁面可以在相同域名頁面的 frame 中展示。
  • X-XSS-Protection : 是 Internet Explorer，Chrome 和 Safari 的一個特性，當檢測到跨站指令碼攻擊 (XSS (en-US))時，瀏覽器將停止載入頁面。1;mode=block 啟用XSS過濾。 如果檢測到攻擊，瀏覽器將不會清除頁面，而是阻止頁面載入。
  • X-Permitted-Cross-Domain-Policies : 用於允許來自 Flash 和 PDF 文件的跨域請求。none 表示完全阻止通過不同域整合 Flash 和 PDF 文件。
  • X-Content-Type-Options : 相當於一個提示標誌，被伺服器用來提示客戶端一定要遵循在 Content-Type 首部中對  MIME 型別 的設定，而不能對其進行修改。nosniff 只應用於 "script" 和 "style" 兩種型別
  • Expect-CT : 允許站點選擇性報告和/或執行證書透明度 (Certificate Transparency) 要求，來防止錯誤簽發的網站證書的使用不被察覺。max-age=86400, enforce 指定24小時的證書透明度執行
  • Referrer-Policy : 用來監管哪些訪問來源資訊——會在 Referer  中傳送——應該被包含在生成的請求當中。strict-origin-when-cross-origin 對於同源的請求，會傳送完整的URL作為引用地址
  • Strict-Transport-Security : 是一個安全功能，它告訴瀏覽器只能通過HTTPS訪問當前資源，而不是HTTP。
  • Content-Security-Policy : 允許站點管理者控制使用者代理能夠為指定的頁面載入哪些資源。
  • Permissions-Policy : 允許web開發者在瀏覽器中選擇啟用、禁用和修改確切特徵和 API 的行為

 

問：在App Service for Linux(Node JS 應用) 中是否可以修改Header呢？

答：不可以，App Service for Linux是無法修改服務端配置的，所以無法通過服務端配置新增header的，但是可通過程式碼方式自行新增Security Header。使用response.setHeader(name, value)方法即可

示例程式碼如：

const http = require('http');

const server = http.createServer((request, response) => {
    //使用SetHeader新增響應頭
    response.setHeader('Content-Type', 'text/html');
    response.setHeader('X-Foo', 'bar');
    response.setHeader("Access-Control-Allow-Origin", "*"); 
 
    response.writeHead(200, {"Content-Type": "text/plain"});
    response.end("Hello World!");
});

const port = process.env.PORT || 1337;
server.listen(port);

console.log("Server running at http://localhost:%d", port);

 

 

參考資料

response.setHeader(name, value)：http://nodejs.cn/api/http/response_setheader_name_value.html

Node.js Hello World (App Service): https://github.com/Azure-Samples/nodejs-docs-hello-world

在 Azure 中建立 Node.js Web 應用：https://docs.azure.cn/zh-cn/app-service/quickstart-nodejs?pivots=platform-linux

HTTP headers：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#security  OR  https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers 

X-PERMITTED-CROSS-DOMAIN-POLICIES：https://www.scip.ch/en/?labs.20180308

 

【完】

 

相關文章