Web的标准与前端开发|青训营笔记

77 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天

一、关于前端开发

1、前端开发的起源、架构、变迁

Web 自1989年诞生时由三种技术构成:HTML、HTTP、URL。CSS 和 JavaScript 是过几年后才出现的。 Web 的架构和变迁:

3cd287d1f694498303f803908c6ba9e.jpg

2、前端应用的领域

‌‍‬⁠⁡⁢⁣⁤Web 标准与前端开发.pptx - 飞书文档 -联想浏览器 2022_8_1 20_06_46.png

3、前端语言、框架、工具

前端语言
HTML -> Structural
CSS -> Presentational
JavaScript -> Behavioral
WebAssembly 现在也可以在浏览器中运行

常见前端框架
NodeJs —— Ryan Dahl
Babel —— Sebastian McKenzie
Webpack —— Tobias Koppers
Koa —— TJ Holowaychuk
React —— Facebook
Vue —— 尤雨溪

4、Web标准组织

b358e9c505f277fe7583b6c9fc87682.png

二、Web的安全开发

1、攻击篇

XSS

‌‍‬⁠⁡⁢⁣⁤Web 开发的安全之旅 - 刘宇晨 .pptx - 飞书文档 -联想浏览器 2022_8_1 21_15_21.png

‌‍‬⁠⁡⁢⁣⁤Web 开发的安全之旅 - 刘宇晨 .pptx - 飞书文档 -联想浏览器 2022_8_1 21_15_59.png

Cookie安全

Cookie的重要字段中,其中的domain字段,如果不指定domain的值,默认就是本域。
设置Cookie时,如果不指定path的值,默认就是目标页面的路径。
HttpOnly是指在Http层面上传输的Cookie,当设置了HttpOnly标志后,客户端脚本就无法读写该Cookie,这样能有效防御XSS攻击获取Cookie。
Secure Cookie机制指的是设置了Secure标志的Cookie仅在HTTPS层面上安全传输,如果请求是HTTP的,就不会带上这个Cookie,这样能降低重要的Cookie被中间人截获。

DOS的两种模式

1、 ‌‍‬⁠⁡⁢⁣⁤Web 开发的安全之旅 - 刘宇晨 .pptx - 飞书文档 -联想浏览器 2022_8_1 21_24_11.png

‌‍‬⁠⁡⁢⁣⁤Web 开发的安全之旅 - 刘宇晨 .pptx - 飞书文档 -联想浏览器 2022_8_1 21_24_50.png 2、

‌‍‬⁠⁡⁢⁣⁤Web 开发的安全之旅 - 刘宇晨 .pptx - 飞书文档 -联想浏览器 2022_8_1 21_31_59.png

‌‍‬⁠⁡⁢⁣⁤Web 开发的安全之旅 - 刘宇晨 .pptx - 飞书文档 -联想浏览器 2022_8_1 21_32_27.png

防御篇

针对XSS

‌‍‬⁠⁡⁢⁣⁤Web 开发的安全之旅 - 刘宇晨 .pptx - 飞书文档 -联想浏览器 2022_8_1 21_39_16.png

‌‍‬⁠⁡⁢⁣⁤Web 开发的安全之旅 - 刘宇晨 .pptx - 飞书文档 -联想浏览器 2022_8_1 21_39_37.png

CSP

「Web 开发的安全之旅」第四届字节跳动青训营 - 前端专场 -联想浏览器 2022_8_1 21_57_29.png

‌‍‬⁠⁡⁢⁣⁤Web 开发的安全之旅 - 刘宇晨 .pptx - 飞书文档 -联想浏览器 2022_8_1 22_00_17.png

防御CSRF

‌‍‬⁠⁡⁢⁣⁤Web 开发的安全之旅 - 刘宇晨 .pptx - 飞书文档 -联想浏览器 2022_8_1 22_06_49.png