一：原理

CSP（Content Security Policy）是一种网络安全策略，它可以限制网站的资源加载，从而防止一些攻击，如 XSS、数据注入等。本质上是一种白名单

CSP 的原理是告诉浏览器，哪些来源是被允许的，然后浏览器就只会从这些来源加载资源。

1：使用：

一种是设置 HTTP 首部中的 Content-Security-Policy

一种是设置 meta 标签的方式 <meta http-equiv="Content-Security-Policy">

Content-Security-Policy: default-src 'self' *.example.com;

 <meta http-equiv="Content-Security-Policy">

指定了默认策略为只允许加载自身域名下的资源和 example.com 域名下的资源。这样浏览器就只会加载这些域名下的资源了。

2：属性：

script-src：指定允许加载的 JavaScript 脚本的来源；

style-src：指定允许加载的 CSS 样式表的来源；

img-src：指定允许加载的图片的来源；

connect-src：指定允许通过 XMLHttpRequest 或 Fetch 访问的来源；

font-src：指定允许加载的字体文件的来源；

media-src：指定允许加载的音视频文件的来源；

object-src：指定允许加载的 Object 对象的来源；

frame-src：指定允许加载的 Frame 的来源；

child-src：指定允许加载的子资源（如 iframe、worker）的来源。

每个配置项都可以指定多个来源，多个来源之间使用空格隔开，可以使用通配符 * 来表示任意域名。

Content-Security-Policy: default-src 'self' *.example.com;
                             script-src 'self' 'unsafe-inline' *.example.com;
                             style-src 'self' 'unsafe-inline' *.example.com;
                             img-src 'self' data: *.example.com;
                             font-src 'self' data: *.example.com;
                             connect-src 'self' *.example.com;
                             media-src 'self' *.example.com;
                             object-src 'self' *.example.com;
                             frame-src 'self' *.example.com;
                             child-src 'self' *.example.com;

二：总结

1：使用 CSP 可能会对网站的正常运行产生影响，因此在配置 CSP 时需要进行充分的测试和评估。

2：CSP 并不是万无一失的，仍需要结合其他安全措施来提高网站的安全性。