前端安全是指在前端开发过程中，保障网站应用程序的安全性，防止黑客攻击、注入、跨站脚本等安全威胁。前端安全主要包括以下几个方面：
XSS（跨站脚本攻击）
cross site scripting
XSS 漏洞是指攻击者在网页中注入恶意脚本，从而利用漏洞获取用户敏感信息或者进行恶意操作。
攻击方式
以下是一些XSS攻击的例子：
1. 反射型XSS示例
攻击者通过给用户发送包含恶意脚本的链接，当用户点击链接时，恶意脚本会被注入到页面中，从而窃取用户的Cookie等敏感信息。
示例：
假设网站存在一个登录功能，用户可以在登录页面输入用户名和密码进行登录。网站将用户输入的用户名和密码作为参数，拼接到登录URL中，并在服务器端进行验证。攻击者可以构造一个带有恶意脚本的登录链接，当用户点击该链接时，恶意脚本将会被注入到登录页面中，从而执行攻击者的恶意代码。
例如，攻击者可以构造以下登录链接：
https://example.com/login?username=<script> alert('XSS attack!') </script>&password=123456
当用户点击该链接并进行登录时，页面上将会弹出一个提示框，显示"XSS attack!"。 为了防止这种攻击，开发者应该在服务器端对用户输入进行过滤和编码，确保用户输入的内容不会被当做脚本执行。例如，在Java中，可以使用ESAPI库对用户输入进行编码：
String username = ESAPI.encoder().encodeForHTML(request.getParameter("username"));
String password = ESAPI.encoder().encodeForHTML(request.getParameter("password"));
上述代码会将用户输入的内容进行HTML编码，从而确保用户输入的内容不会被解析为脚本。
2. 存储型XSS
攻击者通过提交恶意脚本到服务器端，当其他用户访问包含恶意脚本的页面时，恶意脚本会被执行，从而窃取用户的敏感信息或者控制用户账号。
示例：
假设网站存在一个留言板功能，用户可以在留言板中发布消息。网站将用户发布的消息存储到数据库中，并在页面上显示出来。攻击者可以在留言板中发布带有恶意脚本的消息，当其他用户访问留言板页面时，恶意脚本将会被执行，从而窃取用户的敏感信息或者控制用户账号。 例如，攻击者可以在留言板中发布以下恶意消息：
Hello, <script> alert('XSS attack!'); </script>
当其他用户访问留言板页面时，页面上将会弹出一个提示框，显示"XSS attack!"。 为了防止这种攻击，开发者应该在服务器端对用户输入进行过滤和编码，确保用户发布的消息不会被当做脚本执行。例如，在PHP中，可以使用strip_tags函数过滤用户输入，从而去除HTML标签：
<?php
$message = strip_tags($_POST['message']);
//将过滤后的消息存储到数据库中
?>
上述代码会将用户输入中的HTML标签去除，从而确保用户输入的内容不会被解析为脚本。
3. DOM-Based XSS示例
攻击者通过修改页面URL或者其他参数，使得页面中的JavaScript脚本执行恶意脚本，从而窃取用户的敏感信息或者控制用户账号。
示例：
假设网站存在一个通过URL参数来显示不同内容的页面。攻击者可以构造一个带有恶意脚本的URL，当用户访问该URL时，恶意脚本将会被注入到页面中，从而执行攻击者的恶意代码。 例如，攻击者可以构造以下URL：
https://example.com/?page=<script> alert('DOM-Based XSS attack!') </script>
当用户访问该URL时，页面上将会弹出一个提示框，显示"DOM-Based XSS attack!"。
为了防止这种攻击，开发者应该对用户输入进行过滤和编码，并避免在客户端使用用户输入来构造DOM元素。例如，在JavaScript中，可以使用textContent属性来输出文本内容，而不是innerHTML属性，从而避免恶意脚本的注入：
var page = document.getElementById("page");
page.textContent = userInput;
上述代码会将用户输入的内容作为文本内容输出到页面中，从而避免恶意脚本的注入。
防范 XSS 攻击的方法包括
对输入数据进行过滤和转义
escape
使用 HTTP-only 标识符，防止JS获取cookie
HTTP-only是一种cookie属性，它可以防止通过JavaScript脚本访问cookie，从而提高Web应用程序的安全性。 当浏览器收到带有HTTP-only属性的cookie时，它会将其存储在一个特殊的区域中，使得只有在HTTP请求中才会发送该cookie，而JavaScript脚本无法访问该cookie。这样可以防止XSS攻击中的恶意脚本窃取用户的cookie信息。 开发者可以通过在HTTP响应头中添加Set-Cookie标头来设置HTTP-only属性。例如，以下代码将一个名为session的cookie设置为HTTP-only：
Set-Cookie: session=abcdef12345; HttpOnly
值得注意的是，HTTP-only属性并不能完全防止cookie被盗用，因为攻击者仍然可以通过其他方式（如网络嗅探）获取cookie信息。因此，开发者还应该采取其他安全措施来保护cookie信息的安全性，如使用HTTPS协议传输数据、定期更换cookie值等。
使用 CSP（Content Security Policy，内容安全策略），白名单机制。
CSP（Content Security Policy，内容安全策略）是一种Web应用程序安全政策，可以用于减少和防止XSS攻击、数据注入攻击和点击劫持等攻击，从而提高Web应用程序的安全性。 CSP通过在HTTP响应头中添加Content-Security-Policy字段来实现，该字段指定了允许加载的资源类型和来源。例如，可以通过以下CSP策略来限制只允许加载同源JavaScript和CSS文件：
Content-Security-Policy: default-src 'self' *.example.com; script-src 'self'
上述策略中，default-src指定了默认来源为本域名和example.com，而script-src指定了只允许加载同源JavaScript文件。 CSP还支持其他的策略指令，如img-src指令用于指定允许加载的图片来源，frame-src指令用于指定允许加载的iframe来源等等。开发者可以根据需要自定义CSP策略，从而提高Web应用程序的安全性。
CSRF（跨站请求伪造）
CSRF 漏洞是指攻击者通过诱导用户访问恶意网站或者点击恶意链接，使得用户在已登录的网站上执行某些操作，从而实现攻击的目的。
防范 CSRF 攻击的方法包括使用
- token 验证
- 检查 Referer
- 使用验证码等。
SQL 注入
SQL 注入漏洞是指攻击者通过在输入框中输入恶意 SQL 语句，从而获取敏感数据。
防范 SQL 注入漏洞的方法包括
- 使用参数化查询
- 限制输入长度
- 过滤特殊字符等。
文件上传漏洞
文件上传漏洞是指攻击者通过上传恶意文件，在服务器上执行恶意代码或者获取服务器权限。
防范文件上传漏洞的方法包括
- 限制上传文件类型
- 检查文件内容
- 限制文件大小等。
点击劫持
点击劫持是指攻击者通过将恶意网页置于透明的 iframe 中，覆盖在正常网页上，使得用户在不知情的情况下点击了恶意网页上的按钮或链接。
防范点击劫持的方法包括
- 使用 X-Frame-Options
- 设置网页背景色等。
其他
-
HTTPS 加密：HTTPS 是一种基于 SSL/TLS 协议的安全通信协议，可以保护通信过程中的数据安全性。使用 HTTPS 协议可以防止中间人攻击、窃听、篡改等安全威胁。
-
安全编码：安全编码是指在编写代码时，遵循安全编码规范，避免常见的安全漏洞。安全编码的规范包括对输入数据进行过滤和校验、使用加密算法保护敏感数据、避免使用 eval 和 Function 等动态执行代码的方式、使用 HTTPS 加密传输敏感数据等。
