csp 设置 nonce

简单记录一下 需求,严格csp,渲染google地图

1.首先服务端生成nonce值,然后!!需要获取html文件,并且把里面的nonce值替换。 这样客户端style标签里面的内容就可以使用了

google地图就是自己去获取了style标签里面的nonce值!!!!

javascript 复制代码
import express from 'express'
import { fileURLToPath } from 'url'
import { dirname, join } from 'path'
import { randomBytes } from 'crypto'
import fs from 'fs'

// 获取当前文件路径
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

const app = express()
const PORT = 3000

// 生成 nonce 值
function generateNonce() {
  return randomBytes(16).toString('base64')
}

// 静态文件服务(先于 CSP 中间件)

app.use(
  express.static(join(__dirname, '../dist'), {
    index: false, // 正确禁用自动返回 index.html
  }),
)
// CSP 中间件
app.use((req, res, next) => {
  const nonce = generateNonce()
  res.locals.nonce = nonce

  res.setHeader(
    'Content-Security-Policy',
    `default-src 'self';style-src 'self' 'nonce-${nonce}' https://maps.gstatic.com https://fonts.googleapis.com;font-src 'self' https://fonts.gstatic.com;script-src 'self'  https://www.gstatic.cn/recaptcha/ https://www.gstatic.com/recaptcha/ https://maps.googleapis.com ;img-src 'self' data: https://maps.googleapis.com https://maps.gstatic.com https://*.googleapis.com https://*.gstatic.com *.google.com *.googleusercontent.com;frame-src 'self' ;connect-src 'self' https://maps.googleapis.com;`,
  )
  next()
})

// HTML 路由处理
app.get('*', (req, res) => {
  const nonce = res.locals.nonce
  const htmlPath = join(__dirname, '../dist/index.html')

  try {
    let html = fs.readFileSync(htmlPath, 'utf8')

    // 调试:检查替换前内容
    console.log('替换前是否包含 csp_nonce:', html.includes('csp_nonce'))

    // 多种替换方式确保覆盖
    html = html
      .replace(/nonce="[^"]*"/g, `nonce="${nonce}"`) // 替换所有现有 nonce
      .replace(/__CSP_NONCE__/g, nonce) // 备用占位符格式

    // 调试:检查替换结果
    console.log('替换后 nonce 值:', html.match(/nonce="([^"]*)"/)?.[1])

    res.send(html)
  } catch (err) {
    console.error('读取 HTML 文件失败:', err)
    res.status(500).send('Server Error')
  }
})

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`)
})

vue-html文件设置一个style标签,让服务器端去替换

google 地图自己会去找到并动态生成style标签,就不会行内样式报错啦!

相关推荐
zwjapple6 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20208 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem9 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊9 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术9 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing9 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止9 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall9 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴9 小时前
简单入门Python装饰器
前端·python
袁煦丞10 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作