KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: Render links with target attribute (#4685)

Browse source
This commit is contained in:
Pranav Raj S 2022-05-16 11:29:05 +05:30 committed by GitHub
parent 2060f270d3
commit 45e2cd4903
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 24 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/javascript/packs/application.js
View file

@ -39,6 +39,7 @@ import {
} from '../dashboard/helper/scriptHelpers';
import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
import VueDOMPurifyHTML from 'vue-dompurify-html';
import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
Vue.config.env = process.env;
@ -55,7 +56,8 @@ if (window.analyticsConfig) {
api_host: window.analyticsConfig.host,
});
}
Vue.use(VueDOMPurifyHTML);
Vue.use(VueDOMPurifyHTML, domPurifyConfig);
Vue.use(VueRouter);
Vue.use(VueI18n);
Vue.use(WootUiKit);

3
app/javascript/packs/widget.js
View file

@ -9,9 +9,10 @@ import ActionCableConnector from '../widget/helpers/actionCable';
import i18n from '../widget/i18n';
import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
import router from '../widget/router';
import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
Vue.use(VueI18n);
Vue.use(Vuelidate);
Vue.use(VueDOMPurifyHTML);
Vue.use(VueDOMPurifyHTML, domPurifyConfig);
const i18nConfig = new VueI18n({
locale: 'en',

12
app/javascript/shared/helpers/HTMLSanitizer.js
View file

@ -6,3 +6,15 @@ export const escapeHtml = (unsafe = '') => {
.replace(/"/g, '"')
.replace(/'/g, ''');
};
export const afterSanitizeAttributes = currentNode => {
if ('target' in currentNode) {
currentNode.setAttribute('target', '_blank');
}
};
export const domPurifyConfig = {
hooks: {
afterSanitizeAttributes,
},
};

6
app/javascript/shared/helpers/MessageFormatter.js
View file

@ -1,6 +1,6 @@
import { marked } from 'marked';
import DOMPurify from 'dompurify';
import { escapeHtml } from './HTMLSanitizer';
import { escapeHtml, afterSanitizeAttributes } from './HTMLSanitizer';
const TWITTER_USERNAME_REGEX = /(^|[^@\w])@(\w{1,15})\b/g;
const TWITTER_USERNAME_REPLACEMENT =
@ -48,9 +48,7 @@ class MessageFormatter {
const markedDownOutput = marked(withHash);
return markedDownOutput;
}
DOMPurify.addHook('afterSanitizeAttributes', node => {
if ('target' in node) node.setAttribute('target', '_blank');
});
DOMPurify.addHook('afterSanitizeAttributes', afterSanitizeAttributes);
return DOMPurify.sanitize(
marked(this.message, { breaks: true, gfm: true })
);

2
package.json
View file

@ -63,7 +63,7 @@
"vue-chartjs": "3.5.1",
"vue-clickaway": "~2.1.0",
"vue-color": "2.8.1",
"vue-dompurify-html": "^2.5.1",
"vue-dompurify-html": "^2.5.2",
"vue-easytable": "2.5.5",
"vue-i18n": "8.24.3",
"vue-loader": "15.9.6",

8
yarn.lock
View file

@ -15284,10 +15284,10 @@ vue-docgen-loader@^1.5.0:
loader-utils "^1.2.3"
querystring "^0.2.0"
vue-dompurify-html@^2.5.1:
version "2.5.1"
resolved "https://registry.npmjs.org/vue-dompurify-html/-/vue-dompurify-html-2.5.1.tgz#a754f4ac7b18eb8fe41f461cb2bb1c4956a9bd2d"
integrity sha512-B8rQj2jAPJJhtKHHa6jg5B3/RoKBmmUl/awP/GxWXGu75j4Y7+MHqv0DG52v0Uz0taEpHyZun34KEYMAfrPWnA==
vue-dompurify-html@^2.5.2:
version "2.5.2"
resolved "https://registry.yarnpkg.com/vue-dompurify-html/-/vue-dompurify-html-2.5.2.tgz#f547d4eacae4640f95eb0e9308e7ef8e223887c6"
integrity sha512-G6I135+BhlACJ9xftqK7fvhXyjNrgHCI594qHnUW5e2Bmp8BOTV1kz7cxwI37b4BJnHkj9IY10RwMPOtJqw+pw==
dependencies:
dompurify "^2.3.4"