內容安全策略：頁面設置阻止加載內聯資源（“default-src”）

Question

我知道有很多類似的問題。 但是，我還是 MERN 的新手，我正在尋找這個問題的簡化答案。

我正在學習有關MERN堆棧的教程，該應用程序是一個簡單的費用計算器，所有功能都運行良好，直到我們繼續添加 Express 和 Mongoose。 這是 server.js 文件，所以你可以看到我的爛攤子：

const path = require('path');
const express = require('express');
const dotenv = require('dotenv');
const colors = require('colors');
const morgan = require('morgan');
const transactions = require('./routes/transactions');
const connectDB = require('./config/db');

dotenv.config({ path: './config/config.env' });

connectDB();

const app = express();

app.use(express.json());


if(process.env.NODE_ENV === 'development') {
    app.use(morgan('dev'));
}

app.use('api/v1/transactions', transactions);

if(process.env.NODE_ENV === 'production') {
    app.use(express.static('client/build'));

    app.get('*', (req, res) => res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html')));
}

const PORT = process.env.PORT || 5000;

app.listen(PORT, console.log(`Server running in ${process.env.NODE_ENV} mode on port ${PORT}`));

我在 package.json 中正確導入了所有內容，因此可能不需要用它發送垃圾郵件。 我已連接到 Mongodb，但我確信這沒有什么區別。 無論如何，當我使用命令啟動它時（npm run start），服務器在 localhost:5000 上啟動，我立即在 html 頁面上看到無法獲取 / 。 在 Firefox 的控制台中，我收到錯誤消息：

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”). injectGlobalHook.js:513:49

在 Chrome 上它說：

... it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

同樣在我的終端中，它顯示GET / 404 2.201 ms - 139 ，但僅當我刷新頁面時。 所以我知道這個錯誤與 CSP 有關系，它在一個我不應該碰也沒有碰過的文件中，但我不知道如何修復它。 我以前遇到過這個錯誤，但我想我只是放棄了那個項目。 一個答案會很好，但解釋為什么我會收到這個錯誤會更好。 謝謝！

Answer 1

我了解有很多類似的問題。 但是，我仍然對MERN還是陌生的，並且正在尋找對此問題的簡化答案。

我正在跟蹤有關MERN堆棧的教程，該應用程序是一個簡單的費用計算器，所有功能都非常有效，直到我們繼續添加Express和Mongoose為止。 這是server.js文件，因此您可以看到我的爛攤子：

const path = require('path');
const express = require('express');
const dotenv = require('dotenv');
const colors = require('colors');
const morgan = require('morgan');
const transactions = require('./routes/transactions');
const connectDB = require('./config/db');

dotenv.config({ path: './config/config.env' });

connectDB();

const app = express();

app.use(express.json());


if(process.env.NODE_ENV === 'development') {
    app.use(morgan('dev'));
}

app.use('api/v1/transactions', transactions);

if(process.env.NODE_ENV === 'production') {
    app.use(express.static('client/build'));

    app.get('*', (req, res) => res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html')));
}

const PORT = process.env.PORT || 5000;

app.listen(PORT, console.log(`Server running in ${process.env.NODE_ENV} mode on port ${PORT}`));

我將所有內容正確地導入package.json中，因此可能不需要向其發送垃圾郵件。 我已經連接到Mongodb，盡管我確定這不會有所作為。 無論如何，當我使用命令啟動它時（npm run start），服務器在localhost：5000上啟動，我立即在html頁面上看到Cannot GET / 。 在Firefox的控制台中，出現錯誤：

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”). injectGlobalHook.js:513:49

在Chrome上顯示：

... it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

同樣在我的終端中，它顯示GET / 404 2.201 ms-139 ，但僅當我刷新頁面時才顯示。 因此，我知道該錯誤與CSP有關，並且該錯誤在文件中，我不應該也不應該觸摸，但我不知道如何解決。 我以前有過錯誤，但是我想我只是放棄了那個項目。 答案會很好，但是對我為什么會收到此錯誤的解釋會更好。 謝謝！

Answer 2

我強烈建議使用頭盔庫（ https://helmetjs.github.io/ ）保護您的標頭，但您需要小心，因為默認情況下頭盔會阻止您的頁面腳本，例如 AJAX 請求，因此在使用默認值時您會收到錯誤例如：內容安全策略：頁面的設置阻止加載內聯（“默認/源”）或類似的資源，為了解決這個問題，我需要手動編寫頭盔選項。

在我的項目中，我使用了以下配置：

app.use(
    helmet.contentSecurityPolicy({
      useDefaults: false,
      "block-all-mixed-content": true,
      "upgrade-insecure-requests": true,
      directives: {
        "default-src": [
            "'self'"
        ],
        "base-uri": "'self'",
        "font-src": [
            "'self'",
            "https:",
            "data:"
        ],
        "frame-ancestors": [
            "'self'"
        ],
        "img-src": [
            "'self'",
            "data:"
        ],
        "object-src": [
            "'none'"
        ],
        "script-src": [
            "'self'",
            "https://cdnjs.cloudflare.com"
        ],
        "script-src-attr": "'none'",
        "style-src": [
            "'self'",
            "https://cdnjs.cloudflare.com"
        ],
      },
    }),
    helmet.dnsPrefetchControl({
        allow: true
    }),
    helmet.frameguard({
        action: "deny"
    }),
    helmet.hidePoweredBy(),
    helmet.hsts({
        maxAge: 123456,
        includeSubDomains: false
    }),
    helmet.ieNoOpen(),
    helmet.noSniff(),
    helmet.referrerPolicy({
        policy: [ "origin", "unsafe-url" ]
    }),
    helmet.xssFilter()

我禁用了默認手動編寫所有內容，因為我可能有外部腳本、請求等，所以我需要另外定義它們。

此配置將解決阻塞資源錯誤，例如：

• 內容安全策略：頁面的設置阻止了內聯資源的加載（“default/src”）
• 內容安全策略：頁面設置阻止加載內聯資源（“img/src”）
• 內容安全策略：頁面設置阻止加載內聯資源（“script/src”）