はじめに
Jenkinsのビルド結果を確認するためにHTMLを成果物として登録したはいいものの、インラインで定義したCSSが適用されない…
という状況に遭遇したのでメモ
原因
JenkinsはContent Security Policy(CSP)のデフォルト設定をキツめにしているようです。以下がデフォルト設定です。
sandbox; default-src 'none'; img-src 'self'; style-src 'self';
CSSは自ドメインのファイルのみ許可されていて、インラインでの実行は許可されていません。
解決方法
解決方法としては以下の2つが考えられますが、今回は後者を選択しました。
- デフォルト設定を変更し、インラインで実行できるようにする
- デフォルト設定に従う(CSSを表示できる状態に変更する)
- CSSをファイル化して、Jenkinsと同ドメイン配下に配置
- HTMLは上記CSSファイルを読み込む
Jenkinsはユーザが静的コンテンツを配置するための仕組みを用意していますので、そこにCSSファイルを配置します。
例として、$JENKINS_HOME/userContent/assets/css/test.cssに配置した場合、https://[任意のドメイン]/jenkins/userContent/assets/css/test.cssでアクセス可能となります。
あとはHTMLでCSSファイルを読み込むようにすれば完了です。
...
<link rel="stylesheet" href="/jenkins/userContent/assets/css/test.css">
...
終わりに
今回は、
- 成果物のHTMLはJenkins上でのみ閲覧
- 自作のHTML
という前提条件だったのでCSPを変更せずに解決できましたが、大体の場合はCSPを変更する必要があると思います。その場合は、以下のように設定を変更して対応できるかと思います。
JenkinsのClover pluginを利用したカバレッジレポートページにCSSが適用されない