前端大厂面试题探索编辑部——第一期

目录

简介

题目

单选题

题解

A选项的Content-Security-Policy

http-equiv属性

content属性

B选项的CSRF

使用CSRF Token

验证Referer和Origin头

C选项的HTTP Only

D选项的防止SQL注入

输入验证和转义


简介

       这个是一个长系列,我会以题目为导向,通过题目来针对性的学习前端的方方面面,每篇文章涉及到的题目并不多,但是每道题我都会尽量细致,面向初学者友好的去讲解,喜欢的可以一直关注,我会持续更新这个系列的文章。

题目

单选题

1.关于前端安全,以下说法正确的是()

A. XSS(跨站脚本攻击)可以通过设置HTTP响应头的Content-Security-Policy为none来防止。

B. CSRF(跨站请求伪造)攻击可以通过移除所有的cookie来防止。

C. HTTP Only属性可以防止通过JavaScript访问cookie,从而减少XSS攻击的风险。

D. 输入验证和转义是防止SQL注入的无效方式。

题解

       答案选C,我们逐个解释,我们尽量讲解的细致一些,面向初学者友好一些,而且我们尽量有代码示例就用代码来解释。

A选项的Content-Security-Policy

       设置HTTP的响应头的Content-Security-Policy为none,并不是防止XSS攻击的有效正确方式。相反,Content-Security-Policy反而是可以有效防止XSS的攻击。XSS,是一种网站应用程序的安全漏洞攻击,是代码注入的一种。 ​ HTTP概括来讲,就是万维网的数据通信的基础。而Content-Security-Policy,以后我简称为CSP,CSP是HTTP的一个响应头,它不是对象,属性或者方法,而是一种服务器发送的指令。 ​ 我们在HTML文件中,<head>标签下会有一个<meta>标签,在这个标签下,我们可以对于http-equiv设置一个配置性的命令,即CSP,它可以告诉浏览器如何处理一个网页的内容。

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">  <meta charset="UTF-8">  <title>Title</title>  
</head>  
<body>  </body>  
</html>
http-equiv属性

       http-equiv属性的作用是模拟HTTP响应头部的效果,这里我们设置为CSP,就是它指令的一种,而CSP的作用就是有效防止XSS的攻击

content属性
  • content属性用于定义与name属性和http-equiv属性相关的值,它可以设置很多相关的命令,这个例子就是一个典型的样式
  • default-src 'self指令设置了所有类型资源的默认策略,我们一般都是这样设置的,这里的资源就是比如脚本、样式、图片和字体等等。
  • img-src https://指令用于指定哪些来源的图片可以被加载,我们设置为这个命令,意味着我们可以在任何使用HTTPS协议的来源,来去加载图片
  • child-src 'none',也是一个属性,我们设置为none,表示不允许从任何源加载这类内容,这里的内容我们说的是要嵌入的内容,比如iframe/embed/object这些元素

       回到题目本身,其实那么我们到底如何做到A选项说的,如何防止XSS呢?完整的代码是这样的,但是,概括来讲,正确配置Content-Security-Policy(如限制资源的加载和执行来源)可以有效防止XSS攻击,A说法说反了

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' https://trustedscript.com;connect-src 'self';img-src 'self' https://trustedimagehost.com;style-src 'self' 'unsafe-inline';font-src 'self';object-src 'none';frame-ancestors 'none';base-uri 'self';
">
B选项的CSRF

       移除所有的cookie并不是防止CSRF攻击的有效方法,Cross-Site Request Forgery,全称为这个,为跨站请求伪造,简单来说,是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站,并执行一些操作。

       什么是cookie呢?全称为HTTP cookie,我们在浏览一些国外网站的时候,可能会遇到这个选项,是我们在浏览网站时,网络服务器创建的,并通过网页浏览器存放在用户计算机的小文本文件,即cookie就是一些小文件移除所有的cookie并不能防止CSRF攻击。要通过CSRF攻击的常见方式,来阻止,比如使用CSRF Token,或者验证Referer和Origin头,下面逐一介绍。

       B选项说的,移除所有的cookie,这个操作本身和有效防止CSRF并没有直接关系CSRF攻击的是什么?它攻击的是用户当前的登录状态,cookie这些小文件更多的是比如购物车信息,会话标识符,跟踪和分析信息等。

