JAVA,CSS の覚え書き

Javascript,CSSを使ったページを作成した時の覚え書き

セクション3:javascriptについて(3)

        
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);
            }
        }