React的一些优秀安全实践

React.js、Vue.js 这些现代的前端框架默认已经对安全做了非常多的考虑，但是这仍然不能阻碍我们写出一些安全漏洞 。。。因为框架永远不能完全限制我们编程的灵活性，只要有一定的灵活性存在就意味着有安全风险。

成都创新互联：从2013年开始为各行业开拓出企业自己的“网站建设”服务，为数千家公司企业提供了专业的成都做网站、成都网站设计、网页设计和网站推广服务， 按需网站建设由设计师亲自精心设计，设计的效果完全按照客户的要求，并适当的提出合理的建议，拥有的视觉效果，策划师分析客户的同行竞争对手，根据客户的实际情况给出合理的网站构架，制作客户同行业具有领先地位的。

下面我就带大家一起来看一下，为了保证我们 React 应用的安全性，有哪些值得遵循的优秀实践。

dangerouslySetInnerHTML

React​ 会对默认的数据绑定({}​)进行自动转义来防止 XSS​ 攻击，所有数据都会认为是 textContent：

但是为了保障开发的灵活性，它也给我们提供了一些直接渲染 HTML​ 的方法，比如 dangerouslySetInnerHTML：

在把数据传入 dangerouslySetInnerHTML​ 之前，一定要确保数据是经过过滤或转义的，比如可以通过 dompurify.sanitize 进行过滤：

import dompurify from "dompurify";
import "./styles.css";

export default function App() {
  const code = "";
  return (
    

      

    

  );
}

避免直接操作 DOM 注入 HTML

除了 dangerouslySetInnerHTML​ ，我们当然还可以直接通过原生的 DOM API​ 来插入 HTML：

另外也可以通过 ref​ 来访问 DOM​ 来插入 HTML：

这两个操作都是相当危险的操作，推荐大家既然用了 React​ 就要尽量用 React​ 的编写方式来写代码，尽量不要直接操作 DOM​，如果你确实要渲染富文本，还是推荐用上面提到的 dangerouslySetInnerHTML，而且数据要经过过滤或转义。

服务端渲染

当使用服务端渲染函数时，数据绑定也会提供自动内容转义，比如 ReactDOMServer.renderToString()​ 和 ReactDOMServer.renderToStaticMarkup()。

在将字符串发送给客户端进行注水之前，避免将字符串直接拼接到 renderToStaticMarkup() 的输出上。

为了避免 XSS​，不要将未过滤的数据与 renderToStaticMarkup() 的输出连接在一起：

app.get("/", function (req, res) {
  return res.send(
    ReactDOMServer.renderToStaticMarkup(
      React.createElement("h1", null, "Hello ConardLi!")
    ) + otherData
  );
});

JSON 注入

将 JSON​ 数据与服务器端渲染的 React​ 页面一起发送是很常见的。始终对 < 字符进行转义来避免注入攻击：

window.JSON_DATA = ${JSON.stringify(jsonData).replace( /
URL 注入
前面几个基本上都是直接渲染未经过滤的富文本导致的 XSS​，实际上通过 URL​ 伪协议也可以执行 javascript 脚本：
因此所有需要注入到代码里的 URL​ 参数，我们都要做好 URL 的合法性验证，千万不要直接注入进去：
import "./styles.css";

function isSafe(url) {
  if (url && !url.startsWith("http")) {
    return null;
  }
  // ... 其他判断
}

export default function App() {
  const code = "javascript:alert('xss')";
  return (
    

      测试 URL 注入
      一个平平无奇的链接
    

  );
}
避免有漏洞的 React 版本
React​ 以前也被测试出有比较高危的安全漏洞，建议经常保持更新，来避免这些有漏洞的 React 版本：

避免有漏洞的其他依赖
一般我们的项目都会依赖大量的开源代码，有时漏洞并不是我们写出来的，而是这些依赖带进来的，因此我们无论使用任何框架，定期进行依赖更新都是不错的选择。
Eslint React 安全配置
推荐大家通过 Eslint​ 的 React 安全配置（https://github.com/snyk-labs/eslint-config-react-security/）来对代码进行约束，它会自动帮助我们发现一些代码中的安全风险。
            

                新闻标题：React的一些优秀安全实践
                

                标题链接：http://www.shufengxianlan.com/qtweb/news22/108272.html
            
            

                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
            

                广告
                
            
            

                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联