其他
「小技巧」在React中防范XSS攻击
示例1:React中成功的XSS攻击
<img src="1" onerror="alert('Gotcha!')" />
现在会发生什么?
onerror
事件处理程序已执行!那不是我们想要的!我们只是不知不觉地从不受信任的用户输入中执行了脚本。<p style={searchResultsStyle}>You searched for: <b><span dangerouslySetInnerHTML={{ __html: this.state.submittedSearch }} /></b></p>
dangerouslySetInnerHTML
属性,这是React中的一个特性,它的工作原理就像原生的 innerHTML
浏览器API一样,由于这个原因,一般认为使用这个属性是不安全的。示例2:React中的XSS攻击失败
dangerouslySetInnerHTML
属性。相反,让我们这样编写输出代码:<p style={searchResultsStyle}>You searched for: <b>{this.state.submittedSearch}</b></p>
我们将输入相同的输入,但这一次,这里是输出:
textContent
浏览器API。示例3:在React中清理HTML内容
dangerouslySetInnerHTML
你就可以了。但如果你发现自己需要使用这个功能呢?结束
祝您编程愉快,安全无虞!
完整的代码示例可在GitHub上找到:https://github.com/thawkin3/xss-demo
原文:https://levelup.gitconnected.com/protecting-against-xss-attacks-in-react-52442d9fff4c
作者:Tyler Hawkins
粉丝福利
132期留言+在看幸运用户:晨晨虎,速找我领取红包。
临走前留下,今天的福利
福利1:《Vue3.0+TS仿知乎专栏》获取资源请在公众号对话框中回复关键字:006,如果没有关注请扫下面的二维码 福利2:在看+留言,我会随机抽取一位认真留言的小伙伴,给他发一个5~10不等的红包奖励
推荐阅读
- END -
点赞 + 在看 + 留言,下一个幸运儿就是你!
走心的分享更容易被抽中~
开奖时间 下期文末