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.
This commit is contained in:
mutantmonkey 2015-10-04 14:13:29 -07:00
parent 84f38026eb
commit 44172ec98a
12 changed files with 110 additions and 48 deletions

View File

@ -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); }
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); }

View File

@ -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";

View File

@ -1,5 +1,5 @@
{% extends "base.html" %}
{% block content %}
<a href="/"><img style="border:0;" src='/static/images/404.jpg' width='400'></a>
<a href="/"><img src='/static/images/404.jpg'></a>
{% endblock %}

View File

@ -1,9 +1,9 @@
{% extends "base.html" %}
{% block main %}
<audio controls style='width: 500px;' preload='auto'>
<source src='/selif/{{ filename }}'>
<a href='/selif/{{ filename }}'>Download it instead</a>
<audio class="display-audio" controls preload='auto'>
<source src='/selif/{{ filename }}'>
<a href='/selif/{{ filename }}'>Download it instead</a>
</audio>
{% endblock %}

View File

@ -2,20 +2,20 @@
{% block head %}
{% if extra.extension == "story" %}
<link href="/static/css/highlight/story.css" rel="stylesheet" type="text/css" />
<link href="/static/css/highlight/story.css" rel="stylesheet" type="text/css">
{% else %}
<link href="/static/css/highlight/tomorrow.css" rel="stylesheet" type="text/css" />
<link href="/static/css/highlight/tomorrow.css" rel="stylesheet" type="text/css">
{% endif %}
{% endblock %}
{% block innercontentmore %} style="overflow: auto;" {% endblock %}
{% block mainmore %} {% if extra.extension == "story" %} style="background-color: #f0e0d6;"{% endif %} {% endblock %}
{% block innercontentmore %} class="scrollable"{% endblock %}
{% block mainmore %} {% if extra.extension == "story" %} class="storycontent"{% endif %} {% endblock %}
{% block infoleft %}
<div id="foarm" style="display: none;">
<div id="editform">
<form id="reply" action='/upload' method='post' >
<div class="right">
<select id="expiry" name="expires">
<select id="expiry" name="expires">
<option disabled=disabled>Expires:</option>
<option value="0">never</option>
<option value="60">a minute</option>
@ -25,29 +25,27 @@
<option value="604800">a week</option>
<option value="2419200">a month</option>
<option value="29030400">a year</option>
</select>
</select>
<button id="save" onclick="paste()">save</button>
</div>
<button id="save">save</button>
</div>
<input style ="width:232px;" class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename (empty for random filename)" />.<input id="extension" class="codebox" style="width:30px;" name='extension' type='text' value="{{ extra.extension }}" placeholder="txt" />
<input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename (empty for random filename)">.<input id="extension" class="codebox" name='extension' type='text' value="{{ extra.extension }}" placeholder="txt">
<textarea name='content' id="newcontent" class="editor" style="display: none;"></textarea>
<textarea name='content' id="newcontent" class="editor"></textarea>
</form>
</div>
</form>
{% endblock %}
{%block infomore %}
<label>wrap <input id="wordwrap" type="checkbox" onclick="wrap()" checked /></label> |
<label>wrap <input id="wordwrap" type="checkbox" checked></label> |
{% endblock %}
{% block main %}
<div id="normal-content" class="normal {% if extra.lang_hl != "story" %}fixed{% endif %}">
<pre id="normal-code"><code id="codeb" style="white-space: pre-wrap;" class="{{ extra.lang_hl }}">{{ extra.contents }}</code></pre>
<div id="editor" style="display: none; height: 800px; font-size: 11px;" data-lang="{{ extra.lang_ace }}">{{ extra.contents }}</div>
<pre id="normal-code"><code id="codeb" class="{{ extra.lang_hl }}">{{ extra.contents }}</code></pre>
<div id="editor" data-lang="{{ extra.lang_ace }}">{{ extra.contents }}</div>
</div>

View File

@ -1,7 +1,7 @@
{% extends "base.html" %}
{% block main %}
<div class="normal" style="width: 500px;">
<p class="center">You are requesting <a href="/selif/{{ filename }}">{{ filename }}</a>, <a href="/selif/{{ filename }}">click here</a> to download.</p>
<div class="normal display-file">
<p class="center">You are requesting <a href="/selif/{{ filename }}">{{ filename }}</a>, <a href="/selif/{{ filename }}">click here</a> to download.</p>
</div>
{% endblock %}

View File

@ -2,6 +2,6 @@
{% block main %}
<a href="/selif/{{ filename }}">
<img style="margin-bottom: -6px; max-width: 800px;" src="/selif/{{ filename }}" />
<img class="display-image" src="/selif/{{ filename }}" />
</a>
{% endblock %}

View File

@ -1,10 +1,7 @@
{% extends "base.html" %}
{% block main %}
<object data="/selif/{{ filename }}"
type="application/pdf"
width=910
height=800>
<object class="display-pdf" data="/selif/{{ filename }}" type="application/pdf">
<p>It appears your Web browser is not configured to display PDF files.
No worries, just <a href="/selif/{{ filename }}">click here to download the PDF file.</a></p>

View File

@ -1,10 +1,8 @@
{% extends "base.html" %}
{% block main %}
<div id='video'>
<video controls autoplay width="800">
<source src="/selif/{{ filename }}"/>
</video>
</div>
<video class="display-video" controls autoplay>
<source src="/selif/{{ filename }}"/>
<a href='/selif/{{ filename }}'>Download it instead</a>
</video>
{% endblock %}

View File

@ -36,7 +36,7 @@
<div class="clear"></div>
</form>
<div id="uploads"></div>
<div style="clear:both;"></div>
<div class="clear"></div>
</div>
<script src="/static/js/dropzone.js"></script>

View File

@ -2,7 +2,7 @@
{% block content %}
<div id="main">
<div id='inner_content' style='width: 400px'>
<div id='inner_content' class='oopscontent'>
<p>{{ error_message|default:"Oops! Something went wrong." }}</p>
</div>
</div>

View File

@ -4,7 +4,7 @@
<form id="reply" action='/upload' method='post'>
<div id="main">
<div id="info" class="ninfo">
<input style ="width:232px;" class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename (empty for random filename)" />.<span class="hint--top hint--bounce" data-hint="Enable syntax highlighting by adding the extension"><input id="extension" class="codebox" style="width:40px;" name='extension' type='text' value="" placeholder="txt" /></span>
<input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename (empty for random filename)" />.<span class="hint--top hint--bounce" data-hint="Enable syntax highlighting by adding the extension"><input id="extension" class="codebox" name='extension' type='text' value="" placeholder="txt" /></span>
<div class="right">
<select id="expiry" name="expires">
@ -27,7 +27,7 @@
</div>
<div id="inner_content">
<textarea name='content' id="content" class="editor" style="width: 705px; height: 450px; border-color: #cccccc;"></textarea>
<textarea name='content' id="content" class="editor"></textarea>
</div>
</div>
@ -37,4 +37,4 @@
</form>
{% endblock %}
{% endblock %}