Browse Source

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.
pull/36/head
mutantmonkey 9 years ago
parent
commit
44172ec98a
  1. 71
      static/css/linx.css
  2. 14
      static/js/bin.js
  3. 2
      templates/404.html
  4. 2
      templates/display/audio.html
  5. 26
      templates/display/bin.html
  6. 2
      templates/display/file.html
  7. 2
      templates/display/image.html
  8. 5
      templates/display/pdf.html
  9. 8
      templates/display/video.html
  10. 2
      templates/index.html
  11. 2
      templates/oops.html
  12. 4
      templates/paste.html

71
static/css/linx.css

@ -80,6 +80,16 @@ body {
padding: 5px 5px 5px 5px; padding: 5px 5px 5px 5px;
} }
#info #filename,
#editform #filename {
width: 232px;
}
#info #extension,
#editform #extension {
width: 40px;
}
#info .float-left { #info .float-left {
margin-top: 2px; margin-top: 2px;
margin-right: 20px; margin-right: 20px;
@ -181,7 +191,7 @@ body {
} }
.clear { .clear {
clear:both;
clear: both;
} }
#upload_header { #upload_header {
@ -248,6 +258,65 @@ body {
padding-top: 1px; 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 */ /* cat.js */
.qq-uploader { position:relative; width: 100%;} .qq-uploader { position:relative; width: 100%;}

14
static/js/bin.js

@ -8,7 +8,7 @@ function init() {
editA.setAttribute("href", "#"); editA.setAttribute("href", "#");
editA.addEventListener('click', function(ev) { editA.addEventListener('click', function(ev) {
edit();
edit(ev);
return false; return false;
}); });
editA.innerHTML = "edit"; editA.innerHTML = "edit";
@ -22,14 +22,16 @@ function init() {
editor.getSession().setMode("ace/mode/" + lang); editor.getSession().setMode("ace/mode/" + lang);
editor.setTheme("ace/theme/tomorrow"); editor.setTheme("ace/theme/tomorrow");
document.getElementById('save').addEventListener('click', paste);
document.getElementById('wordwrap').addEventListener('click', wrap);
} }
function edit() {
function edit(ev) {
navlist.remove(); navlist.remove();
document.getElementById("filename").remove(); document.getElementById("filename").remove();
document.getElementById("foarm").style.display = "block";
document.getElementById("editform").style.display = "block";
var normalcontent = document.getElementById("normal-content"); var normalcontent = document.getElementById("normal-content");
normalcontent.removeChild(document.getElementById("normal-code")); 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.getElementById("newcontent").value = editor.getSession().getValue();
document.forms["reply"].submit(); document.forms["reply"].submit();
} }
function wrap() {
function wrap(ev) {
if (document.getElementById("wordwrap").checked) { if (document.getElementById("wordwrap").checked) {
document.getElementById("codeb").style.wordWrap = "break-word"; document.getElementById("codeb").style.wordWrap = "break-word";
document.getElementById("codeb").style.whiteSpace = "pre-wrap"; document.getElementById("codeb").style.whiteSpace = "pre-wrap";

2
templates/404.html

@ -1,5 +1,5 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% 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 %} {% endblock %}

2
templates/display/audio.html

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

26
templates/display/bin.html

@ -2,17 +2,17 @@
{% block head %} {% block head %}
{% if extra.extension == "story" %} {% 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 %} {% 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 %} {% endif %}
{% endblock %} {% 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 %} {% block infoleft %}
<div id="foarm" style="display: none;">
<div id="editform">
<form id="reply" action='/upload' method='post' > <form id="reply" action='/upload' method='post' >
<div class="right"> <div class="right">
<select id="expiry" name="expires"> <select id="expiry" name="expires">
@ -27,27 +27,25 @@
<option value="29030400">a year</option> <option value="29030400">a year</option>
</select> </select>
<button id="save" onclick="paste()">save</button>
<button id="save">save</button>
</div> </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> </div>
</form>
{% endblock %} {% endblock %}
{%block infomore %} {%block infomore %}
<label>wrap <input id="wordwrap" type="checkbox" onclick="wrap()" checked /></label> |
<label>wrap <input id="wordwrap" type="checkbox" checked></label> |
{% endblock %} {% endblock %}
{% block main %} {% block main %}
<div id="normal-content" class="normal {% if extra.lang_hl != "story" %}fixed{% endif %}"> <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> </div>

2
templates/display/file.html

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

2
templates/display/image.html

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

5
templates/display/pdf.html

@ -1,10 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block main %} {% 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. <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> No worries, just <a href="/selif/{{ filename }}">click here to download the PDF file.</a></p>

8
templates/display/video.html

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

2
templates/index.html

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

2
templates/oops.html

@ -2,7 +2,7 @@
{% block content %} {% block content %}
<div id="main"> <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> <p>{{ error_message|default:"Oops! Something went wrong." }}</p>
</div> </div>
</div> </div>

4
templates/paste.html

@ -4,7 +4,7 @@
<form id="reply" action='/upload' method='post'> <form id="reply" action='/upload' method='post'>
<div id="main"> <div id="main">
<div id="info" class="ninfo"> <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"> <div class="right">
<select id="expiry" name="expires"> <select id="expiry" name="expires">
@ -27,7 +27,7 @@
</div> </div>
<div id="inner_content"> <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>
</div> </div>

Loading…
Cancel
Save