move purify to server side.

This commit is contained in:
Jason Schwarzenberger
2020-12-02 15:46:06 +13:00
parent cee104ea06
commit d1c513b9d6
11 changed files with 639 additions and 30 deletions

View File

@@ -1,6 +1,5 @@
<script>
import StoryInfo from "../components/StoryInfo.svelte";
import Html from "../components/Html.svelte";
export let story;
@@ -62,7 +61,7 @@
<article class="article">
<header class="article-header">
<h1 class="article-title">
<Html html={story.title} text={story.title} />
{@html story.title}
</h1>
{#if story.url}
<div>source: <a class="article-source" href={story.url}>{host}</a></div>
@@ -73,6 +72,6 @@
</header>
<section class="article-body">
<Html html={story.text} />
{@html story.text}
</section>
</article>

View File

@@ -1,6 +1,5 @@
<script>
import Time from "../components/Time.svelte";
import Html from "../components/Html.svelte";
export let story;
export let comment;
@@ -86,7 +85,7 @@
</header>
<section class={showComments ? 'comment-text' : 'comment-text is-collapsed'}>
<Html html={comment.text} />
{@html comment.text}
</section>
{#if !showComments}

View File

@@ -1,7 +1,6 @@
<script>
import { getLogoUrl } from "../utils/logos.js";
import StoryInfo from "../components/StoryInfo.svelte";
import Html from "../components/Html.svelte";
export let stories;
const host = (url) => new URL(url).hostname.replace(/^www\./, "");
@@ -43,7 +42,7 @@
class="story-icon"
style="height: 1rem; width: 1rem;" />
<a class="story-title" rel="prefetch" href="/{story.id}">
<Html html={story.title} text={story.title} />
{@html story.title}
</a>
<a
class="story-source"

View File

@@ -1,9 +1,17 @@
import fetch from 'isomorphic-fetch';
import { purify, purifyArray } from './_purify';
const API_URL = process.env.API_URL || 'http://localhost:33842';
export async function get(req, res) {
const response = await fetch(`${API_URL}/api/${req.params.id}`);
res.writeHead(response.status, { 'Content-Type': 'application/json' });
res.end(await response.text());
if (!response.ok) {
return res.end(await response.text());
}
const data = await response.json();
data.story = purify(data.story);
data.related = purifyArray(data.related);
res.end(JSON.stringify(data));
}

View File

@@ -0,0 +1,25 @@
import createDOMPurify from 'dompurify';
import { JSDOM } from 'jsdom';
export const purify = (story, DOMPurify) => {
if (!DOMPurify) {
DOMPurify = createDOMPurify(new JSDOM('').window);
}
if (story.title) {
story.title = DOMPurify.sanitize(story.title);
}
if (story.text) {
story.text = DOMPurify.sanitize(story.text);
}
return story;
};
export const purifyArray = (array, DOMPurify) => {
if (array instanceof Array) {
if (!DOMPurify) {
DOMPurify = createDOMPurify(new JSDOM('').window);
}
return array.map(story => purify(story, DOMPurify));
}
return array;
};

View File

@@ -1,5 +1,7 @@
import fetch from 'isomorphic-fetch';
import { purifyArray } from './_purify';
const API_URL = process.env.API_URL || 'http://localhost:33842';
export async function get(req, res) {
@@ -9,5 +11,10 @@ export async function get(req, res) {
};
const response = await fetch(`${API_URL}/api?skip=${skip}&limit=${limit}`);
res.writeHead(response.status, { 'Content-Type': 'application/json' });
res.end(await response.text());
if (!response.ok) {
return res.end(await response.text());
}
const data = await response.json();
data.stories = purifyArray(data.stories);
res.end(JSON.stringify(data));
}

View File

@@ -1,5 +1,7 @@
import fetch from 'isomorphic-fetch';
import { purifyArray } from './_purify';
const API_URL = process.env.API_URL || 'http://localhost:33842';
export async function get(req, res) {
@@ -9,5 +11,10 @@ export async function get(req, res) {
};
const response = await fetch(`${API_URL}/api/search?q=${req.query.q}&skip=${skip}&limit=${limit}`);
res.writeHead(response.status, { 'Content-Type': 'application/json' });
res.end(await response.text());
if (!response.ok) {
return res.end(await response.text());
}
const data = await response.json();
data.results = purifyArray(data.results);
res.end(JSON.stringify(data));
}