如何使用 pug、sass、gulp 修复 csp 错误

Question

这是我的项目结构：

我的 gulpfile.js :

const gulp = require("gulp");
const pug = require("gulp-pug");
const sass = require('gulp-sass')(require('sass'));
const browserSync = require("browser-sync").create();
const htmlPrettify = require('gulp-html-prettify');

//  Pug -> HTML
gulp.task("pug", () => {
    return gulp
        .src("src/pug/pages/*.pug")
        .pipe(pug())
        .pipe(htmlPrettify())
        .pipe(gulp.dest("dist/html"))
        .pipe(browserSync.stream());
});

//  SCSS -> CSS
gulp.task("sass", () => {
    return gulp
        .src("src/assets/sass/main.scss")
        .pipe(sass().on("error", sass.logError))
        .pipe(gulp.dest("dist/css"))
        .pipe(browserSync.stream());
});

// BrowserSync
gulp.task("serve", () => {
    browserSync.init({
        server: "./dist",
    });

    gulp.watch("src/pug/**/*.pug", gulp.series("pug"));
    gulp.watch("src/assets/sass/**/*.scss", gulp.series("sass"));
});

// task
gulp.task("default", gulp.parallel("pug", "sass", "serve"));

当我运行 gulp 时，浏览器会转到 localhost:3000 但它崩溃了。我查看了控制台并收到错误：Content-Security-Policy：页面的设置阻止了内联资源的加载（“default-src”）。

我认为这是由于 gulp 中的 BrowserSync，因为当我运行 gulp 时，我看到内联脚本，我尝试更改但它不起作用

Answer 1

如果 CSP 标头阻止所有内联脚本，您可以通过将以下指令添加到 CSP 标头来修复错误：

default-src 'unsafe-inline';

如果您使用BrowserSync，您还可以将以下指令添加到CSP标头：

script-src 'unsafe-inline' 'self';

--

BrowserSync
gulp.task("serve", () => {
    browserSync.init({
        server: "./dist",
        // Add the following directives to the CSP header
        default-src 'unsafe-inline';
        script-src 'unsafe-inline' 'self';
    });

    gulp.watch("src/pug/**/*.pug", gulp.series("pug"));
    gulp.watch("src/assets/sass/**/*.scss", gulp.series("sass"));
});