概念

内容安全策略（Content Security Policy，CSP）是一种web安全机制，用于帮助防范和减轻特定类型的攻击，包括跨站脚本攻击（Cross-Site Scripting，XSS）和数据注入等。它通过允许网站管理员定义和实施一系列安全策略，限制页面加载和执行的内容来源，以减少潜在的安全风险。

简单地说，CSP是一种安全策略，开发者可以控制网页加载资源的限制，防止恶意注入脚本。

思想

CSP的基本思想是通过设置响应头中的Content-Security-Policy或X-Content-Security-Policy字段，指定一系列可信任的内容源和执行规则。这些规则告诉浏览器只执行来自指定源的脚本、样式表、字体、图像等资源，而禁止运行来自未授权的源的内容。这种方式可以有效地限制恶意脚本的执行，防止XSS攻击和其他相关的安全威胁。

简单地说，可以通过后端设置页面的响应头的Content-Security-Policy，或者页面meta标签设定Content-Security-Policy，来控制页面加载资源的限制，从而尽量保证安全。

指令

CSP的一些常见策略指令包括：

default-src：定义默认内容来源。

script-src：指定允许加载和执行JavaScript代码的来源。

style-src：指定允许加载和应用CSS样式表的来源。

img-src：指定允许加载图像的来源。

font-src：指定允许加载字体的来源。

connect-src：指定允许进行网络请求的来源。

frame-src：指定允许加载内嵌框架（如iframe）的来源。

media-src：指定允许加载媒体资源（如音频和视频）的来源。

案例

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Content Security Policy Example</title>
  5.     <meta http-equiv="Content-Security-Policy" content="
  6.       default-src 'self';
  7.       script-src 'self' https://trusted-scripts.com;
  8.       style-src 'self' https://trusted-styles.com;
  9.       img-src 'self' data:;
  10.       font-src 'self' https://trusted-fonts.com;
  11.       connect-src 'self' https://trusted-api.com;
  12.       frame-src https://trusted-frames.com;
  13.       ">
  14.   </head>
  15.   <body>
  16.     <h1>Content Security Policy Example</h1>
  17.     <script src="https://trusted-scripts.com/myscript.js"></script>
  18.     <style>
  19.       body {
  20.         background-image: url('https://trusted-styles.com/background.jpg');
  21.       }
  22.     </style>
  23.     <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5AEHDxI2txnwhgAAAFBJREFUCNc1zrsNgDAIBNEy/9+/b/zFw8fZj9eLz9/vRnNQIfZgJCxazRVlmdHXCkW4BND0P5MnlFRhBDDbjGrlWGFaYIM0Rb6mY02oJFkyvIpIUMw09MCtMNa9hQAAAAASUVORK5CYII=' alt="Trusted Image">
  24.     <link rel="stylesheet" href="https://trusted-styles.com/mystyle.css">
  25.     <object data="https://trusted-fonts.com/font.woff" type="font/woff"></object>
  26.     <iframe src="https://trusted-frames.com"></iframe>
  27.   </body>
  28. </html>

default-src指令设置默认的内容来源，这里设置为’self'，表示只允许从同源加载资源。

script-src指令指定脚本的内容来源，这里设置为'self'和https://trusted-scripts.com，表示只允许从同源和https://trusted-scripts.com加载脚本。

style-src指令指定样式表的内容来源，这里设置为'self'和https://trusted-styles.com，表示只允许从同源和https://trusted-styles.com加载样式表。

img-src指令指定图像的内容来源，这里设置为'self'和data:，表示只允许从同源和data:加载图像。

font-src指令指定字体的内容来源，这里设置为'self'和https://trusted-fonts.com，表示只允许从同源和https://trusted-fonts.com加载字体。

connect-src指令指定网络请求的内容来源，这里设置为'self'和https://trusted-api.com，表示只允许从同源和https://trusted-api.com进行网络请求。

frame-src指令指定内嵌框架的内容来源，这里设置为https://trusted-frames.com，表示只允许加载来自https://trusted-frames.com的内嵌框架。

根据这个策略，页面中的各种资源将根据指令定义的来源进行加载和执行。例如，脚本、样式表、图像、字体等资源只能从特定的来源加载，而其他来源的资源将被拦截或阻止加载。

参考文档

https://blog.csdn.net/2301_77485708/article/details/132491086