配置Helmet JS CSP允许外部CSS/JS时，内联脚本被拦截排查

你遇到的CSP错误看似是内联脚本问题，但实际根源是静态文件加载失败和代码结构问题，以下是具体解决步骤：

1. 修复主应用的静态文件服务 #

你的主Entry_Point.js没有挂载静态文件中间件，而LOGIN_PAGE.js里创建了独立的Express实例，导致静态资源请求无法被正确处理，返回404后被浏览器误判为内联内容。

修改Entry_Point.js，添加静态文件中间件：

// 引入path模块
const path = require('path');
// 在路由挂载前添加静态文件服务
app.use(express.static(path.join(__dirname, 'public')));

同时简化LOGIN_PAGE.js，删除不必要的独立Express实例和重复中间件（主应用已处理CORS、URL编码等逻辑）：

const path = require('path');

function Send_login_page(req,res,next){
    const options = {root: path.join(__dirname,"../../public/")};
    res.sendFile("/Login_Page_template/static_login_page.html",options);
};

module.exports= {
    Send_login_page,
};

2. 修正HTML中的资源引用错误 #

你的HTML里存在标签属性错误和路径问题，导致资源无法正确加载：

• CSS链接错误使用src属性，正确应为href
• 资源路径用相对路径./，但主应用的静态根是public，应使用从根开始的绝对路径
• 脚本标签的type="text/script"是错误类型，默认text/javascript可省略

修正后的static_login_page.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Portal</title>
    <link rel="stylesheet" href="/Login_Page_template/static_login_styles.css">
</head>
<body>    
    <div class="container">
        <div class="logo">
            <img src='/Login_Page_template/logo.jpg' alt="Logo">
        </div>
        <div class="form">
            <form>
                <h1>Sign In?</h1>

                <input type="text"  id="username"  placeholder="Username" name="username">
                
                <input type="password"  id="password"  placeholder="Password" name="password">
                
                <input type="submit"  id="Submit_Login_btn"  value="Login">
            </form>
        </div>
        <div class="bypass">
            <a href="https://192.168.10.57:80/params/">
                <input type="button" name="Button" value="View">
            </a>
        </div>
    </div>
    <script src='/Login_Page_template/login_page_client.js'></script>
</body>
</html>

（额外修正：密码输入框类型改为password，提升安全性）

3. 验证CSP配置 #

当前的Helmet CSP配置是合理的：

const cspConfig = {
    directives: {
      defaultSrc: ["'self'"],
      styleSrc: ["'self'", 'https://fonts.googleapis.com'],
      scriptSrc: ["'self'"],
      fontSrc: ["'self'", 'https://fonts.gstatic.com'],
    },
};

script-src 'self'允许加载同域下的外部脚本，只要资源路径正确，就能正常加载，无需修改。

完成以上修改后，静态资源会被正确加载，CSP错误也会消失。

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