scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-03 04:27:53 +00:00
Code Issues Packages Projects Releases 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
6 changed files with 24 additions and 11 deletions
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'; } from '../dashboard/helper/scriptHelpers';
import FluentIcon from 'shared/components/FluentIcon/DashboardIcon'; import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
import VueDOMPurifyHTML from 'vue-dompurify-html'; import VueDOMPurifyHTML from 'vue-dompurify-html';
import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
Vue.config.env = process.env; Vue.config.env = process.env;
@@ -55,7 +56,8 @@ if (window.analyticsConfig) {
api_host: window.analyticsConfig.host, api_host: window.analyticsConfig.host,
}); });
} }
Vue.use(VueDOMPurifyHTML);
Vue.use(VueDOMPurifyHTML, domPurifyConfig);
Vue.use(VueRouter); Vue.use(VueRouter);
Vue.use(VueI18n); Vue.use(VueI18n);
Vue.use(WootUiKit); 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 i18n from '../widget/i18n';
import { isPhoneE164OrEmpty } from 'shared/helpers/Validators'; import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
import router from '../widget/router'; import router from '../widget/router';
import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
Vue.use(VueI18n); Vue.use(VueI18n);
Vue.use(Vuelidate); Vue.use(Vuelidate);
Vue.use(VueDOMPurifyHTML); Vue.use(VueDOMPurifyHTML, domPurifyConfig);
const i18nConfig = new VueI18n({ const i18nConfig = new VueI18n({
locale: 'en', locale: 'en',

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

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

2
package.json
View File

@@ -63,7 +63,7 @@
"vue-chartjs": "3.5.1", "vue-chartjs": "3.5.1",
"vue-clickaway": "~2.1.0", "vue-clickaway": "~2.1.0",
"vue-color": "2.8.1", "vue-color": "2.8.1",
"vue-dompurify-html": "^2.5.1", "vue-dompurify-html": "^2.5.2",
"vue-easytable": "2.5.5", "vue-easytable": "2.5.5",
"vue-i18n": "8.24.3", "vue-i18n": "8.24.3",
"vue-loader": "15.9.6", "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" loader-utils "^1.2.3"
querystring "^0.2.0" querystring "^0.2.0"
vue-dompurify-html@^2.5.1: vue-dompurify-html@^2.5.2:
version "2.5.1" version "2.5.2"
resolved "https://registry.npmjs.org/vue-dompurify-html/-/vue-dompurify-html-2.5.1.tgz#a754f4ac7b18eb8fe41f461cb2bb1c4956a9bd2d" resolved "https://registry.yarnpkg.com/vue-dompurify-html/-/vue-dompurify-html-2.5.2.tgz#f547d4eacae4640f95eb0e9308e7ef8e223887c6"
integrity sha512-B8rQj2jAPJJhtKHHa6jg5B3/RoKBmmUl/awP/GxWXGu75j4Y7+MHqv0DG52v0Uz0taEpHyZun34KEYMAfrPWnA== integrity sha512-G6I135+BhlACJ9xftqK7fvhXyjNrgHCI594qHnUW5e2Bmp8BOTV1kz7cxwI37b4BJnHkj9IY10RwMPOtJqw+pw==
dependencies: dependencies:
dompurify "^2.3.4" dompurify "^2.3.4"