Content-Security-Policyヘッダを変更または削除したい

Question

前提・実現したいこと

Node.js(Express)で外部apiから画像データを取得するアプリを作成しています。
img-srcにURLを設定したところCSPエラーが発生したので、CSPヘッダの内容を変更するか削除したいのですが、うまくいきません。

発生している問題・エラーメッセージ

エラーメッセージ

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

設定されているCSPヘッダ

Content-Security-Policy: default-src 'self';base-uri 'self';block-all-mixed-content;font-src 'self' https: data:;frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests

該当のソースコード

const express = require('express');
const router = express.Router();
const request = require('request');

const apiKey = 'hogehoge';
const apiBaseUrl = 'http://api.themoviedb.org/3';
const nowPlayingUrl = `${apiBaseUrl}/movie/now_playing?api_key=${apiKey}`;
const imageBaseUrl = 'https://image.tmdb.org/t/p/w500/';

router.use((req, res, next) => {
    res.locals.imageBaseUrl = imageBaseUrl;
    next();
});

router.get('/', (req, res, next) => {
    request.get(nowPlayingUrl, (error, response, movieData) => {
        const parsedData = JSON.parse(movieData);
        res.render('index', {
            parsedData: parsedData.results
        });
        console.log(parsedData);
    });
});

module.exports = router;

<% parsedData.forEach(movie => { %>
  <div class="col-md-3 col-sm-4 poster">
    <img src="<%= imageBaseUrl + movie.poster_path  %>" />
  </div>
<% }); %>

JSONで取得した外部データをparsedDataという形でviewに渡し、ベースURLと画像データのパスを連結して画像を表示させるようにしています。

試したこと

htmlのmetaタグでCSPの設定を変更する。

<meta http-equiv="Content-Security-Policy" content="img-src https://image.tmdb.org;">

CSPヘッダを無効化する

app.disable('Content-Security-Policy');

CSPヘッダを削除する

app.use(function(req, res, next) {
    res.removeHeader('Content-Security-Policy');
    next();
});

いずれも反映されず、最初に示したCSPヘッダが返ってきました。
解決方法がわかる方いらっしゃいましたらご教授頂けると幸いです。

Answer 1

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

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

express-csp-headerというNPMライブラリをインストールして上記のようにディレクティブを指定するとうまくいきました。

Answer 2

CSPヘッダの内容を変更するか削除したいのですが、うまくいきません。

応答ヘッダをブラウザで変更することはできません。
meta[http-equiv]は、応答ヘッダに含まれない場合の代替情報としてマークアップするものです。

解決方法

公式に案内されているライブラリからNodeJS用のものを試してはどうでしょうか。

• node-tmdb
• moviedb

Comments

[maskmelon]

確かにサーバー側から送られてきた応答ヘッダをブラウザ側で変更できると考えるのはおかしいですね。
教えて頂いたものとは違うのですが、CSP関連のNPMライブラリを試してみたところうまくいきました。
ご回答くださりありがとうございました。