事前にサーバ側でjQueryを使用して作成したバーコードデータをブラウザに表示したい

Question

raspi3,apache2,PHPで作成しています。
Node.jsとjQueryは初心者です。
バーコードを(code128)を表示する必要があり,jQueryを
使って実現できたのですが･･･
jquery-1.3.2.min.jsが
CSP(Content-Security-Policy)
に引っかかってしまい、対策が必要になりました。
nonceを設定してもstyle-srcでは有効にならずお手上げです。

いっそサーバ側でjQueryを実行して出力結果をHTMLに埋め込むことが
できる、もしくはAjaxで送ることができればいいかと考えて
調べてみたのですが、どこから手を付けていいのかさっぱりわから
ず投稿させて頂きました。

そもそも、なぜnoneが使えないのかも含めて宜しくお願い致します。
因みにPHPには以下のようにコードを書いていました。

<meta http-equiv="Content-Security-Policy" content="default-src 'self';script-src 'self' 'nonce-123456';style-src 'self' 'nonce-123456';" /> <script type="text/javascript" nonce="123456"> <?php readfile("./js/jquery-1.3.2.min.js"); ?> </script> <script type="text/javascript" src="js/jquery-barcode.js"></script>

Answer 1

https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Security-Policy/script-src

'nonce-<base64-value>'

とあるので、base64の書式じゃないと通らないのではないでしょうか。nonce-MTIzNA==こんな感じに。

<script type="text/javascript" nonce="123456">
<?php readfile("./js/jquery-1.3.2.min.js"); ?>
</script>

これもそもそも必要があるのかわからないです。selfを含んでいるので、CDN経由での読み込みでなければ動きそうな気はします。
js/jquery-barcode.jsの読み込みはできているのですよね？

あと調べるとすれば、レスポンスヘッダの中のContent-Security-Policyとmetaが両方指定されていたりしないか、調べたほうが良いかもしれません。

Comments

[rajico]

ご指南ありがとうございます。
nonceをbase64にエンコードしてみましたが結果変わらずでした。
"style-src"も"script-src"もnonce設定が全く効いていないようです。

>js/jquery-barcode.js
は問題なく読み込みできています。
jquery-1.3.2.min.jsと同じく袂に置いています。（運用は外部にアクセスする環境を想定していません）
ご指摘の通り、エラーになるものなのか不明です。
style-srcを"unsafe-inline"にすれば、script-src側でinsertBeforeの呼び出しでエラーが出ながらもバーコードは表示しています。

>調べるとすれば、レスポンスヘッダの中のContent-Security-Policyとmetaが両方指定されていたりしないか、調べたほうが良いかもしれません。

apache2のsecurity.confで設定していたHeaderは全てコメントにしました。PHP側でHeaderは設定していないので<meta･･･>の部分のみです。

宜しくお願い致します。

[otolab]

なるほど...。
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_eval_expressions
> To allow inline scripts and inline event handlers, 'unsafe-inline', a nonce-source or a hash-source that matches the inline block can be specified.

とあって、`inline event handlers`はunsafe-inlineでしか有効化できない(?)ようです。たとえばバーコードの表示に`<img onload="">`のようなコードがある場合、`unsafe-inline`が必要とみなされる可能性がありそうです。

insertBeforeは`<script>`タグの動的な追加かな？`unsafe-eval`も追加してどうなるか見ると良いかも。

`strict-dynamic`はnonceを伝播させるとあるので、これも検討の余地ありかもしれません。

> apache2のsecurity.confで設定していたHeaderは全てコメントにしました。PHP側でHeaderは設定していないので<meta･･･>の部分のみです。

（豆知識）設定を調べるより、実際の振る舞いを観察したほうが正確です。ブラウザの開発機能の中にネットワークの通信状態を調べる機能がついているはずなので、レスポンスヘッダを見るようにしたほうが簡単で正確です。

[rajico]

ご回答いただきありがとうございます。
unsale系は使いたくなかったので、サーバ側でjQueryを実行する方法を試したのですが、
とうしてもjsdomのインストールがうまくいかず、断念しました。（そもそもjsdomでやりたいことができるようになるのかもわからず・・・）
pythonでcode128を作成することができたので、よしとしました。

レスポンスヘッダ、なるほど。ありがとうございます。