hugh 的个人博客

vuePress-theme-reco hugh 的个人博客    2021
hugh 的个人博客

Choose mode

  • dark
  • auto
  • light
Home
分类
  • 前端
  • fe-robot
  • 前端监控
标签
专题
  • femonitor
  • jsby
  • fe-robot
TimeLine
工具
全版

hugh 的个人博客

154

Article

324

Tag

Home
分类
  • 前端
  • fe-robot
  • 前端监控
标签
专题
  • femonitor
  • jsby
  • fe-robot
TimeLine
工具
全版
  • 数据收集篇

    • 收集请求数据集详情-前端监控之数据采集篇
      • 第一,我们先要清楚,对于请求,我们通常需要哪些信息
      • 第二,对于这些数据,我们又用来做些什么
      • 第三, 注意点
    • 收集错误信息及堆栈-前端监控之数据收集篇
      • 1. 了解异常发生的情况和影响
      • 2. 了解 js 中异常抛出的内容
      • 3. 收集跨域异常信息
      • 4. 错误捕获上报
      • 5. 框架类异常收集
    • 收集资源加载错误
      • 资源类型
      • 如何监控
    • 前端日志打印收集-前端监控之数据收集篇
      • 问题主要分为以下几种
      • 什么是前端日志
      • 如何记录前端日志
    • 如何保证页面卸载时的上报数据完整性
      • 1. 使用异步 xhr
      • 2. 异步不好使,试试同步 xhr
      • 3. 杀手锏 sendBeacon
      • 4. 如果不追求时效性, 自然是使用缓存 + 延时发送的策略最优雅, 同时丢失数据的问题也可以大大改善
    • CPS报告收集-前端监控
      • csp
      • CSP 报告
      • 使用
  • 数据分析篇

  • 数据监控篇

  • 采坑篇

CPS报告收集_-_前端监控

vuePress-theme-reco hugh 的个人博客    2021

CPS报告收集-前端监控


hugh 的个人博客 2019-09-11 14:47:51 安全web前端fe_monitor

# csp

全称: Content-Security-Policy

是一种通过给浏览器加资源白名单的方式,进行站点保护的手段

可以有效的预防和阻止 类似 XSS、运营商劫持 之类的攻击

# CSP 报告

如果你的站点目前还不适合强制使用 CSP 拦截, 那么可以开启 Content-Security-Policy-Report-Only

开启方法如下

在服务端响应时,加入 Content-Security-Policy-Report-Only 的头部,

指定规则和report-uri

注: Content-security-policy 规则可以直接在 meta 头部标签指定, 但是 report-uri 属性不支持在 meta 设置

report-uri 将接受到一个 POST 请求

参数 JSON 包含如下属性

document-uri: 发生违规的文档的 URI。

referrer: 违规发生处的文档引用(地址)。

blocked-uri: 被 CSP 阻止的资源 URI。如果被阻止的 URI 来自不同的源而非文档 URI,那么被阻止的资源 URI 会被删减,仅保留协议,主机和端口号。

violated-directive: 违反的策略名称。

original-policy: 在 Content-Security-Policy HTTP 头部中指明的原始策略。

# 使用

# 1. nodejs 下

利用 helmet-csp 包

范例如下

var express = require('express');
const csp = require('helmet-csp')
var app = express();
app.use(csp({
	// Specify directives as normal.
	directives: {
		defaultSrc: ["'self'", 'default.com'],
		scriptSrc: ["'self'", "'unsafe-inline'"],
		styleSrc: ['style.com'],
		fontSrc: ["'self'", 'fonts.com'],
		imgSrc: ['img.com', 'data:'],
		reportUri: 'http://localhost:9999/api/track/csp-report/group/test',
		objectSrc: ["'none'"],
	},
	
	
	// This module will detect common mistakes in your directives and throw errors
	// if it finds any. To disable this, enable "loose mode".
	loose: false,
	
	// Set to true if you only want browsers to report errors, not block them.
	// You may also set this to a function(req, res) in order to decide dynamically
	// whether to use reportOnly mode, e.g., to allow for a dynamic kill switch.
	reportOnly: true,
	
	// Set to true if you want to blindly set all headers: Content-Security-Policy,
	// X-WebKit-CSP, and X-Content-Security-Policy.
	setAllHeaders: false,
	
	// Set to true if you want to disable CSP on Android where it can be buggy.
	disableAndroid: false,
	
	// Set to false if you want to completely disable any user-agent sniffing.
	// This may make the headers less compatible but it will be much faster.
	// This defaults to `true`.
	browserSniff: true
}))

 
app.get('/', function (req, res) {
	res.send(`<html> <head><style> body{ color: red; } </style> </head> <body>this is a csp test</body> </html>`);
});

 
app.listen(3000, function () {
	console.log('Example app listening on port 3000!');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

访问 localhost:3000,会触发 CSS 拦截报告的消息

[Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "style-src style.com". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

同时发送一条记录到 report 服务

服务端需要设置 bodyParser.json 支持 application/csp-report 格式的数据

显示结果如下, 样式并不会被影响

# 2. pathon

def middleware(request, response):
response['Content-Security-Policy-Report-Only'] = 

"default-src 'self'; " 

"report-uri http://locahost:9000/api/track/csp-report/group/test"
return response
1
2
3
4
5
6
7