react

XSS和CSRF攻击思考

点点圈 提交于 2020-02-28 11:18:15
一、XSS攻击 1. 概述 在页面表单中内嵌js代码,执行js脚本获取用户信息或发送非法请求。 2. 解决 目前在vue、React等前端框中已经做了处理,只要按照安全的方式操作,基本上不会出现Xss,但是有一种情况是不能忽略,在于服务端是一个开放平台,对于调用者可能是客户端可能是Vue、React之外,还可能是其他的架构。从安全性的角度来看,不能保证前端框架绝对不出现不安全的使用方式,也不能保证客户端类型,服务端都需要处理XSS问题。 二、CSRF攻击 1. 概述 攻击前提的是服务端使用从cookie获取jsessionid,根绝jsessionid兑换session,或者用户信息是保存在Cookie中其他地方,同源页面或者设置了跨域访问页面,攻击者在自己钓鱼页面内嵌恶意链接,携带被攻击网站的Cookie访问到服务端,造成安全问题。目前基于Bearer Token或者Basic Token是放在Header中不再依靠cookie存储用户信息,但页面被XSS工内嵌了Js脚本或者请求被抓包,知道Token存储位置和请求Token放在那里header之中,并且获取了sessionStorage、LocalStorage、Cookie中的数据,那就存在一定安全风险。 2. 解决 最安全的方式是防止XSS攻击和使用Https 来源: oschina 链接: https://my

React 常用插件库

无人久伴 提交于 2020-02-28 08:46:12
js 加密 crypto-js (des加密,md5) crypto-js https://www.npmjs.com/package/crypto-js Mock联调 数据是前端开发过程中必不可少的一环, https://pro.ant.design/docs/mock-api-cn https://github.com/sorrycc/roadhog#mock 修改 .roadhogrc.mock.js 后请求没能指向真实服务器 按官网教程修改了.roadhogrc.mock.js的export部分。修改为 export default { 'GET /api/*': 'http://localhost:62078/', }; 这条规则的意思是说前端访问 http://localhost:8000/api/* 的时候, 本地的开发服务器会去代理访问 http://localhost:62078/api/*, 所以你在浏览器看到的请求还是看到的 http://localhost:8000/api/* 是正确的. 可以用命令调试: npm run start:no-proxy 使用ES6 语法重构 http://www.cnblogs.com/yongjz/p/5356914.html http://www.cnblogs.com/fayin/p/6831071.html 来源:

ReactNative

