The-Naomi-Developers/embedbuilder
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add anti-XSS measures

Browse source
This commit is contained in:
Lorem Ipsum 2021-01-15 23:08:19 +00:00
parent 94394b38dd
commit a525ac5e52
3 changed files with 24 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
assets/css/index.css
View file

@ -513,10 +513,6 @@ img[alt] {
display: none; display: none;
} }
.embedGrid.empty {
display: none;
}
.messageContent { .messageContent {
user-select: text; user-select: text;
margin-left: -72px; margin-left: -72px;
@ -1580,10 +1576,16 @@ body {
transform-origin: top right; transform-origin: top right;
} }
.side2:not(.empty) .emptyTxt { .messageContent.empty, .messageContent+.container.empty, .emptyTxt {
display: none; display: none;
} }
.messageContent.empty+.container.empty+.emptyTxt {
display: block;
position: absolute;
top: 800%;
}
.clear>svg { .clear>svg {
width: 20px; width: 20px;
height: 100%; height: 100%;

23
assets/js/index.js
View file

@ -71,6 +71,8 @@ window.onload = () => {
.forEach(e => e.addEventListener('click', el => window.open(el.target.src))); .forEach(e => e.addEventListener('click', el => window.open(el.target.src)));
let editorHolder = document.querySelector('.editorHolder'), let editorHolder = document.querySelector('.editorHolder'),
guiParent = document.querySelector('.top'), guiParent = document.querySelector('.top'),
embedContent = document.querySelector('.messageContent'),
embedCont = document.querySelector('.messageContent + .container'),
gui = guiParent.querySelector('.gui:first-of-type'); gui = guiParent.querySelector('.gui:first-of-type');
window.editor = CodeMirror(elt => editorHolder.parentNode.replaceChild(elt, editorHolder), { window.editor = CodeMirror(elt => editorHolder.parentNode.replaceChild(elt, editorHolder), {
value: JSON.stringify(json, null, 4), value: JSON.stringify(json, null, 4),
@ -103,8 +105,8 @@ window.onload = () => {
return true; return true;
}, markup = (txt, opts) => { }, markup = (txt, opts) => {
txt = txt txt = txt
.replace(/<:[^:]+:(\d+)>/g, '<img class="emoji" src="https://cdn.discordapp.com/emojis/$1.png"/>') .replace(/\&#60;:[^:]+:(\d+)\&#62;/g, '<img class="emoji" src="https://cdn.discordapp.com/emojis/$1.png"/>')
.replace(/<a:[^:]+:(\d+)>/g, '<img class="emoji" src="https://cdn.discordapp.com/emojis/$1.gif"/>') .replace(/\&#60;a:[^:]+:(\d+)\&#62;/g, '<img class="emoji" src="https://cdn.discordapp.com/emojis/$1.gif"/>')
.replace(/~~(.+?)~~/g, '<s>$1</s>') .replace(/~~(.+?)~~/g, '<s>$1</s>')
.replace(/\*\*\*(.+?)\*\*\*/g, '<em><strong>$1</strong></em>') .replace(/\*\*\*(.+?)\*\*\*/g, '<em><strong>$1</strong></em>')
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>') .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
@ -116,11 +118,10 @@ window.onload = () => {
if (opts.inEmbed) txt = txt.replace(/\[([^\[\]]+)\]\((.+?)\)/g, `<a title="$1" target="_blank" class="anchor" href="$2">$1</a>`); if (opts.inEmbed) txt = txt.replace(/\[([^\[\]]+)\]\((.+?)\)/g, `<a title="$1" target="_blank" class="anchor" href="$2">$1</a>`);
if (opts.replaceEmojis) txt = txt.replace(/(?<!code(?: \w+=".+")?>[^>]+)(?<!\/[^\s"]+?):((?!\/)\w+):/g, (match, x) => x && emojis[x] ? emojis[x] : match); if (opts.replaceEmojis) txt = txt.replace(/(?<!code(?: \w+=".+")?>[^>]+)(?<!\/[^\s"]+?):((?!\/)\w+):/g, (match, x) => x && emojis[x] ? emojis[x] : match);
txt = txt txt = txt
.replace(/(?<=\n|^)\s*>\s+([^\n]+)/g, '<div class="blockquote"><div class="blockquoteDivider"></div><blockquote>$1</blockquote></div>') .replace(/(?<=\n|^)\s*&#62;\s+([^\n]+)/g, '<div class="blockquote"><div class="blockquoteDivider"></div><blockquote>$1</blockquote></div>')
.replace(/\n/g, '<br>'); .replace(/\n/g, '<br>');
return txt; return txt;
}, },
embedContent = document.querySelector('.messageContent'),
embed = document.querySelector('.embedGrid'), embed = document.querySelector('.embedGrid'),
msgEmbed = document.querySelector('.msgEmbed'), msgEmbed = document.querySelector('.msgEmbed'),
embedTitle = document.querySelector('.embedTitle'), embedTitle = document.querySelector('.embedTitle'),
@ -516,7 +517,11 @@ window.onload = () => {
fields = gui.querySelector('.fields ~ .edit'); fields = gui.querySelector('.fields ~ .edit');
update = data => { update = data => {
try { try {
embedContent.innerHTML = data.content ? markup(encodeHTML(data.content), { replaceEmojis: true }) : ''; if (!data.content) embedContent.classList.add('empty');
else {
embedContent.innerHTML = markup(encodeHTML(data.content), { replaceEmojis: true });
embedContent.classList.remove('empty');
}
if (data.embed && Object.keys(data.embed).length) { if (data.embed && Object.keys(data.embed).length) {
let e = data.embed; let e = data.embed;
if (!allGood(e)) return; if (!allGood(e)) return;
@ -572,11 +577,11 @@ window.onload = () => {
} }
display(embedFields, undefined, 'grid'); display(embedFields, undefined, 'grid');
} else hide(embedFields); } else hide(embedFields);
embed.classList.remove('empty'); embedCont.classList.remove('empty');
document.querySelectorAll('.markup pre > code').forEach((block) => hljs.highlightBlock(block)); document.querySelectorAll('.markup pre > code').forEach((block) => hljs.highlightBlock(block));
notif.animate({ opacity: '0', bottom: '-50px', offset: 1 }, { easing: 'ease', duration: 500 }).onfinish = () => notif.style.removeProperty('display'); notif.animate({ opacity: '0', bottom: '-50px', offset: 1 }, { easing: 'ease', duration: 500 }).onfinish = () => notif.style.removeProperty('display');
twemoji.parse(msgEmbed); twemoji.parse(msgEmbed);
} else embed.classList.add('empty'); } else embedCont.classList.add('empty');
} catch (e) { } catch (e) {
error(e); error(e);
} }
@ -586,7 +591,7 @@ window.onload = () => {
try { update(toObj(editor.getValue())); } try { update(toObj(editor.getValue())); }
catch (e) { catch (e) {
if (editor.getValue()) return; if (editor.getValue()) return;
embed.classList.add('empty'); embedCont.classList.add('empty');
embedContent.innerHTML = ''; embedContent.innerHTML = '';
} }
}); });
@ -637,7 +642,7 @@ window.onload = () => {
}) })
document.querySelector('.clear').addEventListener('click', () => { document.querySelector('.clear').addEventListener('click', () => {
json = {} json = { embed: {}, content: "" };
embed.style.removeProperty('border-color'); embed.style.removeProperty('border-color');
picker.source.style.removeProperty('background'); picker.source.style.removeProperty('background');
update(json); buildGui(json); editor.setValue('{}'); update(json); buildGui(json); editor.setValue('{}');

6
index.html
View file

@ -28,7 +28,7 @@
<script src="./assets/js/components.js"></script> <script src="./assets/js/components.js"></script>
<script src="./assets/js/index.js"></script> <script src="./assets/js/index.js"></script>
</head> </head>
<body class="gui"> <body class="gui empty">
<div class="main"> <div class="main">
<section class="side1"> <section class="side1">
<div class="chooser"> <div class="chooser">
@ -176,7 +176,7 @@
<div class="markup messageContent"></div> <div class="markup messageContent"></div>
<div class="container"> <div class="container">
<div class="embed markup"> <div class="embed markup">
<div class="embedGrid empty"> <div class="embedGrid">
<div class="embedAuthor embedMargin"></div> <div class="embedAuthor embedMargin"></div>
<div class="embedTitle embedMargin"></div> <div class="embedTitle embedMargin"></div>
<div class="embedDescription embedMargin"></div> <div class="embedDescription embedMargin"></div>
@ -187,11 +187,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="emptyTxt">Nothing here</div>
</div> </div>
<div class="bottomSide"> <div class="bottomSide">
<div class="notification">There is an error</div> <div class="notification">There is an error</div>
</div> </div>
<div class="emptyTxt">Nothing here</div>
</section> </section>
</div> </div>
</body> </body>