使用CSRF Token
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSRF的阻止方式一</title>
</head>
<body>
<form action="/submit-form" method="post"><input type="hidden" name="csrf_token" value="your_csrf_token_here"><!-- 其他表单字段 --><input type="submit" value="Submit">
</form>
</body>
</html>

       这是一份使用CSRF Token方式的一份代码,这里的value,我们要根据实际情况来定,是服务器生成的唯一随机,并且不可预测的CSRF令牌(token)。

验证Referer和Origin头
const express = require('express');
const app = express();
​
app.use((req, res, next) => {const referer = req.headers.referer;const origin = req.headers.origin;
​// 检查Referer或Origin是否合法if (referer !== 'https://expected-referer.com' && origin !== 'https://expected-origin.com') {return res.status(403).send('CSRF check failed');}
​next();
});
​
app.post('/submit-form', (req, res) => {// 处理表单提交res.send('Form data received');
});
​
app.listen(3000);

       这是通过验证referer和origin头的方式,我们可以在node.js环境下写这样的JavaScript代码,同时满足这两个条件,我们就把参数res的状态设置为403,再send一下信息:CSRF check failed。

C选项的HTTP Only

       HTTP Only属性确实可以防止通过JavaScript访问, 减少XSS攻击的风险,前面已经说了cookie是什么?下面来看看完整代码,来看看我们是如何做的。首先确保你的计算机已经安装了node.js和express,如果没有express,我们可以通过npm install express指令来安装。

const express = require('express');
const app = express();
​
app.use((req, res, next) => {const referer = req.headers.referer;const origin = req.headers.origin;
​// 检查Referer或Origin是否合法if (referer !== 'https://expected-referer.com' && origin !== 'https://expected-origin.com') {return res.status(403).send('CSRF check failed');}
​next();
});
​
app.post('/submit-form', (req, res) => {// 处理表单提交res.send('Form data received');
});
​
app.listen(3000);

       当我们访问服务器的根目录'/'的时候,它会设置一个名为secureCookie的Cookie,我们把httpOnly属性设置为true,即使用HTTP Only属性,增强了cookie的安全性。

D选项的防止SQL注入

       D说法也是,说反了,我们确实是可以通过输入验证和转义,来防止SQL注入的。什么是SQL注入?SQL注入也是一种常见的网络攻击技术,攻击者通过恶意SQL代码注入到应用程序的输入字段中,试图破坏或者操纵后台数据库。比如攻击者可以写一些这样的语句。

SELECT * FROM users WHERE username = '[用户输入的用户名]' AND password = '[用户输入的密码]';
输入验证和转义

       输入验证和转义是两种基本的安全措施,它可以防止很多不同形式的注入攻击,包括SQL注入。比如我们可以写这样的代码。转义,说的是什么事呢?就是指输入数据可能会被错误的解释为代码的特殊字符进行处理的过程,我们通过转义来确保输入字符串中特殊字符,比如单引号,不会结束字符串文本,并且开始新的SQL命令。

app.post('/submit-form', (req, res) => {const email = req.body.email;const age = req.body.age;
​// 验证电子邮件地址if (!email.match(/^[^@]+@[^@]+\.[^@]+$/)) {return res.status(400).send('无效的电子邮件地址');}
​// 验证年龄if (isNaN(age) || age < 18 || age > 100) {return res.status(400).send('无效的年龄');}
​// 处理有效输入// ...
});

       这里的if当中的部分即是这种方式的体现。当然,还有很多,比如类型检查,格式验证,长度验证,内容检查等等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/652356.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode-题目整理【12】:N皇后问题--回溯算法

