1.canvasを使って、キャンバスの背景色を設定しようと、以下の記述をしたが、
<canvas width="720" height="420" style="background-color:yellow;"></canvas>
サーバーにアップして実行したら、Chromeでエラーになり実行出来なかった。
エラー内容は
【インラインスタイルを適用することを拒否しました。これは、次のコンテンツセキュリティ
ポリシーの指示に違反するためです: "default-src 'self'"。 インライン実行を有効にするには、
'unsafe-inline'キーワード、ハッシュ
( 'sha256-aIcHPOuF8I7ykfNiEUGCyEuIvMtDug2206u1fwN8Bc0 =')
またはnonce( 'nonce -...')が必要です。 また、 'style-src'は明示的に設定されていないので、
'default-src'がフォールバックとして使用されることに注意してください。】
style="background-color:yellow;はインラインスクリプトとなっている模様、ネットで検索した
canvasの使用例では普通に使われているが??
2.他にもインラインスクリプトを使いたかったので、ネットを渡り歩いて色々ためしてみた。
nginxの設定でContent-Security-Policyを色々いじってみたがどれも効果は無かった。
/etc/nginx/nginx.confで
add_header Content-Security-Policy "default-src 'self' ; script-src 'self'";
と変更等、ネットの情報を元に色々変更してみた。
chromeのコンテンツセキュリティポリシー(CSP)の説明で
インラインJavaScriptは実行されません。・・・・とあり、デホルトポリシーを緩和するには
ハッシュ又はnonceが必要とあります。
余りごちゃごちゃと記述するのは避けたかったので、以下のテストをしたらインラインスクリプト
が動くようになった。
<script>
//# sourceURL=js/****.js
//ここにスクリプトを記述
</script>
これで外部スクリプトとして読込出来る模様、ただスクリプトの最初に記述すると
動作しないとの説明があったが、今回テストではスクリプトの最後に記述した場合は動作
しなかった。いずれにしても本格的に使うには問題ありそうな気がする。
3.最終的には、インラインスクリプトを全部外す処理に変更、ただし少しばかり工夫が必要になる。
<canvas width="720" height="420" style="background-color:yellow;"></canvas>
は以下のように変更
<canvas width="720" height="460" id="plc10" class="cvscolor"<>/canvas>
背景色はCSSで指定。外部スクリプトにidで引数を渡して関数を起動する様に変更。
var canvasArry=document.querySelectorAll('canvas');
for(i=0 ; i<canvasArry.length ; i++){
if(canvasArry[i].getContext){
var context = canvasArry[i].getContext('2d');
var docname=canvasArry[i].id;
dispRader('plcdoc/'+docname+'.csv',context);
}
}