fix: xss

README.md

@@ -21,6 +21,9 @@ import Comment, { Editor, RenderText } from 'comment';
 | showList   | boolean | true                               | false    | 是否显示评论列表                             |
 | showEditor | boolean | true                               | false    | 是否显示评论输入框                           |
 | showHeader | boolean | true                               | false    | 是否显示评论顶部的提示                       |
+| showAlertComment | boolean | false                               | false    | 评论成功之后，是否通过 Antd 的 Message 组件进行提示  |
+| showAlertReply | boolean | false                               | false    | 回复成功之后，是否通过 Antd 的 Message 组件进行提示  |
+| showAlertFavor | boolean | false                               | false    | 点赞/取消点赞成功之后，是否通过 Antd 的 Message 组件进行提示  |
 | token      | string  |                                    | false    |  [deprecate] token，用于身份认证，非必须。默认使用 cookie |
 
 
@@ -33,6 +36,7 @@ import Comment, { Editor, RenderText } from 'comment';
 | placeholder   | string          | 说点什么吧... | false    | 评论的中的提示文字                                                                                |
 | showEmoji     | boolean         | true          | false    | 是否显示 Toolbar 中表情工具                                                                       |
 | showUpload    | boolean         | true          | false    | 是否显示 Toolbar 中 上传图片工具                                                                  |
+| maxUpload    | number         |  1          | false    | 最大能够上传的图片数量                                                                  |
 | value         | string          |               | false    | 编辑器的值。如果设置了该属性，则编辑器变为受控组件，需要父组件来维护 value                        |
 | onChange      | function(value) |               | false    | 编辑器内容改变的回调函数                                                                          |
 | onSubmit      | function({ text, files }) |               | false    | 点击提交按钮的回调函数，text 为编辑器的文本，files 为上传的文件列表                           |

src/App.js

