問題背景

在部署jenkins持續整合的過程中經常會用到HTML Publisher Plugin外掛來顯示測試報告。

為了測試報告樣式的美觀以及易讀，測試報告中經常會搭配CSS和JS實現自定義的樣式或動畫效果。

         Jenkins中在訪問有自定義樣式或動畫效果的測試報告時，展示的樣式往往會出乎你的想象，面目全非，樣式錯亂，動畫無法展示等等問題。開啟瀏覽器開發工具控制檯，可以看到CSS、JS載入失敗。

原因分析

Jenkins為了避免受到惡意HTML/JS檔案的攻擊，會預設將安全策略CSP設定為：

sandbox; default-src 'none'; img-src 'self'; style-src 'self';

在此配置下，只允許載入：

1、Jenkins伺服器上託管的CSS檔案

2、Jenkins伺服器上託管的圖片檔案

以下形式的內容都會被禁止：

1、   JavaScript

2、   plugins (object/embed)

3、   HTML中的內聯樣式表（Inlinestyle sheets），以及引用的外站CSS檔案

4、   HTML中的內聯圖片（Inlineimage definitions），以及外站引用的圖片檔案

5、   frames

6、   web fonts

7、   XHR/AJAX

解決辦法

方法一：修改CSP(ContentSecurity Policy)的預設配置，到Jenkins系統管理à指令碼命令列，執行以下Groovy命令，然後點選執行。配置完成後，重新構建原有專案，HTML頁面即可正常顯示。

System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")

然而當你重新啟動jenkins時，你會發現，HTML頁面再次面目全非，CSP恢復為預設配置，因此這個辦法只是臨時方案。

方法二：利用jenkins的以下兩個外掛可以巧妙解決這個問題

1、Startup Trigger: 可實現在Jenkins節點(master/slave)啟動時觸發構建；

2、Groovy plugin: 可實現直接執行Groovy程式碼。

解決步驟如下：

1、Jenkins中新建一個Job，該Job專用於Jenkins啟動時執行的配置命令。

2、在“構建觸發器”模組，選擇“Buildwhen job nodes start”選項。

3、在“構建”模組，選擇“Executesystem Groovy script”，執行如下Groovy命令：

System.setProperty("hudson.model.DirectoryBrowserSupport.CSP","")

         立即構建此Job，返回原專案重新構建，再次訪問HTML頁面，你會驚喜的發現問題已經解決了！！有木有很開心。