前端安全配置 Content-Security-Policy(csp)

简介: 前端安全配置 Content-Security-Policy(csp)

先说一下场景,因为公司用了微软的rdlc报表,14版会默认加载一个js,但是这个js最近被墙了,需要翻墙才能正常访问。而这个js正影响着报表的加载速度。多番研究,发现csp可以解决。


什么是CSP


CSP全称Content Security Policy ,可以直接翻译为内容安全策略,说白了,就是为了页面内容安全而制定的一系列防护策略. 通过CSP所约束的的规责指定可信的内容来源(这里的内容可以指脚本、图片、iframe、fton、style等等可能的远程的资源)。通过CSP协定,让WEB处于一个安全的运行环境中。


有什么用?


我们知道前端有个很著名的”同源策略”,简而言之,就是说一个页面的资源只能从与之同源的服务器获取,而不允许跨域获取.这样可以避免页面被注入恶意代码,影响安全.但是这个策略是个双刃剑,挡住恶意代码的同时也限制了前端的灵活性,那有没有一种方法既可以让我们可以跨域获取资源,又能防止恶意代码呢?


答案是当然有了,这就是csp,通过csp我们可以制定一系列的策略,从而只允许我们页面向我们允许的域名发起跨域请求,而不符合我们策略的恶意攻击则被挡在门外.从而实现


需要说明的一点是,目前主流的浏览器都已支持csp.所以我们可以放心大胆的用了.


指令说明


指令就是csp中用来定义策略的基本单位,我们可以使用单个或者多个指令来组合作用,功能防护我们的网站.



参考链接:


https://www.cnblogs.com/heyuqing/p/6215761.html


https://content-security-policy.com/


只能从你自己的网站(自我)加载脚本。然后从另一个网站(www.google.com)加载脚本


如下设置:


<meta http-equiv="Content-Security-Policy" content="default-src *;
相关文章
|
6天前
|
前端开发 JavaScript
前端常用的ESlint配置
前端常用的ESlint配置
59 1
|
6天前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
172 0
|
6天前
|
移动开发 前端开发 JavaScript
前端vue2、vue3去掉url路由“ # ”号——nginx配置(一)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
63 0
|
6天前
|
缓存 安全 JavaScript
前端安全:Vue应用中防范XSS和CSRF攻击
【4月更文挑战第23天】本文探讨了在Vue应用中防范XSS和CSRF攻击的重要性。XSS攻击通过注入恶意脚本威胁用户数据,而CSRF则利用用户身份发起非授权请求。防范措施包括:对输入内容转义、使用CSP、选择安全的库;采用Anti-CSRF令牌、同源策略和POST请求对抗CSRF;并实施代码审查、更新依赖及教育团队成员。通过这些实践,可提升Vue应用的安全性,抵御潜在攻击。
|
6天前
|
前端开发 JavaScript 应用服务中间件
前端vue2、vue3去掉url路由“ # ”号——nginx配置(二)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
69 0
|
5天前
|
SQL 安全 前端开发
前端安全方面
前端安全方面
10 0
|
6天前
|
资源调度 前端开发 JavaScript
够啦!前端Yarn配置和命令
够啦!前端Yarn配置和命令
17 0
|
6天前
|
资源调度 前端开发 JavaScript
nvm,npm,yarn相关指令,前端配置准备
nvm,npm,yarn相关指令,前端配置准备
9 1
|
6天前
|
存储 安全 前端开发
PHP医院安全不良事件管理系统源码(AEMS)前端vue2+element+后端laravel8不良事件上报与闭环管理
医院不良事件上报与管理系统结合现代医院管理思路,遵照PDCA全面质量循环管理方法而设计,并在多家大型三甲医院成熟运用。系统从事件上报、基于人、机、料、法 、环的RCA分析、事件整改、效果评估实现了结构化、标准化、智能化的管理和分析,满足医院可追溯化、全流程闭环管理要求,满足等级医院评审细则要求,大力提高医院不良事件上报的效率,保障事件分析的准确性,促进医疗安全的提高,避免同类事件再次发生,改善整个医院医疗安全,从而实现医院安全医疗的目标。
27 3
|
6天前
|
前端开发 JavaScript 数据可视化
前端vite+vue3——自动化配置路由布局
前端vite+vue3——自动化配置路由布局
35 0