CIRCL
/
lookyloo
mirror of https://github.com/CIRCL/lookyloo
2
0
Fork 0
Code Issues Releases Wiki Activity

Fix: Template Literals, correct descendent selector, unify tab size, SRI

pull/914/head
AntoniaBK 2024-05-15 12:27:05 +02:00
parent 4fd73f933d
commit 6a10af6aa4
3 changed files with 95 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
website/web/sri.txt
View File

@ -1,7 +1,7 @@
{ {
"static": { "static": {
"bomb.svg": "Tro3+kCLzfBNBve2gPnsmXsl+tHUQVrFz77zfrWwnAuTraehZaoAfVJgGOYdG8zceXdGLEKzXVi3GdtEXw0sYQ==", "bomb.svg": "Tro3+kCLzfBNBve2gPnsmXsl+tHUQVrFz77zfrWwnAuTraehZaoAfVJgGOYdG8zceXdGLEKzXVi3GdtEXw0sYQ==",
"capture.js": "Y6vfKnC2rQFeFSEARNb1BgMEFCTTfEr35Xs0Hy0Gnmn5JiXrSDtWxFogq8xPUpZu0AhRJRk/N/dRCGJdhvFDMA==", "capture.js": "Aw5XUbtz3hOs/27CRnYBJ/VRkJJvcVOAwLPD/xRnPzkdHcxn0eHTmOzN/agGk671W8BSp5mLzAJijGLKwf98Qw==",
"check.svg": "CRqUAM/yXxgJwpfg3TeoKD+CIqQj62lxqS3zeCmdPaV3dKftk4jk5Mqc1TGxL7i61X1sgV0/f+KJLEOKTw01ww==", "check.svg": "CRqUAM/yXxgJwpfg3TeoKD+CIqQj62lxqS3zeCmdPaV3dKftk4jk5Mqc1TGxL7i61X1sgV0/f+KJLEOKTw01ww==",
"cookie_in_url.png": "hs/oNPnrR2DkDX9Yp6Daug/QqpWJHemJE6lXpxNafjgOYooezp3DpbqKqADT7QcfcTxxUfe1iPDZJlHOrNMAcw==", "cookie_in_url.png": "hs/oNPnrR2DkDX9Yp6Daug/QqpWJHemJE6lXpxNafjgOYooezp3DpbqKqADT7QcfcTxxUfe1iPDZJlHOrNMAcw==",
"cookie_read.png": "mdXCeuNFPvshSwIXAJLoR1xFjXb+K2Mgu47Q1fnUAO8j1N2c/uJuE8sGuBHHbS8HOyr/CbOC6Uf3zsm9KvAs8Q==", "cookie_read.png": "mdXCeuNFPvshSwIXAJLoR1xFjXb+K2Mgu47Q1fnUAO8j1N2c/uJuE8sGuBHHbS8HOyr/CbOC6Uf3zsm9KvAs8Q==",

47
website/web/static/capture.js
View File

@ -46,7 +46,7 @@ document.getElementById('multipleCaptures').addEventListener('click', function (
document.getElementById("os").addEventListener("change", function () { document.getElementById("os").addEventListener("change", function () {
let osSelect = document.getElementById("os"); let osSelect = document.getElementById("os");
let os_name = osSelect.options[osSelect.selectedIndex].value.replace(/(:|\.|\[|\]|,|=|\\)/g, "\\$1").replace(/ /g, "_"); let os_name = osSelect.options[osSelect.selectedIndex].value.replace(/(:|\.|\[|\]|,|=|\\)/g, "\\$1").replace(/ /g, "_");
let first_browser_name = document.querySelector("[id='" + os_name + "'] select option:first-child").value.replace(/(:|\.|\[|\]|,|=|\\)/g, "\\$1").replace(/ /g, "_"); let first_browser_name = document.querySelector(`[id='${os_name}'] select option:first-child`).value.replace(/(:|\.|\[|\]|,|=|\\)/g, "\\$1").replace(/ /g, "_");
// Hide and disable everything // Hide and disable everything
document.querySelectorAll("#os option").forEach(function (option) { document.querySelectorAll("#os option").forEach(function (option) {
@ -55,7 +55,7 @@ document.getElementById("os").addEventListener("change", function () {
document.querySelectorAll(".style-sub-1").forEach(function (element) { document.querySelectorAll(".style-sub-1").forEach(function (element) {
element.style.display = 'none'; element.style.display = 'none';
}); });
document.querySelectorAll(".style-sub-1 > div > select").forEach(function (select) { document.querySelectorAll(".style-sub-1 > label > span > select").forEach(function (select) {
select.disabled = true; select.disabled = true;
select.querySelectorAll('option').forEach(function (option) { select.querySelectorAll('option').forEach(function (option) {
option.removeAttribute('selected'); option.removeAttribute('selected');
@ -64,7 +64,7 @@ document.getElementById("os").addEventListener("change", function () {
document.querySelectorAll(".style-sub-2").forEach(function (element) { document.querySelectorAll(".style-sub-2").forEach(function (element) {
element.style.display = 'none'; element.style.display = 'none';
}); });
document.querySelectorAll(".style-sub-2 > div > select").forEach(function (select) { document.querySelectorAll(".style-sub-2 > label > span > select").forEach(function (select) {
select.disabled = true; select.disabled = true;
select.querySelectorAll('option').forEach(function (option) { select.querySelectorAll('option').forEach(function (option) {
option.removeAttribute('selected'); option.removeAttribute('selected');
@ -72,13 +72,13 @@ document.getElementById("os").addEventListener("change", function () {
}); });
// Re-enable and show what makes sense // Re-enable and show what makes sense
document.querySelector("[id='" + os_name + "']").style.display = 'flex'; document.querySelector(`[id='${os_name}']`).style.display = 'block';
document.querySelectorAll("[id='" + os_name + "'] > div > select").forEach(function (select) { document.querySelectorAll(`[id='${os_name}'] > label > span > select`).forEach(function (select) {
select.disabled = false; select.disabled = false;
select.querySelector('option:first-child').selected = true; select.querySelector('option:first-child').selected = true;
}); });
document.querySelector("[id='" + os_name + '_' + first_browser_name + "']").style.display = 'flex'; document.querySelector(`[id='${os_name}_${first_browser_name}']`).style.display = 'block';
document.querySelectorAll("[id='" + os_name + '_' + first_browser_name + "'] > div > select").forEach(function (select) { document.querySelectorAll(`[id='${os_name}_${first_browser_name}'] > label > span > select`).forEach(function (select) {
select.disabled = false; select.disabled = false;
select.querySelector('option:first-child').selected = true; select.querySelector('option:first-child').selected = true;
}); });
@ -91,24 +91,27 @@ document.querySelectorAll('select[name="browser"]').forEach( function(element)
let osSelect = document.getElementById("os"); let osSelect = document.getElementById("os");
let os_name = osSelect.options[osSelect.selectedIndex].value.replace(/(:|\.|\[|\]|,|=|\\)/g, "\\$1").replace(/ /g, "_"); let os_name = osSelect.options[osSelect.selectedIndex].value.replace(/(:|\.|\[|\]|,|=|\\)/g, "\\$1").replace(/ /g, "_");
// Hide and disable every useragent // unselect every browser select here (unknown reason)
document.querySelectorAll(".style-sub-1 > div > select").forEach(function (select) { document.querySelectorAll(".style-sub-1 > label > span > select").forEach(function (select) {
select.querySelectorAll('option').forEach(function (option) { select.querySelectorAll('option').forEach(function (option) {
option.removeAttribute('selected'); option.removeAttribute('selected');
}); });
}); });
// Hide and disable every useragent
document.querySelectorAll(".style-sub-2").forEach(function (element) { document.querySelectorAll(".style-sub-2").forEach(function (element) {
element.style.display = 'none'; element.style.display = 'none';
}); });
document.querySelectorAll(".style-sub-2 > div > select").forEach(function (select) { document.querySelectorAll(".style-sub-2 > label > span > select").forEach(function (select) {
select.disabled = true; select.disabled = true;
select.querySelectorAll('option').forEach(function (option) { select.querySelectorAll('option').forEach(function (option) {
option.removeAttribute('selected'); option.removeAttribute('selected');
}); });
}); });
// Show only the correct user-agent // Show only the correct user-agent
document.querySelector("[id='" + os_name + '_' + browser_name + "']").style.display = 'flex'; document.querySelector(`[id='${os_name}_${browser_name}']`).style.display = 'block';
document.querySelectorAll("[id='" + os_name + '_' + browser_name + "'] > div > select").forEach(function (select) { document.querySelectorAll(`[id='${os_name}_${browser_name}'] > label > span > select`).forEach(function (select) {
select.disabled = false; select.disabled = false;
select.querySelector('option:first-child').selected = true; select.querySelector('option:first-child').selected = true;
}); });
@ -183,14 +186,16 @@ document.getElementById('os-type').addEventListener('change', function () {
}); });
// admin-only report-form // admin-only report-form
const displayReportForm = function() { let report_form = document.getElementById("auto-report");
let show_form = document.getElementById("auto-report").checked; if (report_form) { // admin is logged in
if(show_form) { report_form.addEventListener('change', function() {
document.getElementById("collapseMailConfiguration").style.display = "block"; let show_form = document.getElementById("auto-report").checked;
} else { if(show_form) {
document.getElementById("collapseMailConfiguration").style.display = "none"; document.getElementById("collapseMailConfiguration").style.display = "block";
} } else {
document.getElementById("collapseMailConfiguration").style.display = "none";
}
});
} }
displayReportForm()
document.getElementById("auto-report").addEventListener('change', displayReportForm);

136
website/web/templates/capture.html
View File

@ -83,10 +83,10 @@
<div> <div>
<button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConfigBrowser" <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConfigBrowser"
aria-expanded="false" aria-controls="collapseConfigBrowser"> aria-expanded="false" aria-controls="collapseConfigBrowser">
<p style="margin-left: -12px; margin-top: 12px; font-size: x-large; color: black; text-decoration: underline; text-decoration-color: blue;"> <p style="margin-left: -12px; margin-top: 12px; font-size: x-large; color: black; text-decoration: underline; text-decoration-color: blue;">
<b>Browser Configuration</b> <b>Browser Configuration</b>
</p> </p>
</button> </button>
<div class="help-tip" title="Lookyloo uses an emulated browser for all captures, click to configure the User-Agent"></div> <div class="help-tip" title="Lookyloo uses an emulated browser for all captures, click to configure the User-Agent"></div>
</div> </div>
@ -145,33 +145,33 @@
{% for os, browsers in user_agents.items() %} {% for os, browsers in user_agents.items() %}
<!-- Hide the browsers that aren't part of the default os --> <!-- Hide the browsers that aren't part of the default os -->
<div id="{{os.replace(' ', '_')}}" class="style-sub-1" {% if not os==default['os'] %}style="display: none;"{%endif%}> <div id="{{os.replace(' ', '_')}}" class="style-sub-1" {% if not os==default['os'] %}style="display: none;"{%endif%}>
<label class="row mb-3"> <label class="row mb-3">
<span class="col-sm-2 col-form-label">Browser Type:</span> <span class="col-sm-2 col-form-label">Browser Type:</span>
<span class="col-sm-10"> <span class="col-sm-10">
<!-- Disable all the selects not related to the default os --> <!-- Disable all the selects not related to the default os -->
<select class="form-select" name="browser" {% if not os==default['os'] %}disabled{%endif%}> <select class="form-select" name="browser" {% if not os==default['os'] %}disabled{%endif%}>
{% for browser in browsers.keys()|sort(reverse=True) %} {% for browser in browsers.keys()|sort(reverse=True) %}
<!-- Select the default browser --> <!-- Select the default browser -->
<option value="{{ browser }}" {% if browser==default['browser'] %}selected{% endif %}>{{ browser }}</option> <option value="{{ browser }}" {% if browser==default['browser'] %}selected{% endif %}>{{ browser }}</option>
{% endfor%} {% endfor%}
</select> </select>
</span> </span>
</label> </label>
</div> </div>
{% for browser, user_agents in browsers.items() %} {% for browser, user_agents in browsers.items() %}
<!-- Hide the user agents that aren't part of the default OS and browsers that aren't part of the default os --> <!-- Hide the user agents that aren't part of the default OS and browsers that aren't part of the default os -->
<div id="{{os.replace(' ', '_')}}_{{browser.replace(' ', '_')}}" class="style-sub-2" {% if not os==default['os'] or not browser==default['browser']%} style="display: none;"{%endif%}> <div id="{{os.replace(' ', '_')}}_{{browser.replace(' ', '_')}}" class="style-sub-2" {% if not os==default['os'] or not browser==default['browser']%} style="display: none;"{%endif%}>
<label class="row mb-3"> <label class="row mb-3">
<span class="col-sm-2 col-form-label">User-Agent:</span> <span class="col-sm-2 col-form-label">User-Agent:</span>
<span class="col-sm-10"> <span class="col-sm-10">
<!-- Disable all the selects, unless it is in default os and browser --> <!-- Disable all the selects, unless it is in default os and browser -->
<select class="form-select" name="user_agent" {% if not os==default['os'] or not browser==default['browser'] %}disabled{%endif%}> <select class="form-select" name="user_agent" {% if not os==default['os'] or not browser==default['browser'] %}disabled{%endif%}>
{% for user_agent in user_agents %} {% for user_agent in user_agents %}
<!-- Select the default ua --> <!-- Select the default ua -->
<option value="{{ user_agent }}" {% if user_agent==default['useragent'] %}selected{% endif %}>{{ user_agent }}</option> <option value="{{ user_agent }}" {% if user_agent==default['useragent'] %}selected{% endif %}>{{ user_agent }}</option>
{% endfor%} {% endfor%}
</select> </select>
</span> </span>
</label> </label>
</div> </div>
{% endfor%} {% endfor%}
@ -218,9 +218,9 @@
<div> <div>
<button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConfigCapture" aria-expanded="false" aria-controls="collapseConfigCapture"> <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConfigCapture" aria-expanded="false" aria-controls="collapseConfigCapture">
<p style="margin-left: -12px; margin-top: 12px; font-size: x-large; color: black; text-decoration: underline; text-decoration-color: blue;"> <p style="margin-left: -12px; margin-top: 12px; font-size: x-large; color: black; text-decoration: underline; text-decoration-color: blue;">
<b>Capture Configuration</b> <b>Capture Configuration</b>
</p> </p>
</button> </button>
<div class="help-tip" title="Edit configuration options for the capture."></div> <div class="help-tip" title="Edit configuration options for the capture."></div>
</div> </div>
@ -361,49 +361,49 @@
<hr> <hr>
{% if current_user.is_authenticated %} {% if current_user.is_authenticated %}
<!-- admin only checkbox for autoreport --> <!-- admin only checkbox for autoreport -->
<div> <div>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" id="auto-report" name="auto-report" > <input class="form-check-input" type="checkbox" id="auto-report" name="auto-report" >
<label for="auto-report" class="form-check-label">Automatically submit to investigation team</label> <label for="auto-report" class="form-check-label">Automatically submit to investigation team</label>
</div>
<div id="collapseMailConfiguration" class="collapse">
<div class="card card-body">
<div class="row mb-3">
<label class="col-sm-3 col-form-label" for="email">Email of the sender (optional): </label>
<div class="col-sm-9">
<input class="form-control" type="text" id="email"
name="email" placeholder="myself@example.com">
</div> </div>
<div id="collapseMailConfiguration" class="collapse"> </div>
<div class="card card-body"> <div class="row mb-3">
<div class="row mb-3"> <label class="col-sm-3 col-form-label" for="recipient-mail">
<label class="col-sm-3 col-form-label" for="email">Email of the sender (optional): </label> Email of the recipient (optional): </label>
<div class="col-sm-9"> <div class="col-sm-9">
<input class="form-control" type="text" id="email" <input class="form-control" type="text" id="recipient-mail"
name="email" placeholder="myself@example.com"> name="recipient-mail" placeholder="to-someone@example.com">
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<label class="col-sm-3 col-form-label" for="recipient-mail"> <label class="col-sm-3 col-form-label" for="comment">Comment (optional): </label>
Email of the recipient (optional): </label> <div class="col-sm-9">
<div class="col-sm-9"> <textarea class="form-control" id="comment" name="comment" rows="3"></textarea>
<input class="form-control" type="text" id="recipient-mail" </div>
name="recipient-mail" placeholder="to-someone@example.com"> </div>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label" for="comment">Comment (optional): </label>
<div class="col-sm-9">
<textarea class="form-control" id="comment" name="comment" rows="3"></textarea>
</div>
</div>
</div>
</div>
</div> </div>
<hr> </div>
{% endif %} </div>
<hr>
{% endif %}
<center> <center>
<b> <b>
{% if default_public %} {% if default_public %}
By default, the capture is public. If you do not want that, untick the box at the top of the form. By default, the capture is public. If you do not want that, untick the box at the top of the form.
{% else %} {% else %}
By default, the capture is private (not visible on the index page). If you want it to be public tick the box at the top of the form. By default, the capture is private (not visible on the index page). If you want it to be public tick the box at the top of the form.
{% endif %} {% endif %}
</b> </b>
<br> <br>
<br> <br>
@ -416,7 +416,7 @@
{% block scripts %} {% block scripts %}
{{ super() }} {{ super() }}
<script src='{{ url_for('static', filename='capture.js') }}' <script src='{{ url_for('static', filename='capture.js') }}'
{{get_sri('static', 'capture.js')}} {{get_sri('static', 'capture.js')}}
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
{% endblock %} {% endblock %}