不羁岁月 提交于 2020-02-28 07:15:48
1.配置好环境 Java jdk Node Python SDK 2.安装React Native的命令行工具 npm install -g react-native 3.初始化项目 react-native init 项目名 4.切换到项目根目录中,运行 adb devices 来确保有设备连接到电脑上 启动 RN页面 创建基本的RN页面:需要的步骤: 1.导入 react 包,来创建组件 2.导入 react-native 包,来提供基础的开发组件 3.从react-native中,可以导入 StyleSheet 的组件,用它的cteate方法,可以创建样式对象 4.使用react基础的语法,创建出来的组件,就是一个合法的RN组件页面,只能使用 RN 的合法标签,在RN中只能使用 JS ,不能使用JSX 5.启动:react-native run-android ReactNative 底部导航栏: 安装: npm install react-native-tab-navigator --save 使用: 点击链接查看 图标库: 安装: npm install --save react-native-vector-icons 导入: import Icon from "react-native-vector-icons/FontAwesome" 配置:`将node

React 进阶提高

≯℡__Kan透↙ 提交于 2020-02-28 07:01:14
React 进阶提高 - 技巧篇 - React Hook - 第 2 季(18 个视频) React 进阶提高 - 技巧篇 - 第 2 季 #1 React 16.7.0 新特性 State Hook - 有讲到如何升级到新版本 「12:00」 React 进阶提高 - 技巧篇 - 第 2 季 #2 React 16.7.0 新特性 Effect Hook 「06:44」 React 进阶提高 - 技巧篇 - 第 2 季 #3 React 16.7.0 新特性 - 两个实例应用来实践 State Hook 和 Effect Hook 「10:43」 React 进阶提高 - 技巧篇 - 第 2 季 #4 使用 React Hook 来实现 TodoList - 写自定义的 Hook 「Pro」「06:58」 React 进阶提高 - 技巧篇 - 第 2 季 #5 使用 React Hook 来实现 TodoList (complete) 「Pro」「10:24」 React 进阶提高 - 技巧篇 - 第 2 季 #6 通过跳过 React Hook Effect 来优化性能 「Pro」「05:58」 React 进阶提高 - 技巧篇 - 第 2 季 #7 使用 React Hooks useEffect 发送 ajax 请求获取数据全攻略 「Pro」「11:21」 React

GraphQL + React + React Router + Apollo 实战教程(10 个视频)

梦想的初衷 提交于 2020-02-28 06:29:27
GraphQL + React + React Router + Apollo 实战教程(10 个视频) GraphQL + React + React Router + Apollo 实战教程 #1 课程介绍 「03:17」 GraphQL + React + React Router + Apollo 实战教程 #2 创建 graphql 服务器,定义 schema,开始实战(今天第四更) 「06:29」 GraphQL + React + React Router + Apollo 实战教程 #3 使用 axios 发送请求跑起来获得数据 「07:07」 GraphQL + React + React Router + Apollo 实战教程 #4 传递参数查单个数据 「Pro」「06:42」 GraphQL + React + React Router + Apollo 实战教程 #5 开始搭建前端项目 「Pro」「05:42」 GraphQL + React + React Router + Apollo 实战教程 #6 建立 apollo client - 安装 vscode 插件 「07:53」 GraphQL + React + React Router + Apollo 实战教程 #7 使用 react-apollo 的 Query 组件(第三更) 「Pro」

React配置Sass

偶尔善良 提交于 2020-02-28 05:30:45
一、安装sass-loader和node-sass依赖 npm install sass-loader node-sass --save-dev 二、打开react的webpack配置 node_modules/react-scripts/config/webpack.config.js 找到module下的rules,oneOf数组 在oneOf数组中添加以下对象 { test:/\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] } 来源: CSDN 作者: Mo_zifeng 链接: https://blog.csdn.net/Mo_zifeng/article/details/104536970

Next框架基础

て烟熏妆下的殇ゞ 提交于 2020-02-28 04:56:11
老规矩:脚手架快速搭建基本环境。很多都是重复的,所以省了很多代码。 路径跳转两种方式: 1.link标签式跳转。 2.Router跳转,可把方法分离出来。 import React from 'react' import Link from 'next/link' import Router from 'next/router' const Home = () => { function gotoA(){ Router.push('/jspangA') } return( <> <div>我是首页</div> <div> <Link href="/jspangA"> <a> <span>去JspangA页面</span> <span>前端博客</span> </a> </Link> </div> <div><Link href="/jspangB"><a>去JspangB页面</a></Link></div> <div> <button onClick={gotoA}>去JspangA页面</button> </div> </> ) } export default Home 传递参数通过query(?id=1),通过router.query.属性名,通过以下代码展示: import React from 'react' import Link from 'next/link'

【React Native 报错】Invariant Violation: Application xxx has not been registered

隐身守侯 提交于 2020-02-28 04:43:38
Xcode 编译 React native iOS 报错: Application AwesomeProject has not been registered 解决办法: 1.关闭所有React Native之前打开的 控制台窗口 2.关闭xcode 3.重新编译 来源: CSDN 作者: cuifangfang1177 链接: https://blog.csdn.net/cuifangfang1177/article/details/104536455

react介绍与脚手架搭建

泪湿孤枕 提交于 2020-02-28 03:55:36
React 背景介绍 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。 什么是React 用来构建UI的 JavaScript库 React 不是一个 MVC 框架,仅仅是视图层的库 react 官网 react 中文文档 为什么要用React呢? 使用组件化开发,符合现代Web开发的趋势 提升开发效率,代码可维护性和可阅读性增强 技术成熟,配件齐全,适用于大型Web项目(生态系统健全) 由Facebook专门的团队维护,技术支持可靠 使用方式简单,性能非常高,支持服务端渲染 安装react npm install creat-react-app -g 创建react脚手架项目 1. create-react-app one 2. cd my-app 3. npm start 用脚手架创建一个单页应用,进到项目里面后start,项目就可以跑起来了 来源: CSDN 作者: YuT_ian 链接: https://blog.csdn.net/YuT_ian/article/details/104543572

GraphQL + React Apollo + React Hook 大型项目实战(32 个视频)

纵饮孤独 提交于 2020-02-28 03:19:37
GraphQL + React Apollo + React Hook 大型项目实战(32 个视频) GraphQL + React Apollo + React Hook 大型项目实战 #1 介绍 「03:42」 GraphQL + React Apollo + React Hook 大型项目实战 #2 搭建 Apollo 客户端 「15:44」 GraphQL + React Apollo + React Hook 大型项目实战 #3 写好路由 「04:07」 GraphQL + React Apollo + React Hook 大型项目实战 #4 用 semantic-ui-react 写好导航 (三更) 「13:25」 GraphQL + React Apollo + React Hook 大型项目实战 #5 使用 useQuery 查询数据 「Pro」「09:59」 GraphQL + React Apollo + React Hook 大型项目实战 #6 使用 semantic Card 显示 Post 「Pro」「05:38」 GraphQL + React Apollo + React Hook 大型项目实战 #7 完成显示 Post 列表 「Pro」「06:18」 GraphQL + React Apollo + React Hook 大型项目实战 #8