{"componentChunkName":"component---src-templates-blog-post-js","path":"/how-to-prevent-xss-attack/","result":{"data":{"markdownRemark":{"html":"<h2>XSS是什么？</h2>\n<p>XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。<br>\nXSS 的本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨哪些脚本是可信的，从而导致了恶意代码的执行。</p>\n<h2>XSS类型？</h2>\n<p>XSS 一般分为存储型、反射型和 DOM 型。</p>\n<ul>\n<li>存储型指的是恶意代码提交到了网站的数据库中，当用户请求数据的时候，服务器将其拼接为 HTML 后返回给了用户，从而导致了恶意代码的执行。</li>\n<li>反射型指的是攻击者构建了特殊的 URL，当服务器接收到请求后，从 URL 中获取数据，拼接到 HTML 后返回，从而导致了恶意代码的执行。</li>\n<li>DOM 型指的是攻击者构建了特殊的 URL，用户打开网站后，js 脚本从 URL 中获取数据，从而导致了恶意代码的执行。</li>\n</ul>\n<h2>XSS的预防</h2>\n<p>XSS 攻击的预防可以从两个方面入手，一个是恶意代码提交的时候，一个是浏览器执行恶意代码的时候。</p>\n<ul>\n<li>对于第一个方面，如果我们对存入数据库的数据都进行的转义处理，但是一个数据可能在多个地方使用，有的地方可能不需要转义，由于我们没有办法判断数据最后的使用场景，所以直接在输入端进行恶意代码的处理，其实是不太可靠的。</li>\n<li>因此我们可以从浏览器的执行来进行预防，一种是使用纯前端的方式，不用服务器端拼接后返回。另一种是对需要插入到 HTML 中的代码做好充分的转义。对于 DOM 型的攻击，主要是前端脚本的不可靠而造成的，我们对于数据获取渲染和字符串拼接的时候应该对可能出现的恶意代码情况进行判断。</li>\n<li>还有一些方式，比如使用 CSP ，CSP 的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行，从而防止恶意代码的注入攻击。</li>\n<li>还可以对一些敏感信息进行保护，比如 cookie 使用 http-only ，使得脚本无法获取。也可以使用验证码，避免脚本伪装成用户执行一些操作。</li>\n</ul>","timeToRead":2,"frontmatter":{"title":"什么是 XSS 攻击？如何防范 XSS 攻击 ？","date":"May 13, 2020","spoiler":null},"fields":{"slug":"/how-to-prevent-xss-attack/"}}},"pageContext":{"slug":"/how-to-prevent-xss-attack/","previous":{"fields":{"slug":"/browser-cache/"},"frontmatter":{"title":"浏览器缓存"}},"next":{"fields":{"slug":"/how-to-prevent-csrf-attack/"},"frontmatter":{"title":"什么是 CSRF 攻击？如何防范 CSRF 攻击 ？"}}}},"staticQueryHashes":["3649515864","63159454"]}