From b83f11e80a9866eeb49588a918938f4570a26a9f Mon Sep 17 00:00:00 2001 From: mutantmonkey Date: Sat, 3 Oct 2015 23:58:56 -0700 Subject: [PATCH 1/9] remove inline js on pastebin pages --- static/js/bin.js | 7 ++++++- static/js/bin_hljs.js | 2 ++ templates/display/bin.html | 17 ++++------------- 3 files changed, 12 insertions(+), 14 deletions(-) mode change 100755 => 100644 static/js/bin.js create mode 100644 static/js/bin_hljs.js diff --git a/static/js/bin.js b/static/js/bin.js old mode 100755 new mode 100644 index 4d26afc..b610083 --- a/static/js/bin.js +++ b/static/js/bin.js @@ -14,6 +14,11 @@ function init() { navlist.insertBefore(editA, navlist.firstChild); navlist.insertBefore(separator, navlist.children[1]); + var lang = document.getElementById('editor').getAttribute('data-lang'); + var editor = ace.edit("editor"); + editor.getSession().setMode("ace/mode/" + lang); + editor.setTheme("ace/theme/tomorrow"); + } @@ -25,7 +30,7 @@ function edit() { var normalcontent = document.getElementById("normal-content"); normalcontent.removeChild(document.getElementById("normal-code")); - + var editordiv = document.getElementById("editor"); editordiv.style.display = "block"; diff --git a/static/js/bin_hljs.js b/static/js/bin_hljs.js new file mode 100644 index 0000000..ff8ef6e --- /dev/null +++ b/static/js/bin_hljs.js @@ -0,0 +1,2 @@ +hljs.tabReplace = ' '; +hljs.initHighlightingOnLoad(); diff --git a/templates/display/bin.html b/templates/display/bin.html index 433cbb2..9c77584 100644 --- a/templates/display/bin.html +++ b/templates/display/bin.html @@ -46,25 +46,16 @@ {% block main %}
- 
{{ extra.contents }}
- + 
{{ extra.contents }}
+
{% if extra.lang_hl != "text" %} - + {% endif %} - - - + {% endblock %} From 84f38026eb8fd1cad99a76b4ee88ff149c4dc379 Mon Sep 17 00:00:00 2001 From: mutantmonkey Date: Sun, 4 Oct 2015 00:14:21 -0700 Subject: [PATCH 2/9] do some more HTML and JS cleanup --- static/js/bin.js | 5 ++- static/js/upload.js | 89 ++++++++++++++++++++++++++------------------ templates/index.html | 4 +- 3 files changed, 58 insertions(+), 40 deletions(-) diff --git a/static/js/bin.js b/static/js/bin.js index b610083..4e86edf 100644 --- a/static/js/bin.js +++ b/static/js/bin.js @@ -7,7 +7,10 @@ function init() { var editA = document.createElement('a'); editA.setAttribute("href", "#"); - editA.setAttribute("onclick", "edit();return false;"); + editA.addEventListener('click', function(ev) { + edit(); + return false; + }); editA.innerHTML = "edit"; var separator = document.createTextNode(" | "); diff --git a/static/js/upload.js b/static/js/upload.js index 44afffc..cba6324 100644 --- a/static/js/upload.js +++ b/static/js/upload.js @@ -5,33 +5,36 @@ Dropzone.options.dropzone = { var upload = document.createElement("div"); upload.className = "upload"; - var left = document.createElement("span"); - left.innerHTML = file.name; - file.leftElement = left; - upload.appendChild(left); + var fileLabel = document.createElement("span"); + fileLabel.innerHTML = file.name; + file.fileLabel = fileLabel; + upload.appendChild(fileLabel); - var right = document.createElement("div"); - right.className = "right"; - var rightleft = document.createElement("span"); - rightleft.className = "cancel"; - rightleft.innerHTML = "Cancel"; - rightleft.onclick = function(ev) { - this.removeFile(file); - }.bind(this); + var fileActions = document.createElement("div"); + fileActions.className = "right"; + file.fileActions = fileActions; + upload.appendChild(fileActions); + + var cancelAction = document.createElement("span"); + cancelAction.className = "cancel"; + cancelAction.innerHTML = "Cancel"; + cancelAction.addEventListener('click', function(ev) { + this.removeFile(file); + }.bind(this)); + file.cancelActionElement = cancelAction; + fileActions.appendChild(cancelAction); + + var progress = document.createElement("span"); + file.progressElement = progress; + fileActions.appendChild(progress); - var rightright = document.createElement("span"); - right.appendChild(rightleft); - file.rightLeftElement = rightleft; - right.appendChild(rightright); - file.rightRightElement = rightright; - file.rightElement = right; - upload.appendChild(right); file.uploadElement = upload; + document.getElementById("uploads").appendChild(upload); }, uploadprogress: function(file, p, bytesSent) { p = parseInt(p); - file.rightRightElement.innerHTML = p + "%"; + file.progressElement.innerHTML = p + "%"; file.uploadElement.setAttribute("style", 'background-image: -webkit-linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%); background-image: -moz-linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%); background-image: -ms-linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%); background-image: -o-linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%); background-image: linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%)'); }, sending: function(file, xhr, formData) { @@ -39,36 +42,48 @@ Dropzone.options.dropzone = { formData.append("expires", document.getElementById("expires").selectedOptions[0].value); }, success: function(file, resp) { - file.rightLeftElement.innerHTML = ""; - file.leftElement.innerHTML = '' + resp.url + ''; - file.rightRightElement.innerHTML = "Delete"; - file.rightRightElement.className = "cancel"; - file.rightRightElement.onclick = function(ev) { + file.fileActions.removeChild(file.progressElement); + + var fileLabelLink = document.createElement("a"); + fileLabelLink.href = resp.url; + fileLabelLink.target = "_blank"; + fileLabelLink.innerHTML = resp.url; + file.fileLabel.innerHTML = ""; + file.fileLabelLink = fileLabelLink; + file.fileLabel.appendChild(fileLabelLink); + + var deleteAction = document.createElement("span"); + deleteAction.innerHTML = "Delete"; + deleteAction.className = "cancel"; + deleteAction.addEventListener('click', function(ev) { xhr = new XMLHttpRequest(); xhr.open("DELETE", resp.url, true); xhr.setRequestHeader("X-Delete-Key", resp.delete_key); xhr.onreadystatechange = function(file) { - if (xhr.status === 200) { - file.leftElement.innerHTML = 'Deleted ' + resp.url + ''; - file.leftElement.className = "deleted"; - file.rightRightElement.onclick = null; - file.rightRightElement.innerHTML = ""; + if (xhr.readyState == 4 && xhr.status === 200) { + var text = document.createTextNode("Deleted "); + file.fileLabel.insertBefore(text, file.fileLabelLink); + file.fileLabel.className = "deleted"; + file.fileActions.removeChild(file.cancelActionElement); } }.bind(this, file); xhr.send(); - }.bind(this); + }); + file.fileActions.removeChild(file.cancelActionElement); + file.cancelActionElement = deleteAction; + file.fileActions.appendChild(deleteAction); }, error: function(file, errMsg, xhrO) { - file.rightLeftElement.onclick = null; - file.rightLeftElement.innerHTML = ""; - file.rightRightElement.innerHTML = ""; + file.fileActions.removeChild(file.cancelActionElement); + file.fileActions.removeChild(file.progressElement); + if (file.status === "canceled") { - file.leftElement.innerHTML = "Canceled " + file.name; + file.fileLabel.innerHTML = "Canceled " + file.name; } else { - file.leftElement.innerHTML = "Could not upload " + file.name; + file.fileLabel.innerHTML = "Could not upload " + file.name; } - file.leftElement.className = "error"; + file.fileLabel.className = "error"; }, maxFilesize: 4096, diff --git a/templates/index.html b/templates/index.html index 8195f6e..36bbc99 100644 --- a/templates/index.html +++ b/templates/index.html @@ -20,7 +20,6 @@
@@ -41,4 +41,4 @@ -{% endblock %} \ No newline at end of file +{% endblock %} From 44172ec98a8033803f578288ddd03702504980a0 Mon Sep 17 00:00:00 2001 From: mutantmonkey Date: Sun, 4 Oct 2015 14:13:29 -0700 Subject: [PATCH 3/9] clean up HTML, CSS, and JavaScript for CSP In order to implement Content-Security-Policy, the inlined style, event handlers, and scripts all have to go. This commit completes this work. --- static/css/linx.css | 73 +++++++++++++++++++++++++++++++++++- static/js/bin.js | 14 +++---- templates/404.html | 2 +- templates/display/audio.html | 6 +-- templates/display/bin.html | 32 ++++++++-------- templates/display/file.html | 4 +- templates/display/image.html | 2 +- templates/display/pdf.html | 5 +-- templates/display/video.html | 10 ++--- templates/index.html | 2 +- templates/oops.html | 2 +- templates/paste.html | 6 +-- 12 files changed, 110 insertions(+), 48 deletions(-) diff --git a/static/css/linx.css b/static/css/linx.css index cf83032..e365826 100644 --- a/static/css/linx.css +++ b/static/css/linx.css @@ -80,6 +80,16 @@ body { padding: 5px 5px 5px 5px; } +#info #filename, +#editform #filename { + width: 232px; +} + +#info #extension, +#editform #extension { + width: 40px; +} + #info .float-left { margin-top: 2px; margin-right: 20px; @@ -181,7 +191,7 @@ body { } .clear { - clear:both; + clear: both; } #upload_header { @@ -248,6 +258,65 @@ body { padding-top: 1px; } +.oopscontent { + width: 400px; +} + +.oopscontent img { + width: 400px; + border: 0; +} + +.editor { + width: 705px; + height: 450px; + border-color: #cccccc; +} + +/* Content display {{{ */ +.display-audio, +.display-file { + width: 500px; +} + +.display-image { + margin-bottom: -6px; + max-width: 800px; +} + +.display-pdf { + width: 910px; + height: 800px; +} + +.display-video { + width: 800px; +} + +.scrollable { + overflow: auto; +} + +.storycontent { + background-color: #f0e0d6; +} + +#editform, +#editform .editor { + display: none; +} + +#codeb { + white-space: pre-wrap; +} + +#editor { + display: none; + height: 800px; + font-size: 11px; +} +/* }}} */ + /* cat.js */ .qq-uploader { position:relative; width: 100%;} @@ -694,4 +763,4 @@ THE SOFTWARE. .hint--bounce:before, .hint--bounce:after { -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); -moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); - transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); } \ No newline at end of file + transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); } diff --git a/static/js/bin.js b/static/js/bin.js index 4e86edf..0fd6990 100644 --- a/static/js/bin.js +++ b/static/js/bin.js @@ -8,7 +8,7 @@ function init() { editA.setAttribute("href", "#"); editA.addEventListener('click', function(ev) { - edit(); + edit(ev); return false; }); editA.innerHTML = "edit"; @@ -22,14 +22,16 @@ function init() { editor.getSession().setMode("ace/mode/" + lang); editor.setTheme("ace/theme/tomorrow"); + document.getElementById('save').addEventListener('click', paste); + document.getElementById('wordwrap').addEventListener('click', wrap); } -function edit() { +function edit(ev) { navlist.remove(); document.getElementById("filename").remove(); - document.getElementById("foarm").style.display = "block"; + document.getElementById("editform").style.display = "block"; var normalcontent = document.getElementById("normal-content"); normalcontent.removeChild(document.getElementById("normal-code")); @@ -44,14 +46,12 @@ function edit() { } -function paste() { - +function paste(ev) { document.getElementById("newcontent").value = editor.getSession().getValue(); document.forms["reply"].submit(); - } -function wrap() { +function wrap(ev) { if (document.getElementById("wordwrap").checked) { document.getElementById("codeb").style.wordWrap = "break-word"; document.getElementById("codeb").style.whiteSpace = "pre-wrap"; diff --git a/templates/404.html b/templates/404.html index 0999393..e792bf3 100644 --- a/templates/404.html +++ b/templates/404.html @@ -1,5 +1,5 @@ {% extends "base.html" %} {% block content %} - + {% endblock %} diff --git a/templates/display/audio.html b/templates/display/audio.html index 66b36fa..a88319f 100644 --- a/templates/display/audio.html +++ b/templates/display/audio.html @@ -1,9 +1,9 @@ {% extends "base.html" %} {% block main %} -