improve xss protection

README.md

@@ -131,6 +131,8 @@ $ npm run build
 
 - [ ] icon 动画
 
+- [ ] bug: 弹幕发送框隐藏再输入页面出错; 输入空格; 全屏弹幕过快
+
 ## LICENSE
 
 MIT © [DIYgod](http://github.com/DIYgod)

nodejs/index.js

@@ -24,6 +24,15 @@ var logger = log4js.getLogger('DPlayer');
 logger.setLevel('INFO');
 logger.info(`🍻 DPlayer start! Cheers!`);
 
+function htmlEncode(str) {
+    return str.replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#x27;")
+        .replace(/\//g, "&#x2f;");
+}
+
 var postIP = [];
 
 var mongodbUrl;
@@ -185,12 +194,12 @@ app.post('/', function (req, res) {
             cleandbListener();
 
             var dan = new danmaku({
-                player: jsonStr.player,
-                author: jsonStr.author,
+                player: htmlEncode(jsonStr.player),
+                author: htmlEncode(jsonStr.author),
                 time: jsonStr.time,
-                text: jsonStr.text,
-                color: jsonStr.color,
-                type: jsonStr.type
+                text: htmlEncode(jsonStr.text),
+                color: htmlEncode(jsonStr.color),
+                type: htmlEncode(jsonStr.type)
             });
             dan.save(function (err, d) {
                 if (err) {

src/DPlayer.js

@@ -800,10 +800,9 @@
                 danHeight = danContainer.offsetHeight;
                 itemY = danHeight / itemHeight;
                 let item = document.createElement(`div`);
-                let content = document.createTextNode(text);
                 item.classList.add(`dplayer-danmaku-item`);
                 item.classList.add(`dplayer-danmaku-${type}`);
-                item.appendChild(content);
+                item.innerHTML = text;
                 item.style.opacity = this.danOpacity;
 
                 // insert
@@ -886,6 +885,15 @@
             const commentSettingBox = this.element.getElementsByClassName('dplayer-comment-setting-box')[0];
             const commentSendIcon = this.element.getElementsByClassName('dplayer-send-icon')[0];
 
+            const htmlEncode = (str) => {
+                return str.replace(/&/g, "&")
+                    .replace(/</g, "&lt;")
+                    .replace(/>/g, "&gt;")
+                    .replace(/"/g, "&quot;")
+                    .replace(/'/g, "&#x27;")
+                    .replace(/\//g, "&#x2f;");
+            };
+
             const sendComment = () => {
                 // text can't be empty
                 if (!commentInput.value.replace(/^\s+|\s+$/g, '')) {
@@ -920,7 +928,7 @@
                 closeComment();
                 this.dan.splice(this.danIndex, 0, danmakuData);
                 this.danIndex++;
-                this.danmakuIn(danmakuData.text, danmakuData.color, danmakuData.type);
+                this.danmakuIn(htmlEncode(danmakuData.text), danmakuData.color, danmakuData.type);
             };
 
             const closeCommentSetting = () => {