CD's blog CD's blog
首页
  • HTMLCSS
  • JavaScript
  • Vue
  • TypeScript
  • React
  • Node
  • Webpack
  • Git
  • Nestjs
  • 小程序
  • 浏览器网络
  • 学习笔记

    • 《TypeScript 从零实现 axios》
    • Webpack笔记
  • JS/TS教程

    • 《现代JavaScript》教程
🔧工具方法
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

CD_wOw

内卷的行情,到不了的梦
首页
  • HTMLCSS
  • JavaScript
  • Vue
  • TypeScript
  • React
  • Node
  • Webpack
  • Git
  • Nestjs
  • 小程序
  • 浏览器网络
  • 学习笔记

    • 《TypeScript 从零实现 axios》
    • Webpack笔记
  • JS/TS教程

    • 《现代JavaScript》教程
🔧工具方法
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 配置

  • 指南(实例)

    • 安装
    • 起步
    • 管理资源
    • 管理输出
    • 开发
    • 模块热替换
    • tree shaking
    • 生产环境构建
    • 代码分离
    • 懒加载
    • 缓存
    • 创建 library
    • shimming
    • 渐进式网络应用程序
    • TypeScript
    • 迁移到新版本
    • 使用环境变量
    • 构建性能
    • 内容安全策略
      • 示例
      • 启用 CSP
    • 开发 - Vagrant
    • 管理依赖
    • 公共路径(public path)
    • 集成(integrations)
  • 《Webpack》笔记
  • 指南(实例)
CD_wOw
2020-12-15
目录

内容安全策略

webpack 能够为其加载的所有脚本添加 nonce。要启用此功能,需要在引入的入口脚本中设置一个 __webpack_nonce__ 变量。应该为每个唯一的页面视图生成和提供一个唯一的基于 hash 的 nonce,这就是为什么 __webpack_nonce__ 要在入口文件中指定,而不是在配置中指定的原因。请注意,nonce 应该是一个 base64 编码的字符串。

# 示例

在 entry 文件中:

// ...
__webpack_nonce__ = 'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=';
// ...
1
2
3

# 启用 CSP

请注意,CSP 默认情况下不启用。需要与文档(document)一起发送相应的 CSP header 或 meta 标签 <meta http-equiv="Content-Security-Policy" ...>,以告知浏览器启用 CSP。以下是一个包含 CDN 白名单 URL 的 CSP header 的示例:

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;
1

有关 CSP 和 nonce 属性的更多信息,请查看页面底部的进一步阅读部分。

编辑 (opens new window)
#Webpack
上次更新: 2021/08/22, 01:09:59
构建性能
开发 - Vagrant

← 构建性能 开发 - Vagrant→

最近更新
01
gsap动画库学习笔记 - 持续~
06-05
02
远程组件加载方案笔记
05-03
03
小程序使用笔记
03-29
更多文章>
Theme by Vdoing | Copyright © 2020-2023 CD | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式