为防止 CSRF 攻击,您的后端 (ASP.NET Web API) 和前端 (Angular) 都必须配置为防止此类攻击。
取自https://angular.io/guide/security#xsrf:
为了防止 XSRF,应用程序必须确保用户请求来自真实应用程序,而不是来自其他站点。服务器和客户端必须合作来阻止这种攻击。
在常见的反 XSRF 技术中,应用服务器 [后端] 在 cookie 中发送随机生成的身份验证令牌。客户端代码读取 cookie 并在所有后续请求中添加带有令牌的自定义请求标头。服务器将接收到的 cookie 值与请求标头值进行比较,如果值丢失或不匹配,则拒绝请求。
这种技术很有效,因为所有浏览器都执行相同的源策略。只有设置了 cookie 的网站中的代码才能从该站点读取 cookie 并为对该站点的请求设置自定义标头。这意味着只有您的应用程序才能读取此 cookie 令牌并设置自定义标头。 evil.com 上的恶意代码不能。
考虑到这一点,这里引用了 Angular HttpClient Docs 的另一句话,它解释了如何实现它。
取自https://angular.io/guide/http#security-xsrf-protection:
在执行 HTTP 请求时,拦截器从 cookie 中读取令牌,默认为 XSRF-TOKEN,并将其设置为 HTTP 标头 X-XSRF-TOKEN。由于只有在您的域上运行的代码才能读取 cookie,因此后端可以确定 HTTP 请求来自您的客户端应用程序,而不是攻击者。
默认情况下,拦截器会在所有变异请求(POST 等)上将这个标头发送到相对 URL,但不会在 GET/HEAD 请求或具有绝对 URL 的请求上发送。
您的服务器需要在页面加载或第一个 GET 请求时在名为 XSRF-TOKEN 的 JavaScript 可读会话 cookie 中设置一个令牌。在后续请求中,服务器可以验证 cookie 是否与 X-XSRF-TOKEN HTTP 标头匹配,因此确保只有在您的域上运行的代码才能发送请求。每个用户的令牌必须是唯一的,并且必须可由服务器验证;这可以防止客户端制作自己的令牌。将令牌设置为您网站的身份验证 cookie 的摘要,并添加盐以增加安全性。
需要注意的关键点是:
- 加载 Angular 应用程序时,它应该首先向您的后端进行 API 调用以检索身份验证令牌,该令牌保存为名为“XSRF-TOKEN”的 cookie。可能在根组件 (app.component.ts) 的某个地方 ngOnInit() 听起来不错。
- 默认情况下,身份验证令牌将自动注入所有变异请求(如 POST)的 http 标头中。 (请注意这一点,它是无证的:Angular 6 does not add X-XSRF-TOKEN header to http request)。除非您返回自定义命名的 cookie,否则您必须使用 Angular 的 HttpClientXsrfModule。
- 考虑到这一点,您的 ASP.NET Web API 还应该在接收请求时验证 XSRF-TOKEN。
关于你的第二个问题,cookie 劫持是通过 XSS 完成的。
XSS 漏洞通常发生在应用程序接受用户输入并将其输出到页面而不对其进行验证、编码或转义时。
Angular 默认会清理标签的输入。但是,前提是您以“有角度的方式”做事。如果您使用第三方库(例如 jQuery)来操作 DOM,而不是使用 Angular 的 renderer2 模块,您可能会失去这种保护。
取自:https://angular.io/guide/security#xss:
同样,如果您与其他操作 DOM 的库进行交互,您可能不会获得与 Angular 插值相同的自动清理。避免直接与 DOM 交互,而是尽可能使用 Angular 模板。
对于不可避免的情况,请使用内置的 Angular 清理功能。使用 DomSanitizer.sanitize 方法和适当的 SecurityContext 清理不受信任的值。
为了提高安全性,您还应该清理后端中的任何变异请求(例如 PUT 或 POST)。
很难为您提供代码示例,因为您的问题似乎是一个更基于理论的问题。
我希望您能阅读我在上面超链接的那些链接。它们肯定更详细,解释更清楚。我希望它至少可以为您指明开始的正确方向。