注意点&#xff0c;语法&#xff1a; 一定要记得初始化内层数组的长度&#xff1a;board[i] make([]rune, n)&#xff0c;否则就会报出现越界的错 // 第1步&#xff0c;初始化二维数组&#xff0c;内层数组长度为0&#xff0c;外层为nboard :make([][]rune,n)for i:0;i<n;i…

使用virtualenv管理python环境

Windows配置virtualenv 安装 pip install virtualenv virtualenvwrapper virtualenvwrapper-win设置WORK_HOME环境变量 在系统path变量中添加虚拟环境目录&#xff1a;键WORKON_HOMEC:dev\Envs 修改windows环境下mkvirtualenv.bat文件&#xff0c;配置虚拟环境根目录地址 配…

python-自动化篇-运维-监控-简单实例-道出如何使⽤Python进⾏网络监控?

如何使⽤Python进⾏⽹络监控&#xff1f; 使⽤Python进⾏⽹络监控可以帮助实时监视⽹络设备、流量和服务的状态&#xff0c;以便及时识别和解决问题。 以下是⼀般步骤&#xff0c;说明如何使⽤Python进⾏⽹络监控&#xff1a; 选择监控⼯具和库&#xff1a;选择适合⽹络监控需…

蓝桥杯省赛无忧 课件49 DFS-剪枝

01 数字王国之军训排队 02 特殊的三角形 03 特殊的多边形

优雅的python(二)

&#x1f308;个人主页&#xff1a;小田爱学编程 &#x1f525; 系列专栏&#xff1a;c语言从基础到进阶 &#x1f3c6;&#x1f3c6;关注博主&#xff0c;随时获取更多关于c语言的优质内容&#xff01;&#x1f3c6;&#x1f3c6; &#x1f600;欢迎来到小田代码世界~ &#x…

【docker】linux系统docker的安装及使用

一、docker应用的安装 1.1 安装方式 Docker的自动化安装&#xff0c;即使用提供的一键安装的脚本&#xff0c;进行安装。 官方的一键安装方式&#xff1a;curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun 国内 daocloud一键安装命令&#xff1a;curl -s…

二刷代码随想录|Java版|回溯算法1|回溯基础理论+组合问题

理论 写链表之类的真的很痛苦&#xff0c;赶紧跳到回溯&#xff01;这次我想结合算法设计这本书&#xff0c;把java版写出来。放在第三部分吧。希望能够在研一完成这项工作&#xff01; 从一刷总结以下的几个要点&#xff1a; 回溯方法模板性非常强&#xff01;&#xff01;可…

企业虚拟机服务器中了lockbit3.0勒索病毒怎么办,lockbit3.0勒索病毒解密处理流程

对于企业来说&#xff0c;企业的数据是企业的核心命脉&#xff0c;关乎着企业的生产与运营的所有工作。随着网络技术的不断发展&#xff0c;网络安全威胁也在不断增加。近期&#xff0c;云天数据恢复中心接到了很多企业的求助&#xff0c;企业的虚拟机服务器遭到了lockbit3.0勒…

Unity MonoBehaviour 生成dll

dllllllllllllll&#x1f953; &#x1f959;vs创建类库项目&#x1f9c0;添加UnityEngine、UnityEditor引用&#x1f355;添加MonoBehaviour类&#x1f9aa;设置dll生成路径&#x1f37f;生成dll&#x1f354;使用dll中的Mono类 &#x1f959;vs创建类库项目 &#x1f9c0;添加…

网络安全攻防红队常用命令

command 收集渗透中会用到的常用命令 。 建议直接[CtrlF]查找 java命令执行 如下编码网站&#xff1a; https://ares-x.com/tools/runtime-exec/ https://r0yanx.com/tools/java_exec_encode/ https://www.bugku.net/runtime-exec-payloads/ 手动编码操作 bash -c {echo,…

网络安全产品之认识安全隔离网闸

文章目录 一、什么是安全隔离网闸二、安全隔离网闸的主要功能三、安全隔离网闸的工作原理四、安全隔离网闸的分类五、安全隔离网闸与防火墙的区别四、安全隔离网闸的应用场景 随着互联网的发展&#xff0c;网络攻击和病毒传播的方式越来越复杂&#xff0c;对网络安全的要求也越…

