mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-26 11:42:39 +00:00
Functional vue-html-secure version
This commit is contained in:
@@ -15,13 +15,6 @@ const Frame = require('react-frame-component').default;
|
||||
const dedent = require('dedent-tabs').default;
|
||||
const { printCurrentBrew } = require('../../../shared/helpers.js');
|
||||
|
||||
import DOMPurify from 'dompurify';
|
||||
|
||||
const purifyConfig = {
|
||||
ADD_ATTR : ['id', 'target'],
|
||||
FORBID_TAGS : ['script']
|
||||
};
|
||||
|
||||
const Themes = require('themes/themes.json');
|
||||
|
||||
const PAGE_HEIGHT = 1056;
|
||||
@@ -34,6 +27,8 @@ const INITIAL_CONTENT = dedent`
|
||||
<base target=_blank>
|
||||
</head><body style='overflow: hidden'><div></div></body></html>`;
|
||||
|
||||
let safeHTML = ()=>{};
|
||||
|
||||
//v=====----------------------< Brew Page Component >---------------------=====v//
|
||||
const BrewPage = (props)=>{
|
||||
props = {
|
||||
@@ -41,7 +36,7 @@ const BrewPage = (props)=>{
|
||||
index : 0,
|
||||
...props
|
||||
};
|
||||
const cleanText = DOMPurify.sanitize(props.contents, purifyConfig);
|
||||
const cleanText = safeHTML(props.contents);
|
||||
return <div className={props.className} id={`p${props.index + 1}`} >
|
||||
<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: cleanText }} />
|
||||
</div>;
|
||||
@@ -130,9 +125,9 @@ const BrewRenderer = (props)=>{
|
||||
|
||||
const renderStyle = ()=>{
|
||||
if(!props.style) return;
|
||||
const cleanStyle = DOMPurify.sanitize(props.style, purifyConfig);
|
||||
const cleanStyle = safeHTML(`<style>${props.style}</style>`);
|
||||
//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${sanitizeScriptTags(props.style)}\n} </style>` }} />;
|
||||
return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${cleanStyle} </style>` }} />;
|
||||
return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: cleanStyle }} />;
|
||||
};
|
||||
|
||||
const renderPage = (pageText, index)=>{
|
||||
@@ -175,10 +170,7 @@ const BrewRenderer = (props)=>{
|
||||
};
|
||||
|
||||
const frameDidMount = ()=>{ //This triggers when iFrame finishes internal "componentDidMount"
|
||||
DOMPurify.addHook('uponSanitizeElement', (node, data, config)=>{
|
||||
const tagName = node.tagName?.toLowerCase();
|
||||
if(!config.FORBID_TAGS?.includes(tagName)){ data.allowedTags[tagName] = true; }
|
||||
});
|
||||
safeHTML = require('vue-html-secure').safeHTML;
|
||||
|
||||
setTimeout(()=>{ //We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame
|
||||
updateSize();
|
||||
|
||||
14
package-lock.json
generated
14
package-lock.json
generated
@@ -21,7 +21,6 @@
|
||||
"cookie-parser": "^1.4.6",
|
||||
"create-react-class": "^15.7.0",
|
||||
"dedent-tabs": "^0.10.3",
|
||||
"dompurify": "^3.1.5",
|
||||
"expr-eval": "^2.0.2",
|
||||
"express": "^4.19.2",
|
||||
"express-async-handler": "^1.2.0",
|
||||
@@ -47,7 +46,8 @@
|
||||
"react-router-dom": "6.23.1",
|
||||
"sanitize-filename": "1.6.3",
|
||||
"superagent": "^9.0.2",
|
||||
"vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
|
||||
"vitreum": "git+https://git@github.com/calculuschild/vitreum.git",
|
||||
"vue-html-secure": "^1.0.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^8.57.0",
|
||||
@@ -5467,11 +5467,6 @@
|
||||
"npm": ">=1.2"
|
||||
}
|
||||
},
|
||||
"node_modules/dompurify": {
|
||||
"version": "3.1.5",
|
||||
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.5.tgz",
|
||||
"integrity": "sha512-lwG+n5h8QNpxtyrJW/gJWckL+1/DQiYMX8f7t8Z2AZTPw1esVrqjI63i7Zc2Gz0aKzLVMYC1V1PL/ky+aY/NgA=="
|
||||
},
|
||||
"node_modules/duplexer2": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
|
||||
@@ -14628,6 +14623,11 @@
|
||||
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
|
||||
"integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
|
||||
},
|
||||
"node_modules/vue-html-secure": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/vue-html-secure/-/vue-html-secure-1.0.10.tgz",
|
||||
"integrity": "sha512-Cvlg0vYQiRxouXMFHQ87n5AIadl8SnrTNKbNENhJMlQIyrFkbXZ8yjn4c03BB0BeoPOf8vHKSx8f4yR3BIqYjQ=="
|
||||
},
|
||||
"node_modules/walker": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
|
||||
|
||||
@@ -93,7 +93,6 @@
|
||||
"cookie-parser": "^1.4.6",
|
||||
"create-react-class": "^15.7.0",
|
||||
"dedent-tabs": "^0.10.3",
|
||||
"dompurify": "^3.1.5",
|
||||
"expr-eval": "^2.0.2",
|
||||
"express": "^4.19.2",
|
||||
"express-async-handler": "^1.2.0",
|
||||
@@ -119,7 +118,8 @@
|
||||
"react-router-dom": "6.23.1",
|
||||
"sanitize-filename": "1.6.3",
|
||||
"superagent": "^9.0.2",
|
||||
"vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
|
||||
"vitreum": "git+https://git@github.com/calculuschild/vitreum.git",
|
||||
"vue-html-secure": "^1.0.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^8.57.0",
|
||||
|
||||
Reference in New Issue
Block a user