之前每次都是想的很浅,或者只是个理论派,事实证明就是得动手实践
参考
官方文档
通过设置属性来告诉浏览器允许加载的资源数据来源。可通过Response响应头来设置,也可以直接通过meta标签来设置
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">
Content-Security-policy: default-src 'self'; script-src 'self' allowed.com; img-src 'self' allowed.com; style-src 'self';
通过上述两种方式来设置CSP。
还可以设置CSPRO,它不执行限制选项,只会进行记录违反行为
Content-Security-Policy-Report-Only: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;
CSP指令分为指令和指令值,指令用来指明作用区域,指令值则是用于标明该区域的js策略
script-src:外部脚本 style-src:样式表 img-src:图像 media-src:媒体文件(音频和视频) font-src:字体文件 object-src:插件(比如 Flash) child-src:框架 frame-ancestors:嵌入的外部资源(比如<frame>、<iframe>、<embed>和<applet>) connect-src:HTTP 连接(通过 XHR、WebSockets、EventSource等) worker-src:worker脚本 manifest-src:manifest 文件 dedault-src:默认配置 frame-ancestors:限制嵌入框架的网页 base-uri:限制<base#href> form-action:限制<form#action> block-all-mixed-content:HTTPS 网页不得加载 HTTP 资源(浏览器已经默认开启) upgrade-insecure-requests:自动将网页上所有加载外部资源的 HTTP 链接换成 HTTPS 协议 plugin-types:限制可以使用的插件格式 sandbox:浏览器行为的限制,比如不能有弹出窗口等。
** *:星号表示允许任何URL资源,没有限制; self:表示仅允许来自同源(相同协议、相同域名、相同端口)的资源被页面加载; data:仅允许数据模式(如Base64编码的图片)方式加载资源; none:不允许任何资源被加载; unsafe-inline:允许使用内联资源,例如内联<script>标签,内联事件处理器,内联<style>标签等,但出于安全考虑,不建议使用; nonce:通过使用一次性加密字符来定义可以执行的内联js脚本,服务端生成一次性加密字符并且只能使用一次;**
用例分析
Content-Security-policy: default-src 'self'; script-src 'self' allowed.com; img-src 'self' allowed.com; style-src 'self';
上述的csp策略就是说该界面默认只允许加载本身的资源,后面的img-src等会对前面的默认设置权限进行覆盖。
我们先来了解一个小知识(敲黑板):当浏览器碰到一个左尖括号时,会变成标签开始状态,然后会一直持续到碰到右尖括号为止,在其中的数据都会被当成标签名或者属性
还有其他各种各样的,参考上面的链接,这里只对几个脑回路比较奇的点进行分析