@@ -171,7 +171,9 @@ class App extends Component {
       withCredentials: true
     })
       .then(response => {
-        message.success("评论成功！");
+        if (this.props.showAlertComment) {
+          message.success("评论成功！");
+        }
         if (isFunction(cb)) cb();
         // 将数据写入到 list 中
         // 临时插入
@@ -210,7 +212,9 @@ class App extends Component {
       withCredentials: true
     })
       .then(response => {
-        message.success("回复成功！");
+        if (this.props.showAlertReply) {
+          message.success("回复成功！");
+        }
         if (isFunction(cb)) cb();
         // 将数据写入到 list 中
         // 临时插入
@@ -253,7 +257,9 @@ class App extends Component {
       withCredentials: true
     })
       .then(response => {
-        message.success(favored ? "取消点赞成功！" : "点赞成功！");
+        if (this.props.showAlertFavor) {
+          message.success(favored ? "取消点赞成功！" : "点赞成功！");
+        }
         // 更新 list 中的该项数据的 favored
         const list = this.state.list.map(item => {
           if (item.id === commentId) {
@@ -392,14 +398,20 @@ App.propTypes = {
   API: PropTypes.string, // 评论的 API 前缀
   showList: PropTypes.bool, // 是否显示评论列表
   showEditor: PropTypes.bool, // 是否显示评论输入框
-  showHeader: PropTypes.bool // 是否显示评论顶部的提示
+  showHeader: PropTypes.bool, // 是否显示评论顶部的提示
+  showAlertComment: PropTypes.bool, // 评论成功之后，是否通过 Antd 的 Message 组件进行提示
+  showAlertReply: PropTypes.bool, // 回复成功之后，是否通过 Antd 的 Message 组件进行提示
+  showAlertFavor: PropTypes.bool // 点赞/取消点赞成功之后，是否通过 Antd 的 Message 组件进行提示
 };
 
 App.defaultProps = {
   API: "http://api.links123.net/comment/v1",
   showList: true,
   showEditor: true,
-  showHeader: true
+  showHeader: true,
+  showAlertComment: false,
+  showAlertReply: false,
+  showAlertFavor: false
 };
 
 export { Editor, RenderText };

src/components/CommentInput/index.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
+import { IMAGE_SPLIT } from "../../constant";
 import Comment from "../../Comment";
 
 class CommentInput extends Component {
@@ -17,11 +18,15 @@ class CommentInput extends Component {
   handleSubmit({ text, files }, cb) {
     let value = text;
     if (files && files.length) {
-      value += "<br /><br />";
+      value += IMAGE_SPLIT;
       files.forEach(file => {
-        value += `[${file}]`;
+        value += `${file},`;
       });
     }
+    if (value.substr(-1) === ",") {
+      value = value.slice(0, -1);
+    }
+
     const { action, commentId, replyId, callback } = this.props;
     if (action === "comment") {
       this.props.app.sCreateComment(

src/components/ContentItem/index.js

@@ -8,6 +8,7 @@ import Comment from "../../Comment";
 import CommentInput from "../CommentInput";
 import avatar from "../../avatar";
 import { renderContent } from "../../helper";
+import { IMAGE_SPLIT } from "../../constant";
 import "./index.css";
 
 dayjs.locale("zh-cn");
@@ -31,9 +32,16 @@ class CommentItem extends Component {
     let newText = text;
     const { reply } = content;
     if (reply) {
-      newText = `${newText} //@<a href="/${reply.user_id}">${
-        reply.user_name
-      }</a> ${reply.content}`;
+      // newText = `${newText} //@<a href="/${reply.user_id}">${
+      //   reply.user_name
+      // }</a> ${reply.content}`;
+      newText = `${newText} //@${reply.user_name} ${reply.content}`;
+      // newText = (
+      //   <span>
+      //     {newText}
+      //     @<a href={`/${reply.user_id}`}>{reply.user_name}</a>{reply.content}
+      //   </span>
+      // )
       if (reply.reply) {
         return this.renderTextWithReply(newText, reply);
       }
@@ -54,6 +62,14 @@ class CommentItem extends Component {
 
     const { showInput } = this.state;
 
+    let newContent = content.content;
+    let images = "";
+    if (newContent.indexOf(IMAGE_SPLIT) !== -1) {
+      newContent = newContent.split(IMAGE_SPLIT);
+      images = newContent.pop();
+      newContent = newContent.join("");
+    }
+
     return (
       <div className="comment-item-box">
         <div className="comment-item-left">
@@ -80,10 +96,22 @@ class CommentItem extends Component {
             className="comment-item-content"
             dangerouslySetInnerHTML={{
               __html: renderContent(
-                this.renderTextWithReply(content.content, content)
+                this.renderTextWithReply(newContent, content)
               )
             }}
           />
+          <div className="comment-item-image">
+            {images.split(",").map((item, index) => {
+              return (
+                <img
+                  key={index}
+                  src={item}
+                  alt={item}
+                  style={{ maxWidth: "100%" }}
+                />
+              );
+            })}
+          </div>
           <div className="comment-item-bottom">
             {content.reply_count ? (
               <div>

src/components/Editor/Upload.js

@@ -6,8 +6,7 @@ import {
   OSS_ENDPOINT,
   OSS_BUCKET,
   DRIVER_LICENSE_PATH,
-  ERROR_DEFAULT,
-  MAX_UPLOAD_NUMBER
+  ERROR_DEFAULT
 } from "../../constant";
 import Comment from "../../Comment";
 import "./Upload.css";
@@ -97,7 +96,7 @@ class App extends React.Component {
 
   render() {
     const { previewVisible, previewImage } = this.state;
-    const { fileList } = this.props;
+    const { fileList, maxUpload } = this.props;
     const uploadButton = (
       <div>
         <Icon type="plus" />
@@ -114,7 +113,7 @@ class App extends React.Component {
           onPreview={this.handlePreview}
           onChange={this.handleChange}
         >
-          {fileList.length >= MAX_UPLOAD_NUMBER ? null : uploadButton}
+          {fileList.length >= maxUpload ? null : uploadButton}
         </Upload>
         <Modal
           visible={previewVisible}

src/components/Editor/index.js

@@ -2,7 +2,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Icon, Button, Popover, Input } from "antd";
 import { OSS_LINK } from "../../constant";
-import { MAX_UPLOAD_NUMBER } from "../../constant";
 import { isFunction } from "../../helper";
 import Upload from "./Upload";
 import Emoji from "./Emoji";
@@ -124,6 +123,7 @@ class Editor extends React.Component {
       rows,
       showEmoji,
       showUpload,
+      maxUpload,
       btnSubmitText,
       btnLoading,
       btnDisabled,
@@ -170,11 +170,16 @@ class Editor extends React.Component {
                 overlayStyle={{ zIndex: 999 }}
                 content={
                   <div
-                    style={{ width: 112 * MAX_UPLOAD_NUMBER, minHeight: 100 }}
+                    style={{
+                      width: 112 * maxUpload,
+                      minHeight: 100,
+                      margin: "0 auto"
+                    }}
                   >
                     <Upload
                       onChangeFileList={this.handleChangeFileList}
                       onUpload={this.handleUpload}
+                      maxUpload={maxUpload}
                       fileList={this.state.fileList}
                     />
                   </div>
@@ -184,10 +189,11 @@ class Editor extends React.Component {
                   <div style={{ margin: "5px auto" }}>
                     <span>
                       上传图片
-                      <span style={{ color: "#666", fontWeight: 400 }}>
-                        (您还能上传{MAX_UPLOAD_NUMBER -
-                          this.state.fileList.length}张图片)
-                      </span>
+                      {maxUpload >= 2 ? (
+                        <span style={{ color: "#666", fontWeight: 400 }}>
+                          (您还能上传{maxUpload - this.state.fileList.length}张图片)
+                        </span>
+                      ) : null}
                     </span>
                     <Icon
                       type="close"
@@ -244,6 +250,7 @@ Editor.propTypes = {
   placeholder: PropTypes.string,
   showEmoji: PropTypes.bool,
   showUpload: PropTypes.bool,
+  maxUpload: PropTypes.number,
   value: PropTypes.string,
   onChange: PropTypes.func,
   onSubmit: PropTypes.func,
@@ -260,6 +267,7 @@ Editor.defaultProps = {
   placeholder: "说点什么吧...",
   showEmoji: true,
   showUpload: true,
+  maxUpload: 1,
   btnSubmitText: "发表",
   btnLoading: false,
   btnDisabled: false

src/constant.js

@@ -13,3 +13,5 @@ export const MAX_UPLOAD_NUMBER = 4;
 export const REGEXP = /\[.+?\]/g;
 
 export const AVATAR = "";
+
+export const IMAGE_SPLIT = "IMAGE_SPLIT";

src/helper.js

@@ -1,6 +1,8 @@
-import { REGEXP } from "./constant";
+import { REGEXP, IMAGE_SPLIT } from "./constant";
 import emoji, { prefixUrl, ext } from "./emoji";
 
+const emojiObejct = arrayToObject(emoji, "title");
+
 export function isFunction(functionToCheck) {
   return (
     functionToCheck && {}.toString.call(functionToCheck) === "[object Function]"
@@ -33,8 +35,7 @@ export function arrayToObject(array, keyField) {
  */
 export function htmlEncode(str) {
   if (!str) return "";
-  // /[\u00A0-\u9999<>\&]/gim  // 中文和 HTML 字符
-  return str.replace(/[<>\&]/gim, function(i) {
+  return str.replace(/<\/?(?!a)\w*\b[^>]*>/gim, function(i) {
     return "&#" + i.charCodeAt(0) + ";";
   });
 }
@@ -45,13 +46,22 @@ export function htmlEncode(str) {
  * @param {strig} content
  */
 export function renderContent(content, onClick) {
-  return htmlEncode(content).replace(REGEXP, function(a, b) {
+  let newContent = content;
+  if (newContent.indexOf(IMAGE_SPLIT) !== -1) {
+    newContent = newContent.split(IMAGE_SPLIT);
+    newContent.pop();
+    newContent = newContent.join("");
+  }
+
+  return htmlEncode(newContent).replace(REGEXP, function(a, b) {
     const src = a.slice(1, -1);
+
+    // 兼容旧的评
+    // 因为旧的评论用 [img url] 方式存储的
     if (isUrl(src)) {
-      return `<img src="${src}" alt="${src}" style="max-width: 300px" />`;
+      return `<br/><img src="${src}" alt="${src}" style="max-width: 100%" />`;
     }
-    const emojiObejct = arrayToObject(emoji, "title");
-    const value = emojiObejct[src].value;
+    const value = emojiObejct[src] ? emojiObejct[src].value : src;
     return `<img src="${prefixUrl}${value}.${ext}" alt="${value}" />`;
   });
 }

src/index.js

@@ -34,7 +34,7 @@ class Index extends Component {
     // 最简单的用法
     return (
       <App type={1} businessId="test">
-        <Editor />
+        <Editor maxUpload={4} />
       </App>
     );