阿里前端——电话面试题整理

╰+攻爆jí腚メ 2022-02-28 09:50 313阅读 0赞

## 一.元素居中 ##

我们需要让元素居中显示：

1. 一段文本的水平居中

text-align: center;

2. 一张图片的水平居中

父级：text-align: center;

3. 一个块级元素的水平居中

块级元素水平居中，使用 margin-right: auto; margin-left: auto;

4. 单行文本的竖直居中

单行文本的垂直居中，让 line-height 和 height 相等。

5. 不确定高度的一段文本竖直居中

不确定高度的一段文本竖直居中，这里不适用高度，使用 padding-top: ...; padding-bottom: ...; padding-top 和 padding-bottom 值相同.

6. 确定高度的块级元素竖直居中等等

确定高度的块级元素竖直居中，使用 position: absolute; top: 50%; margin-top: ...;(margin-top的值为自身高度的值的一半的负值);

7. 绝对定位实现水平垂直居中，使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;

8.css3伸缩布局实现元素水平垂直居中，通过使用 display:flex;  align-items: center;  justify-content: center;

justify-content: center; /* 让子元素水平居中 */
     align-items: center; /* 让子元素垂直居中 */

[https://www.cnblogs.com/xinjie-just/p/5916001.html][https_www.cnblogs.com_xinjie-just_p_5916001.html]

## 二.vue双向绑定 ##

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。vue是通过Object.defineProperty()来实现数据劫持的。

[https://www.cnblogs.com/libin-1/p/6893712.html][https_www.cnblogs.com_libin-1_p_6893712.html]

## 三.web攻击怎么预防 ##

*  ### **【XSS】** ###

**xss攻击是跨站脚本攻击，例如在表单中提交含有可执行的javascript的内容文本，如果服务器端没有过滤或转义这些脚本，而这些脚本由通过内容的形式发布到了页面上，这个时候如果有其他用户访问这个网页，那么浏览器就会执行这些脚本，从而被攻击，从而获取用户的cookie等信息**

跨站脚本攻击可以分为两种：

1). 反射型XSS

它是通过诱使用户打开一个恶意链接，服务端将链接中参数的恶意代码渲染到页面中，再传递给用户由浏览器执行，从而达到攻击的目的。

2). 持久型XSS

持久型XSS将恶意代码提交给服务器，并且存储在服务器端，当用户访问相关内容时再渲染到页面中，以达到攻击的目的，它的危害更大。

比如，攻击者写了一篇带恶意JS代码的博客，文章发表后，所有访问该博客文章的用户都会执行这段恶意JS。

**【防御】**

**　　1、对于敏感的cookie信息，使用HttpOnly，使document对象中找不到cookie。**

**　　2、对于用户输入的信息要进行转义。**

*  ### **【CSRF】** ###

**CSRF（Cross Site Request Forgery），中文是跨站点请求伪造。CSRF攻击者在用户已经登录目标网站之后，诱使用户访问一个攻击页面，利用目标网站对用户的信任，以用户身份在攻击页面对目标网站发起伪造用户操作的请求，达到攻击目的。**

**【防御】**

1、敏感请求使用验证码。

2、验证HTTP Referer字段。Referer字段记录了HTTP请求的来源地址，从银行A网站发出来的请求会带有A网站的地址，从携带CSRF地址发出的请求会携带B网站的地址，我们只需在每个敏感请求验证Referer值，如果是来自A网站的通过，否则不通过。但是这种方法把安全寄托于浏览器，并不完全安全，在某些浏览器上，还是可以通过篡改 Referer 从而进行CSRF攻击。而且，在某些用户禁用Referer的情况下，服务器会一直拒绝客户的请求。

3、Anti CSRF Token：在请求地址中添加token 并验证。更多的是生成一个随机的token，在用户提交数据的同时提交这个token，服务器端比对后如果不正确，则拒绝执行操作。在用户登录之后，产生token 并放入session中，在每次请求时把token从session中拿出来，以参数的形式加入请求，在服务器端建立拦截器验证该token，token则通过，否则拒绝。但是这种方法也是有安全问题的，在某些网站支持用户发表链接的，那么黑客在该网站发布自己的个人网站地址，系统也会为这个地址后加上token，则黑客可以在自己的网站上得到这个token参数，从而发动CSRF攻击。

4、在HTTP头中自定义属性token 并验证。把token作为自定义属性放在HTTP的头中，通过封装XMLHttpRequest可以一次性给所有请求加上token 属性。这样子token就不会暴露在浏览器地址中。

**【SQL注入】**

**SQL注入攻击，攻击者在提交表单的时候，在表单上面填写相关的sql语句，而系统把这些字段当成普通的变量发送给服务器端进行sql查询，则，由攻击者填写的sql会拼接在系统的sql语句上，从而进行数据库的某些操作。**

**【防御】**

**1、表单过滤，验证表单提交的合法性，对一些特殊字符进行转义处理**

**　　2、数据库权限最小化**

**　　3、查询语句使用数据库提供的参数化查询接口，不要直接拼接SQL**

**       4、防止SQL注入最好的方法是使用预编译语句**

### **【身份认证和会话】** ###

【攻击】

黑客在浏览器中停用JS，防止客户端校验，从而进行某些操作。

**　【防御】**

**　　1、隐藏敏感信息。**

**　　2、对敏感信息进行加密。**

**　　3、session 定期失效**

[https://www.cnblogs.com/lovesong/p/5233195.html][https_www.cnblogs.com_lovesong_p_5233195.html]

### **四、js原生获取元素** ###

[https://www.jb51.net/article/116460.htm][https_www.jb51.net_article_116460.htm]

**JS获取DOM元素的方法（8种）**

1.  通过ID获取（getElementById）
2.  通过name属性（getElementsByName）
3.  通过标签名（getElementsByTagName）
4.  通过类名（getElementsByClassName）
5.  获取html的方法（document.documentElement）
6.  获取body的方法（document.body）
7.  通过选择器获取一个元素（querySelector）
8.  通过选择器获取一组元素（querySelectorAll）

[https_www.cnblogs.com_xinjie-just_p_5916001.html]: https://www.cnblogs.com/xinjie-just/p/5916001.html
[https_www.cnblogs.com_libin-1_p_6893712.html]: https://www.cnblogs.com/libin-1/p/6893712.html
[https_www.cnblogs.com_lovesong_p_5233195.html]: https://www.cnblogs.com/lovesong/p/5233195.html
[https_www.jb51.net_article_116460.htm]: https://www.jb51.net/article/116460.htm