跳到主要内容

内容安全策略(CSP)

2024年03月20日
柏拉文
越努力，越幸运

一、认识​

内容安全策略 Content-Security-Policy（CSP ） 为了页面内容安全而制定的一系列防护策略, 通过CSP所约束的的规责指定可信的内容来源（这里的内容可以指脚本、图片、iframe、font、style等等可能的远程的资源）。通过CSP协定，让WEB处于一个安全的运行环境中。

相对于同源策略, 内容安全策略可以制定一系列的策略,从而只允许我们页面向我们允许的域名发起跨域请求,而不符合我们策略的恶意攻击则被挡在门外.

浏览器加载内容时(脚本、图片、iframe、font、style), 通过服务端或者前端配置 Content-Security-Policy 该内容指定的可信来源, 随后浏览器只会从从白名单域获获取内容。

二、语法​

Content-Security-Policy: <policy-directive>; <policy-directive>

三、指令​

3.1 child-src​

3.2 connect-src​

3.3 default-src​

3.4 font-src​

3.5 frame-src​

3.6 img-src​

3.7 manifest-src​

3.8 media-src​

3.9 object-src​

3.10 prefetch-src​

3.11 script-src​

3.12 style-src​

3.13 worker-src​

3.14 base-uri​

3.15 plugin-types​

3.16 sandbox​

3.17 form-action​

3.18 frame-ancestors​

frame-ancestors 指定可能嵌入页面的有效父项 <frame>、<iframe>、<object> 或 <embed>。

Content-Security-Policy: frame-ancestors 'self' https://xx.com https://yy.com;

四、配置​

4.1 Web​

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; img-src https://*; child-src 'none';" />

4.2 Node​

基于koa-helmet中间件来实现CSP功能

const Koa = require('koa');
const helmet = require('koa-helmet');

// 使用 koa-helmet 中间件
app.use(helmet());

// 自定义 CSP 安全策略
app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"], // 仅允许加载来自同源的资源
      scriptSrc: ["'self'", "'unsafe-inline'"], // 允许执行同源脚本和内联脚本
      styleSrc: ["'self'", "'unsafe-inline'"], // 允许加载同源样式和内联样式
      imgSrc: ["'self'", "data:"], // 允许加载同源图片和data URI图片
      // 其他资源类型的策略...
    },
  })
);

4.3 Nginx​

五、场景​

5.1 防止页面被 Iframe 嵌入​

Content Security Policy (CSP) 是一个更为强大的网页安全策略，它不仅可以防止页面被嵌套，还可以帮助预防各种类型的攻击，例如XSS攻击。你可以通过设置frame-ancestors指令来指定哪些页面可以嵌套当前页面

Content-Security-Policy: frame-ancestors 'self' https://chat.baidu.com http://mirror-chat.baidu.com https://fj-chat.baidu.com https://hba-chat.baidu.com https://hbe-chat.baidu.com https://njjs-chat.baidu.com https://nj-chat.baidu.com https://hna-chat.baidu.com https://hnb-chat.baidu.com http://debug.baidu-int.com;

请注意: 前端配置 Content-Security-Policy: frame-ancestors 是无效的。必须在 Nginx 或者服务端配置。