ContentSecurityPolicyエラーについて

Question

<script src="https://ajax.googleapis.com/ajax/libs/d3js/5.15.1/d3.min.js"></script>

<img src="https://image.tmdb.org + <%= movie.poster_path  %>" />

Refused to load the script 'https://ajax.googleapis.com/ajax/libs/d3js/5.15.1/d3.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self' data:".

jqueryの読み込みとimgタグのsrc設定時に上記エラーが発生します。

今までCSPに引っかかった際には、インラインのonclickをJSのaddEventListenerで書き換えたり、scriptタグをlinkタグに変更するなどして対処してきましたが、あまり理解できていませんでした。

CSPについては、読み込む外部ファイルの種類？形式？を制限することで、XSS攻撃などによって悪意のあるスクリプトが紛れ込んだ際にブラウザがそれらの実行を防ぐことができるものであると考えいています。（間違っていたらご指摘ください）

しかしスクリプトタグ形式で外部ファイルを読み込んでもエラーを吐かないこともあり、具体的にどういう場合にCSPエラーが発生するのかよく分かりません。

その辺りの内容と今回のようなケースの対処の仕方を教えて頂けないでしょうか？

###追記

<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://ajax.googleapis.com; img-src https://image.tmdb.org;">

このように記載しても変わりませんでした。

Answer 1

「CSPの設定がわからない」かつ「CSPを有効にすべき、強い動機付けがない」のであれば、止めてしまうほうが良いかと思います。

CSPはあくまで予防的対策（ほかの実装がきっちりしていれば、CSPがなくてもセキュリティ的な問題は生じない）なので、サイト内の書き換えで設定変更が必要となった際にきちんと対応できない状況であれば、設定を維持することはできません。

Comments

[maskmelon]

回答ありがとうございます。

スクリプトを読み込むタグに対して外部ドメインを指定してあげれば良いということは分かったので、追記の通りにしてみたのですが、状況は変わりませんでした。

CSPを設定するために何か弄ったりしたつもりはなかったのですが、なぜかエラーが生じてしまいました。
一応調べてみたところ、設定方法は出てくるのですが止める方法が出てこなかったので（普通は未設定になっているためだと思いますが）、アドバイスを頂けるとありがたいです。

Answer 2

const { expressCspHeader, INLINE, NONE, SELF } = require('express-csp-header');

app.use(expressCspHeader({
  directives: {
    'script-src': [SELF, 'ajax.googleapis.com',],
    'img-src': [SELF, 'image.tmdb.org']
  },
}));

express-csp-headerというライブラリを使ってCSPのディレクティブを設定することができました。