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标签,就不会行内样式报错啦!

相关推荐
heartmoonq3 分钟前
npm 包抽象封装并发布完整指南
前端
红衣信3 分钟前
深入剖析 hooks-todos 项目:前端开发的实用实践
前端·react.js·面试
今禾3 分钟前
深入理解 JavaScript 事件监听机制
前端·javascript
FogLetter3 分钟前
从饼干到Cookie:前端存储的身份密码本
前端·javascript
Spider_Man7 分钟前
🎭 React受控与非受控组件:一场"控制权"的争夺战
前端·react.js
Mintopia12 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
黑客老李14 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
拾光拾趣录15 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia16 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
归于尽18 分钟前
浏览器和 Node.js 的 EventLoop,原来差别这么大
前端·node.js·浏览器