内容安全策略运营

序

Web安全一直是前端领域不可回避的话题，但是很多前端工作人员仅仅停留在关于Web安全策略的访谈过程中。本文主要总结了上网过程中遇到的安全问题，旨在对Web安全相关问题有一个更立体的亲身体验，也希望能为你踩坑时提供一些参考。

背景

XSS对CSRF

跨站脚本

XSS是跨站脚本的缩写。为了与级联样式表相区别，它被缩写为XSS:

跨站点脚本是一种安全漏洞，它允许攻击者向网站注入恶意的客户端代码。该代码由v ictims执行，让攻击者绕过访问控制并冒充用户。

从MDN给出的定义可以看出，XSS通过注入有害代码来实现攻击方案，也就是说，XSS的攻击方案是注入，一般是通过注入脚本。因为浏览器中的dom和bom为js提供了接口，所以js可以操作html和css，也可以注入html片段等。

跨站点请求伪造

许多人分不清CSRF。事实上，他们还是有很大不同的，但他们通常在执行CSRF之前使用XSS来获得一些权限。CSRF是跨站点请求伪造的简称:

CSRF是一种伪装成可信用户并向网站发送不需要的命令的攻击。

从MDN的定义可以看出，CSRF通过伪造进行攻击，即其本质目的需要通过各种手段伪装自己，以获取不属于自己的权利资源。

区分

XSS分类

XSS防御计划

XSS预防主要分为两部分:

防止攻击者提交恶意代码。

浏览器执行恶意代码

从这两部分，我们可以梳理出不同的预防思路:

从上面的列表可以看出，内容安全策略对于XSS预防是有好处的，所以下一步是本文的重点内容，下一部分将重点介绍CSP相关的内容。

芯片尺寸封装

内容安全策略是现代浏览器安全机制的重要组成部分。从图中可以看出，除了老IE只支持csp的沙箱，其他主流浏览器都已经支持csp，w3c也对整体做了统一要求。详情请参考w3c官方文档内容安全策略Level 2。

简介

Content-Security-Policy是现代浏览器用来增强文档安全性的响应头字段。用于限制js、css等浏览器的资源加载。也就是说，csp的本质是一种限制资源加载的策略，通过分析csp指令和值来限制特定的资源。具体实现可以在chromium最后一部分源代码的相关实现中找到。另外，除了在header中加入csp，还可以在html dom中用meta标签进行限制，但是当两者限制的资源指令和值相同时，header中的优先级更高。

指令

价值

情况

通过上一部分的介绍，我们对CSP的一些用法有了大致的了解。我们来看看前端业务中的具体做法。

服务器

服务器{ listen 9080server_name本地主机；add _ header Content-Security-Policy“default-src‘self’；script-src“self”；框架——祖先的‘自我’；object-src ' none ' "；add _ header X-Content-Type-Options no sniff；add _ header X-frame-选项SAMEORIGIN}

我们来看看nginx里一切都被严格控制的情况。我们将通过在控制台的v8实例下创建一个标签来测试它。

这时，我们发现浏览器报告

拒绝应用xxx，因为它违反了以下内容安全政策指令...

错误；同时，我们在任何网络中打开请求连接，我们发现，在响应头中

内容-安全-策略字段:xxx如上图所示

然后，根据返回的错误，适度释放csp限制。

server { listen 9080; server_name localhost; add_header Content-Security-Policy "default-src *; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data:;"; add_header X-Content-Type-Options nosniff; add_header X-frame-Options SAMEORIGIN;}服务器{ listen 9080server_name本地主机；add _ header Content-Security-Policy " default-src *；script-src * ' unsafe-inline ' ' unsafe-eval '；img-src *数据:；"；add _ header X-Content-Type-Options no sniff；add _ header X-frame-选项SAMEORIGIN}

修改后发现之前的错误消失，测试成功。

超文本标记语言

最后，让我们来看看html中meta标签的一种用法。

favicon.ico" />很抱歉，如果不启用Javascript，将无法正常工作。请启用它以继续。

源代码

在这一部分，我们通过chromium源代码来看看CSP是如何在chrome中实现的。

内容_安全_策略_解析器

bool iscspdirevenamechaacter { return IsASCIIAlpanumeric | | c = = '-'；} bool IsCSPDirectivevalueCharacter { return isascispace | | c！= '，' c！= ';');}

在网络中，通过分析密钥值来获得内容安全策略中的指令和值。

资源提取器

bool resource fetcher::resourcenedsload { if返回falseif == ResourceType::kFont ！参数。IslinkPreload)返回falseif = = resource type::ki mage )| | params。GetImageRequestBehavior = = fetch parameters::kDeferImageLoad)){ return false；}退货政策！= revalidation policy::kUse | | resource-> StillNeedsLoad；}

判断是否加载资源。

http_equiv

void http equiv::ProcessHttpEquivContentSecurityPolicy { if)return；if->GetSettings->GetBypassCSP)返回；if){ Vector parsed = ParseContentSecurityPolicies))；window-> GetContentSecurityPolicy-> add policies)；window-> GetPolicyContainer-> addcontentsecuritypolices)；} else if){ window-> GetContentSecurityPolicy-> ReportReportOnlyInmeta；} else { NOTREACHED}}

我们在文档中看到一些执行相关csp的逻辑。

工作者_内容_设置_客户端

bool workercontentsettings client::AllowscriptFromSource { bool allow = enabled _ per _ settings；如果{ GURL top _ frame _ origin _ URL = top _ frame _ origin _。GetURLfor { if rule.secondary_pattern。匹配){ allow = rule。GetContentSetting！= ConTENT _ SETTING _ BLOCK打破；} } } if { EnsureContentSettingsManager；content _ settings _ manager _--> OnContentBlocked；返回false}返回true}

最后，我们可以简单看一下是否允许加载内容的一些逻辑，以脚本加载为例。

摘要

无论是it行业还是工程师，都需要关注工程项目中的安全问题。对于前端项目，常见的xss、CSRF等相关知识也需要我们在实际工程项目中摸索原理，熟悉常见的解决方案，这样才能在架构设计和工程实践的过程中达到应用项目的稳定性和可持续性。最后附上chrome中XSS信息的ER图，从中可以体会到chrome的架构设计和安全问题的信息。

涉及

跨站点脚本

前端安全系列:如何防范XSS攻击？

前端安全系列:如何防范CSRF攻击？

xss攻击和csrf攻击的定义和区别

【第849期】如何让前端更安全？-详解——XSS攻防

用于预测最新面试考试的cookie的SameSite属性

内容-安全-策略

内容安全政策的详细说明

CHROME extended notes拒绝不安全评估

CSP内容安全政策

模块ngx _ http _ headers _ module

内容安全策略参考

内容安全策略级别2

WebKit技术内幕

了解一下前端CSPCSP是怎么落地的。

来源:分段故障号

作者:叶林