如何修复Pug+Sass+Gulp项目中的CSP（内容安全策略）错误

我的项目结构如下：

我的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: The page's settings blocked the loading of a resource at inline (“default-src”)。

怀疑是Gulp中的BrowserSync导致的，因为运行时能看到内联脚本，尝试修改但无效，求解决方法。

这个问题确实是BrowserSync注入的内联脚本触发了页面的CSP（内容安全策略）限制导致的，给你两种实用的解决思路：

方法1：修改BrowserSync配置，禁用内联脚本注入 #

直接改serve任务里的browserSync.init配置，让它用外部脚本替代内联注入，避开CSP限制：

// BrowserSync
gulp.task("serve", () => {
    browserSync.init({
        server: "./dist",
        injectChanges: false, // 关闭内联注入逻辑
        scriptPath: function(path) {
            return "/browser-sync/browser-sync-client.js"; // 指定外部脚本路径
        }
    });

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

方法2：放宽页面CSP规则（仅开发环境用） #

如果不想改BrowserSync的注入方式，可以在项目HTML的<head>里加个CSP meta标签，允许内联脚本运行：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline';">

注意这种方式会降低页面安全限制，只适合开发阶段使用，上线前记得移除。

另外还要检查下入口HTML的路径：你的编译后HTML在dist/html目录下，但BrowserSync默认找dist根目录的index.html，如果找不到会加载默认页面，也可能引发异常。可以在配置里指定入口文件路径：

browserSync.init({
    server: {
        baseDir: "./dist",
        index: "/html/index.html" // 对应你的实际入口文件位置
    }
});

内容的提问来源于stack exchange，提问作者Cloly