-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
118 lines (108 loc) · 3.49 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Dragon Trainer Monthly - XSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
body {
margin: 0 auto;
max-width: 40em;
width: 88%;
}
article {
margin-bottom: 3em;
}
</style>
</head>
<body>
<h1 id="pageheader">Dragon Trainer Monthly - XSS</h1>
<div id="app"></div>
<script>
// Get the app element
let app = document.querySelector('#app');
/**
* Find the first matching author
* @param {String} name The author name
* @param {Array} authors The author details
* @return {Array} The author
*/
function getAuthor(name, authors) {
return authors.find(function (author) {
return author.author === name;
});
}
/**
* Render an error message if fetch fails
*/
function renderFail() {
app.innerHTML =
'<p>The dragons burned all the copies. Unable to get new articles at this time. Sorry!</p>';
}
/**
* Encode the HTML in a user-submitted string
* https://portswigger.net/web-security/cross-site-scripting/preventing
* @param {String} str The user-submitted string
* @return {String} str The sanitized string
*/
function encodeHTML(str) {
return str
.replace(/data:/gi, '')
.replace(/javascript:/gi, '')
.replace(/[^\w-_. ]/gi, function (c) {
return `&#${c.codePointAt(0)};`;
});
}
/**
* Render articles into the DOM
* @param {Array} articles The articles to render
* @param {Array} authors The author details
*/
function render(articles, authors) {
// If there are no articles to show
if (!articles || articles.length < 1) {
renderFail();
return;
}
// Create a new array of markup strings with array.map(), then
// Combine them into one string with array.join(), then
// Insert them into the DOM with innerHTML
app.innerHTML = articles
.map(function (article) {
let author = getAuthor(article.author, authors);
return `
<article>
<h2><a href="${encodeHTML(article.url)}">${encodeHTML(article.title)}</a></h2>
<p><em>By ${encodeHTML(
author ? `${author.author} - ${author.bio}` : article.author
)}</em></p>
<p>${encodeHTML(article.article)}</p>
</article>`;
})
.join('');
}
// Get articles
Promise.all([
fetch('https://vanillajsacademy.com/api/dragons.json'),
fetch('https://vanillajsacademy.com/api/dragons-authors.json'),
])
.then(function (responses) {
return Promise.all(
responses.map(function (response) {
return response.json();
})
);
})
.then(function (data) {
// Render them into the DOM
render(data[0].articles, data[1].authors);
})
.catch(function (error) {
console.warn(error);
renderFail();
});
let pageHeader = document.querySelector("#pageheader");
pageHeader.innerHTML += `${encodeHTML("👋")}`;
</script>
</body>
</html>