本文目录一览：
- 1、javascript h5 app（react.js）中如何下载附件（url链接形式）并在新窗口中打开附件?
- 2、react encodeurl方法怎么用
- 3、关于web开发中用到的URL转码问题，以及xss攻击的疑问。
- 4、xss注入漏洞产生的原因？xss注入过程步骤是什么？防范xss注入的方法有哪些
- 5、如何在React中做Ajax 请求
javascript h5 app（react.js）中如何下载附件（url链接形式）并在新窗口中打开附件?
我们只要用content创建一个ObjectURL并赋值给aLink即可解决文件类型的限制问题。
文件的自动下载也挺好办，自己构建一个UI点击事件，再自动触发下，就能实现自动下载啦。
现在来看看最终代码：
代码如下:
function downloadFile(fileName, content){
var aLink = document.createElement('a');
var blob = new Blob([content]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
}
现在，只要一调用downloadFile，文件就自动下载了
react encodeurl方法怎么用
Ionic
PhoneGap
这种app的原理是，用webview来实现类似原生的界面，也就是用h5写的代码是运行在webview里的。优点很明显
动态部署（不需要每次通过应用商店的审核，尤其是iOS，审核有时候真的觉得两颗蛋不够疼的。）
界面灵活（用h5来写的界面要比原生代码灵活的多）
开发迅速（一套代码，iOS，安卓都可以跑；不管是安卓还是iOS，用原生的代码实现类似webview的页面，布局什么的都是很复杂的一件事情）
同样，缺点也很明显
关于web开发中用到的URL转码问题，以及xss攻击的疑问。
首先传递到你的后台是不会自动解码的，但是浏览器会自动解码，所以当黑客把有攻击性的URL通过encode编码方式发送到你们后台时，如果没有通过decodeURI()来解码（解码的目的是为对解码后的链接进行判断，防止参数含有XSS），那么这段代码可能会通过系统对参数的XSS过滤，从而展现到前台，由于浏览器会自动解码（浏览器中含有decode函数），所以没有被过滤的XSS会被执行。
xss注入漏洞产生的原因？xss注入过程步骤是什么？防范xss注入的方法有哪些
对于的用户输入中出现XSS漏洞的问题，主要是由于开发人员对XSS了解不足，安全的意识不够造成的。现在让我们来普及一下XSS的一些常识，以后在开发的时候，每当有用户输入的内容时，都要加倍小心。请记住两条原则：过滤输入和转义输出。
一、什么是XSS
XSS又叫CSS (Cross Site Script) ，跨站脚本攻击。它指的是恶意攻击者往Web页面里插入恶意html代码，当用户浏览该页之时，嵌入其中Web里面的html代码会被执行，从而达到恶意的特殊目的。XSS属于被动式的攻击，因为其被动且不好利用，所以许多人常呼略其危害性。
在WEB2.0时代，强调的是互动，使得用户输入信息的机会大增，在这个情况下，我们作为开发者，在开发的时候，要提高警惕。
二、XSS攻击的主要途径
XSS攻击方法只是利用HTML的属性，作各种的尝试，找出注入的方法。现在对三种主要方式进行分析。
第一种：对普通的用户输入，页面原样内容输出。
打开(限公司IP)，输 入：scriptalert(‘xss’)/script， JS脚本顺利执行。当攻击者找到这种方法后，就可以传播这种链接格式的链接 （）如：http: //go.ent.163.com/goproducttest/test.jsp?key=scriptalert(‘xss’) lt;/script，并对JSCODE做适当伪装，如：
%74%3e%61%6c%65%72%74%28%27%78%73%73%27%29%3c%2f%73%63%72%69%70%74%3e,当其 它用户当点此链接的时候，JS就运行了，造成的后果会很严重，如跳去一个有木马的页面、取得登陆用户的COOKIE等。
第二种：在代码区里有用户输入的内容
原则就是，代码区中，绝对不应含有用户输入的东西。
第三种：允许用户输入HTML标签的页面。
用户可以提交一些自定义的HTML代码，这种情况是最危险的。因为，IE浏览器默认采用的是UNICODE编码，HTML编码可以用ASCII方式来写，又可以使用”/”连接16进制字符串来写，使得过滤变得异常复杂，如下面的四个例子，都可以在IE中运行。
1，直接使用JS脚本。
img src=”javascript:alert(‘xss’)” /
2，对JS脚本进行转码。
img src=”javascript:alert(‘xss’)” /
3，利用标签的触发条件插入代码并进行转码。
img onerror=”alert(‘xss’)” /
4，使用16进制来写(可以在傲游中运行)
img STYLE=”background-image: /75/72/6c/28/6a/61/76/61/73/63/72/69/70/74/3a/61/6c/65/72/74/28/27/58/53/53/27/29/29″
以上写法等于img STYLE=”background-image: url(javascript:alert(‘XSS’))”
三、XSS攻击解决办法
请记住两条原则：过滤输入和转义输出。
具体执行的方式有以下几点：
第一、在输入方面对所有用户提交内容进行可靠的输入验证，提交内容包括URL、查询关键字、http头、post数据等
第二、在输出方面，在用户输内容中使用XMP标签。标签内的内容不会解释，直接显示。
第三、严格执行字符输入字数控制。
四、在脚本执行区中，应绝无用户输入。
如何在React中做Ajax 请求
首先：React本身没有独有的获取数据的方式。实际上，就React而言，它甚至不知道有服务器画面的存在。
React只是简单地渲染组件，单独从两个地方获取数据：props 和 state。
因此，为了使用服务器的数据，你需要在你的组件（component）的props或state里拿到数据。
你可以将这个过程与服务和数据模型复杂化，就像你所希望的那样，但最终只是组件渲染props和state。
选择一个HTTP 库
为了获取来自服务器的数据，你需要一个HTTP库，网上有很多，最终他们都做同样的事情，但他们有不同的特点。
喜欢 Promise？那就选axios吧：mzabriskie...
讨厌Promise?，但是喜欢callback？不妨看看superagent
当然，你也可以选择自己封装一个ajax库，我喜欢Axios，下面将以这个库作为例子，如果你不喜欢，可以选择其他库看看。
Fetch Data
如下是一个简单的实例，一个组件从subreddit获取职位。看看这个例子，我们将会了解它是如何工作的
import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
class FetchDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: []
};
}
componentDidMount() {
axios.get(`r/${this.props.subreddit}.json`)
.then(res = {
const posts = res.data.data.children.map(obj = obj.data);
this.setState({ posts });
});
}
render() {
return (
div
h1{`/r/${this.props.subreddit}`}/h1
ul
{this.state.posts.map(post =
li key={post.id}{post.title}/li
)}
/ul
/div
);
}
}
ReactDOM.render(
FetchDemo subreddit="reactjs"/,
document.getElementById('root')
);
它是如何工作的？
首先，我们将axios 库import进来。
然后在constructor 里先调用super，接着初始化state，让它拥有一个posts空数组。
componentDidMount是关键所在，这个方法将会在组件插入DOM的第一时间执行。该方法在整个组件的生命周期只会执行一次。
它使用axios.get方法从subreddit获取数据，反引号的字符串是ES6的模板字符串，${}部分是由表达式的值所取代，所以URL传递给axios.get实际上是r/react...。
有两点你需要注意的是：
你可以在任意的subreddit URL末尾处附加上.json并且获得那个职位的json形式的展示
如果你忘记www，你会得到一个CORS错误
因为Axios使用Promise，所有我们可以链式调用then方法来处理response。获取的职位信息是一点一点的转换后提取的，最重要的一点是，组件的状态(state)是由职位与新数组调用this.setState更新的，由此触发一个重新渲染，然后职位的信息就可以看见了