Nginx进阶篇【五】

Nginx进阶篇【五】 八、Nginx实现服务器端集群搭建8.1.Nginx与Tomcat部署8.1.1.环境准备(Tomcat)8.1.1.1.浏览器访问:8.1.1.2.获取动态资源的链接地址:8.1.1.3.在Centos上准备一个Tomcat作为后台web服务器8.1.1.4.准备一个web项目&#xff0c;将其打包为war8.1.1.5.启动tomcat进…

C# 中比较时间的大小,看当前时间处于哪个时间段

文章目录 比较时间的大小初始数据转换成TimeSpan格式&#xff0c;以进行比较。更新一下时间当前时间在哪个时间段自定义时间在哪个段中&#xff1f; 代码如诗系列。 C# 中比较两个时间的大小&#xff08;不含日期DateTime&#xff09;&#xff0c;仅使用时间模块。C# 中看当前时…

基于GPT3.5逆向 和 本地Bert-Vits2-2.3 的语音智能助手

文章目录 一、效果演示二、操作步骤三、架构解析 一、效果演示 各位读者你们好&#xff0c;我最近在研究一个语音助手的项目&#xff0c;是基于GPT3.5网页版的逆向和本地BertVits2-2.3 文字转语音&#xff0c;能实现的事情感觉还挺多&#xff0c;目前实现【无需翻墙&#xff0…

ubuntu20.04 安装ROS2 记录

主要参考B站古月居的ROS2入门21讲 和 以下链接&#xff08;基本和视频上一致&#xff09; ubuntu20.04安装ROS2 详细教程_ubuntu20.04 ros2-CSDN博客 但是中间有些需要注意的地方&#xff0c; 1&#xff0c;添加源 步骤中提到 sudo curl -sSL https://raw.githubuserconten…

LaTeX基础使用【系列四】

&#x1f308;个人主页&#xff1a;godspeed_lucip &#x1f525; 系列专栏&#xff1a;LaTeX基础使用 &#x1f984;1 LaTeX的多行数学公式&#x1f420;1.1 导入包&#x1f420;1.2 gather环境&#xff1a;多行公式&#x1f420;1.3 gather\* &#xff1a;无编号公式&#x1…

Codeforces Round 921 (Div. 2)

A. We Got Everything Covered! 题意&#xff1a;有任意由前k个字母组成的长度为n的字符串s1&#xff0c;你需要构建一个字符串s2&#xff0c;使s1恒为s2的子串&#xff08;注意是子串&#xff0c;不是连续子串&#xff09; 分析&#xff1a;我们可以构造n组字符串&#xff0c…

深入Pyecharts:桑基图绘制与炫酷效果实战【第38篇—python:桑基图】

文章目录 深入Pyecharts&#xff1a;桑基图绘制与炫酷效果实战桑基图简介安装 Pyecharts简单桑基图的绘制自定义桑基图的炫酷效果高级样式定制 多组数据桑基图的展示动态桑基图的绘制结合真实数据的桑基图案例导出和分享进阶应用&#xff1a;桑基图与其他图表的组合总结 深入Py…

代码随想录算法训练59 | 单调栈part02

503.下一个更大元素II 这道题和 739. 每日温度 几乎如出一辙&#xff0c;可以自己尝试做一做 代码随想录 42. 接雨水 接雨水这道题目是 面试中特别高频的一道题&#xff0c;也是单调栈 应用的题目&#xff0c;大家好好做做。 建议是掌握 双指针 和单调栈&#xff0c;因为在面…

Ps:渐变编辑器

渐变编辑器 Gradient Editor可用于创建和编辑自定义渐变&#xff0c;它提供了详细的控制选项&#xff0c;能够精确地调整渐变的颜色、样式和效果。 提示&#xff1a; 拖动边框或边角可缩放渐变编辑器窗口。 预设 Presets 提供了大量的渐变预设。还可通过右侧按钮新建 New、导入…