分类
EP.日常杂记

EP2.内容安全标头CSP的示例

相关内容真正的权威

关于内容安全标头的相关内容,建议各位阅读以下两个页面:

读上面的说明会一愣一愣的同学该如何准确添加内容安全标头呢?这便是本文的意义所在。(能读懂的就可以自己写了)

注意:内容安全标头必须包含所有样式、脚本、图片甚至音乐,不然他们将无法加载。本教程的权威性远不及以上的两位,本文如有错误请评论斧正。

内容安全标头的意义

内容安全标头的意义是防止跨站脚本攻击,关于这个攻击,我推荐非技术人员阅读前端安全系列(一):如何防止XSS攻击? – 美团技术团队

普通博客的站长就当考验细心吧。

林林的不懂装懂

我们假想有一个人,名叫李四。我们将跟随李四从网站的简单到复杂写写内容安全标头。

李四刚开始直接用记事本写HTML网页,也没有写样式、脚本,图片也没有,那此时就可以使用最简单的内容安全标头:

Content-Security-Policy: default-src 'none'

李四后来在记事本中直接写脚本、样式(也就是内联),标头也该升级了:

李四的脚本或样式越写越多,后来将它们独立出了一个文件(也就是同域外部文件),表头应是:

脚本和样式越写越多,李四给网站使用了cdn,标头应是:

李四为网站使用了第三方统计(或者广告联盟的脚本),表头应是:

李四在同域下引用了图片,标头应有:

李四在不同域下(也就是图床)引用了图片,标头应有:

(位置先占着,应该不会更新了,欢迎大家补充)

林林水王

一个平凡到不能再平凡的中学生,虚伪的英语科代表,中国共产主义青年团团员,爱国主义者,自认为是独立思考的批判主义者(实际上不是),同时还是个水王(文章能水就水),经常“主观臆断”、“不讲道理”、“不善言辞”、“不讲武德”。

“EP2.内容安全标头CSP的示例”上的7条回复

default-src ‘self’ https:;
block-all-mixed-content;
base-uri ‘self’ https:;
form-action ‘self’ https:;
worker-src ‘self’ https:;
connect-src ‘self’ https: *;
img-src ‘self’ data: https: *;
media-src ‘self’ https: *;
font-src ‘self’ data: https: *;
frame-src ‘self’ https: *;
manifest-src ‘self’ https: *;
child-src https:;
script-src ‘self’ https: ‘unsafe-inline’ *;
style-src ‘self’ https: ‘unsafe-inline’ *;

发表评论

您的电子邮箱地址不会被公开。